:root {
  color-scheme: light;
  --ink: #091225;
  --ink-2: #1a2942;
  --muted: #66738a;
  --line: #dfe6f0;
  --soft: #f5f8fc;
  --white: #fff;
  --blue: #2563eb;
  --blue-2: #1749c6;
  --cyan: #08afd0;
  --green: #0b9f6e;
  --amber: #df8d0b;
  --rose: #e74b70;
  --violet: #7546de;
  --navy: #07152e;
  --shadow: 0 24px 70px rgba(18, 40, 78, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f8fafe; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .38); outline-offset: 3px; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; color: #fff; background: var(--navy); border-radius: 6px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.demo-header { position: relative; z-index: 20; min-height: 72px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.demo-brand img { display: block; width: 178px; }
.demo-header-meta { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 700; }
.sample-badge { padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; color: #39516e; background: #eff5fb; border: 1px solid #dbe6f2; border-radius: 99px; }
.sample-badge i, .live-pill i, .gate-kicker i { width: 7px; height: 7px; display: inline-block; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(11,159,110,.11); }
.header-link { color: var(--blue-2); text-decoration: none; }
.header-link:hover { text-decoration: underline; }

.gate-shell { min-height: calc(100vh - 72px); padding: clamp(40px, 7vh, 82px) max(5vw, 24px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .65fr); align-items: center; gap: clamp(54px, 8vw, 120px); overflow: hidden; background: radial-gradient(circle at 10% 0%, rgba(8,175,208,.11), transparent 30%), linear-gradient(135deg, #f7fbff, #fff 58%, #f2f6fc); }
.gate-copy { max-width: 760px; }
.gate-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--blue-2); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.gate-copy h1 { max-width: 720px; margin: 21px 0 18px; font-size: clamp(42px, 5.3vw, 72px); line-height: .99; letter-spacing: -.055em; }
.gate-lede { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.63; }
.gate-proof { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 26px; color: #5f6d84; font-size: 12px; }
.gate-proof span { display: flex; align-items: baseline; gap: 6px; }
.gate-proof strong { color: var(--ink); font-size: 18px; }

.gate-preview { position: relative; height: 260px; max-width: 690px; margin-top: 46px; display: flex; overflow: hidden; background: #fff; border: 1px solid #dce5f1; border-radius: 14px; box-shadow: var(--shadow); transform: perspective(1100px) rotateX(2deg) rotateY(4deg); transform-origin: left bottom; }
.preview-sidebar { width: 72px; padding: 24px 20px; display: flex; flex-direction: column; gap: 17px; background: var(--navy); }
.preview-logo { width: 30px; height: 30px; margin: -4px 0 12px; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-radius: 7px; }
.preview-nav { width: 30px; height: 7px; display: block; background: rgba(255,255,255,.2); border-radius: 5px; }
.preview-nav.active { background: var(--cyan); }
.preview-main { flex: 1; padding: 29px 30px; }
.preview-heading { display: flex; flex-direction: column; gap: 7px; }
.preview-heading i:first-child { width: 94px; height: 8px; background: #b9c7d9; border-radius: 4px; }
.preview-heading i:last-child { width: 180px; height: 15px; background: #23334d; border-radius: 4px; }
.preview-cards { margin: 25px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-cards i { height: 52px; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; }
.preview-chart { height: 90px; padding: 12px 12px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 7px; }
.preview-chart span { flex: 1; min-height: 18px; background: linear-gradient(180deg, var(--cyan), var(--blue)); border-radius: 3px 3px 0 0; }
.preview-chart span:nth-child(1) { height: 34%; }.preview-chart span:nth-child(2) { height: 48%; }.preview-chart span:nth-child(3) { height: 74%; }.preview-chart span:nth-child(4) { height: 92%; }.preview-chart span:nth-child(5) { height: 84%; }.preview-chart span:nth-child(6) { height: 61%; }.preview-chart span:nth-child(7) { height: 44%; }
.preview-guide { position: absolute; right: 18px; top: 28px; width: 190px; padding: 17px; display: flex; flex-direction: column; gap: 8px; color: #fff; background: linear-gradient(145deg, #163d8d, #0b1e46); border-radius: 8px; box-shadow: 0 12px 40px rgba(7,21,46,.25); }
.preview-guide small { color: #79def0; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.preview-guide strong { font-size: 12px; }
.preview-guide i { height: 5px; background: rgba(255,255,255,.2); border-radius: 3px; }
.preview-guide i:last-child { width: 70%; }

.access-wrap { width: min(100%, 500px); justify-self: end; }
.access-card { padding: clamp(30px, 4vw, 46px); background: rgba(255,255,255,.98); border: 1px solid #dbe4ef; border-radius: 14px; box-shadow: var(--shadow); }
.access-heading { display: flex; align-items: center; gap: 15px; }
.access-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue), var(--cyan)); border-radius: 9px; font-size: 13px; font-weight: 800; }
.access-heading p, .access-heading h2 { margin: 0; }
.access-heading p { color: var(--blue-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.access-heading h2 { margin-top: 4px; font-size: 24px; letter-spacing: -.025em; }
.access-intro { margin: 23px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.access-card label { margin-top: 15px; display: grid; gap: 8px; color: #283953; font-size: 12px; font-weight: 750; }
.access-card input:not([type="checkbox"]) { width: 100%; padding: 13px 14px; color: var(--ink); background: #fbfcfe; border: 1px solid #ccd7e6; border-radius: 7px; outline: none; }
.access-card input:not([type="checkbox"]):focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.website-field { position: absolute; left: -10000px; }
.access-card .consent-row { margin: 18px 0 4px; display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.consent-row input { margin: 2px 0 0; accent-color: var(--blue); }
.primary-button, .secondary-button, .quiet-button, .card-button, .back-button, .product-nav-item { border: 0; cursor: pointer; }
.primary-button { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; color: #fff; background: linear-gradient(135deg, var(--blue), #197bd8); border-radius: 7px; box-shadow: 0 8px 22px rgba(37,99,235,.2); font-size: 13px; font-weight: 800; }
.primary-button:hover { background: linear-gradient(135deg, var(--blue-2), var(--blue)); transform: translateY(-1px); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.access-card > .primary-button { width: 100%; margin-top: 22px; }
.primary-button span { font-size: 17px; }
.test-divider { margin: 17px 0 12px; display: flex; align-items: center; gap: 10px; color: #97a2b2; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.test-divider::before, .test-divider::after { content: ""; height: 1px; flex: 1; background: #e3e9f1; }
.test-bypass-button { width: 100%; min-height: 42px; padding: 0 14px; color: #496079; background: #f4f7fb; border: 1px dashed #b9c7d8; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 800; }
.test-bypass-button:hover { color: var(--blue-2); background: #edf4fc; border-color: #82a4cf; }
.form-status { min-height: 18px; margin: 10px 0 0; color: var(--blue-2); text-align: center; font-size: 12px; }
.privacy-note { margin: 4px 0 0; color: #8490a2; text-align: center; font-size: 10px; line-height: 1.5; }
.gate-alt { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.gate-alt a { color: var(--blue-2); font-weight: 700; }

.chooser-shell { width: min(1240px, 92vw); margin: 0 auto; padding: 68px 0 90px; }
.chooser-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.chooser-heading > div { max-width: 750px; }
.section-kicker { margin: 0 0 14px; color: var(--blue-2); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.chooser-heading h1 { margin: 0; max-width: 700px; font-size: clamp(38px, 5vw, 62px); line-height: 1.03; letter-spacing: -.05em; }
.chooser-heading > div > p:last-child { max-width: 650px; margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.quiet-button { padding: 10px 0; flex: 0 0 auto; color: #647289; background: transparent; font-size: 12px; font-weight: 700; }
.quiet-button:hover { color: var(--blue-2); }
.full-tour-card { position: relative; margin-top: 44px; padding: 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 44px; color: #fff; background: linear-gradient(135deg, #102b50 0%, #173c6e 58%, #176e9c 100%); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; box-shadow: 0 22px 55px rgba(15,42,80,.2); overflow: hidden; }
.full-tour-card::after { content: ""; position: absolute; right: -90px; bottom: -130px; width: 330px; height: 330px; background: radial-gradient(circle, rgba(67,205,232,.2), transparent 68%); pointer-events: none; }
.full-tour-copy { position: relative; z-index: 1; }
.full-tour-mark { display: inline-flex; min-height: 24px; padding: 0 9px; align-items: center; color: #123b67; background: #c7f3fb; border-radius: 99px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.full-tour-copy > p { margin: 20px 0 7px; color: #8eddee; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.full-tour-copy h2 { max-width: 620px; margin: 0; font-size: clamp(27px, 3vw, 39px); line-height: 1.08; letter-spacing: -.04em; }
.full-tour-copy > span:not(.full-tour-mark) { max-width: 650px; margin-top: 14px; display: block; color: #cedaea; font-size: 14px; line-height: 1.6; }
.full-tour-meta { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #d9e6f4; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.full-tour-meta i { width: 3px; height: 3px; background: #6fcce0; border-radius: 50%; }
.full-tour-button { margin-top: 23px; background: linear-gradient(135deg, #34b9d4, #2587e7); box-shadow: 0 10px 26px rgba(5,21,45,.28); }
.full-tour-button:hover { background: linear-gradient(135deg, #4ec9df, #2f95ef); }
.full-tour-route { position: relative; z-index: 1; align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.full-tour-route div { min-height: 76px; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.full-tour-route b { color: #6ed0e4; font-size: 9px; letter-spacing: .08em; }
.full-tour-route span { color: #f2f7fc; font-size: 10px; font-weight: 800; line-height: 1.25; }
.module-grid-heading { margin-top: 48px; display: flex; align-items: end; justify-content: space-between; }
.module-grid-heading span { color: var(--ink-2); font-size: 15px; font-weight: 850; }
.module-grid-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.module-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module-card { min-height: 248px; padding: 25px; display: flex; flex-direction: column; background: #fff; border: 1px solid #dce4ef; border-radius: 10px; box-shadow: 0 8px 25px rgba(20,43,78,.045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.module-card:not(.is-preview):hover { border-color: #a9bfde; box-shadow: 0 18px 45px rgba(20,43,78,.1); transform: translateY(-3px); }
.module-card.is-preview { background: rgba(255,255,255,.62); }
.module-card-top { display: flex; align-items: center; justify-content: space-between; }
.module-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 7px; font-size: 10px; font-weight: 800; }
.module-mark.cyan { background: var(--cyan); }.module-mark.violet { background: var(--violet); }.module-mark.green { background: var(--green); }.module-mark.amber { background: var(--amber); }.module-mark.rose { background: var(--rose); }
.module-status { color: #8490a2; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.module-card > p { margin: 25px 0 7px; color: var(--blue-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.module-card h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
.card-button { margin: auto 0 0; padding: 15px 0 0; display: flex; justify-content: space-between; color: var(--blue-2); background: transparent; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; text-align: left; }
.card-button span { font-size: 17px; }
.preview-label { margin: auto 0 0; padding-top: 16px; color: #919caf; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.chooser-footnote { margin-top: 20px; padding: 18px 20px; display: flex; gap: 14px; color: var(--muted); background: #f0f5fb; border: 1px solid #dde7f2; border-radius: 8px; font-size: 11px; }
.chooser-footnote span { color: var(--ink-2); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.chooser-footnote p { margin: 0; }

.product-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 196px minmax(620px, 1fr) 342px; background: #f5f7fb; }
.product-sidebar { position: sticky; top: 0; height: calc(100vh - 72px); padding: 22px 12px 16px; display: flex; flex-direction: column; color: #a9b8cf; background: var(--navy); overflow-y: auto; }
.product-logo { padding: 0 9px 23px; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; }
.product-logo img { width: 30px; height: 30px; }
.product-sidebar nav { display: grid; gap: 3px; }
.product-nav-item { width: 100%; min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 10px; color: #94a5bd; background: transparent; border-radius: 6px; font-size: 11px; font-weight: 700; text-align: left; }
.product-nav-item i { width: 22px; height: 22px; display: grid; place-items: center; color: #aab9cd; background: rgba(255,255,255,.07); border-radius: 5px; font-style: normal; font-size: 9px; }
.product-nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.product-nav-item:disabled { opacity: .38; cursor: default; }
.product-nav-item:disabled:hover { color: #94a5bd; background: transparent; }
.product-nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(37,99,235,.32), rgba(8,175,208,.1)); }
.product-nav-item.active i { color: #fff; background: var(--blue); }
.sidebar-bottom { margin-top: auto; padding: 14px 9px 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-bottom > i { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #21477d; border-radius: 50%; font-style: normal; font-size: 8px; font-weight: 800; }
.sidebar-bottom div { min-width: 0; display: grid; gap: 2px; }
.sidebar-bottom strong { overflow: hidden; color: #fff; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-bottom span { color: #778ba8; font-size: 8px; }
.product-workspace { min-width: 0; }
.workspace-header { min-height: 57px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); }
.workspace-header > div { display: flex; align-items: center; gap: 13px; }
.back-button { padding: 0; color: #63728a; background: transparent; font-size: 10px; font-weight: 700; }
.back-button:hover { color: var(--blue-2); }
.workspace-divider { height: 18px; width: 1px; background: var(--line); }
.workspace-header strong { font-size: 11px; }
.period-control { padding: 7px 10px; display: grid !important; gap: 2px !important; background: #f7f9fc; border: 1px solid var(--line); border-radius: 6px; }
.period-control span { color: #8591a3; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.period-control strong { font-size: 8px; }
.dashboard { padding: 23px; }
.dashboard-title { margin-bottom: 19px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.dashboard-title p, .panel-heading p, .decision-panel p { margin: 0 0 5px; color: #6c7e94; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.dashboard-title h1 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.035em; }
.dashboard-title div > span { color: var(--muted); font-size: 9px; }
.live-pill { padding: 6px 9px; display: flex; align-items: center; gap: 7px; color: #50647d; background: #fff; border: 1px solid var(--line); border-radius: 99px; font-size: 8px; font-weight: 700; }
.live-pill i { width: 5px; height: 5px; box-shadow: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric-card { padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.metric-card p { margin: 0 0 9px; color: #687890; font-size: 8px; font-weight: 700; }
.metric-card div { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.metric-card strong { font-size: 18px; letter-spacing: -.03em; }
.metric-card div span { font-size: 7px; font-weight: 800; }
.metric-card .positive { color: var(--green); }.metric-card .negative { color: var(--rose); }
.metric-card small { color: #9ba5b3; font-size: 7px; }
.dashboard-grid { margin-top: 10px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.dashboard-panel { min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading h2, .decision-panel h2 { margin: 0; font-size: 12px; letter-spacing: -.015em; }
.panel-heading > span { color: #8491a5; font-size: 7px; }
.traffic-learning-grid { margin-top: 10px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.coverage-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--green) !important; font-weight: 800; }
.coverage-chip i { width: 6px; height: 6px; display: inline-block; background: var(--green); border-radius: 50%; }
.entrance-table { margin-top: 11px; display: grid; }
.entrance-row { padding: 11px 0; display: grid; grid-template-columns: minmax(126px, 1.5fr) repeat(3, minmax(48px, .55fr)); align-items: center; gap: 9px; border-top: 1px solid #edf1f6; }
.entrance-row:first-child { border-top: 0; }
.entrance-row > div:not(.entrance-name):not(.entrance-share) { display: grid; gap: 3px; }
.entrance-row span { color: #8995a6; font-size: 7px; }
.entrance-row strong { font-size: 9px; }
.entrance-name { min-width: 0; display: flex; align-items: center; gap: 8px; }
.entrance-name > i { width: 26px; height: 26px; flex: 0 0 auto; background: linear-gradient(145deg, var(--blue), var(--cyan)); border-radius: 6px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.86); }
.entrance-name div { min-width: 0; display: grid; gap: 3px; }
.entrance-share { height: 3px; grid-column: 1 / -1; overflow: hidden; background: #edf2f7; border-radius: 3px; }
.entrance-share i { height: 100%; display: block; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: inherit; }
.panel-note { margin: 9px 0 0; padding: 8px 9px; color: #708097; background: #f6f9fc; border-radius: 5px; font-size: 7px; line-height: 1.45; }
.panel-note strong { color: #354963; }
.threshold-panel { display: flex; flex-direction: column; }
.threshold-value { margin: 18px 0 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.threshold-value strong { color: var(--blue-2); font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.threshold-value span { color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.25; }
.threshold-track { position: relative; height: 6px; margin: 0 10px 16px; background: #e8eef5; border-radius: 8px; }
.threshold-track > i { width: 60%; height: 100%; display: block; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: inherit; }
.threshold-track b { position: absolute; top: -3px; width: 2px; height: 12px; background: #becbdd; }
.threshold-track b:nth-of-type(1) { left: 20%; }.threshold-track b:nth-of-type(2) { left: 40%; }.threshold-track b:nth-of-type(3) { left: 60%; background: var(--blue-2); }
.qualification-rule { margin-top: auto; display: grid; gap: 6px; }
.qualification-rule span { color: #527089; font-size: 7px; font-weight: 700; }
.zones-panel, .dwell-panel, .traffic-summary { grid-column: 1 / -1; }
.zone-layout { margin-top: 14px; display: grid; grid-template-columns: 210px 1fr; gap: 14px; }
.store-plan { position: relative; min-height: 174px; padding: 10px; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 5px; background: #eef3f8; border: 6px solid #d8e1ec; border-bottom-width: 12px; border-radius: 6px; }
.plan-zone { padding: 9px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; }
.plan-zone b { font-size: 8px; }.plan-zone small { font-size: 7px; font-weight: 800; }
.plan-zone.bridal { grid-row: 1 / 3; color: #075a70; background: #c8f4fb; }
.plan-zone.fashion { color: #52309f; background: #e6dcfc; }
.plan-zone.watches { color: #1749a8; background: #d9e7ff; }
.plan-zone.repair { position: absolute; right: 13px; bottom: 16px; width: 42%; height: 47px; color: #925d08; background: #ffedc9; }
.plan-entry { position: absolute; left: 50%; bottom: -10px; padding: 2px 9px; color: #5f6d80; background: #f8fafe; border: 1px solid #cbd6e3; border-radius: 4px 4px 0 0; font-size: 6px; font-style: normal; transform: translateX(-50%); }
.zone-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.zone-card { padding: 10px; display: flex; flex-direction: column; background: #f9fbfd; border: 1px solid #e2e8f0; border-radius: 6px; }
.zone-card-heading { display: flex; align-items: center; justify-content: space-between; color: #53657b; font-size: 7px; font-weight: 800; }
.zone-card-heading i { width: 7px; height: 7px; background: var(--cyan); border-radius: 2px; }
.zone-card.violet .zone-card-heading i { background: var(--violet); }.zone-card.blue .zone-card-heading i { background: var(--blue); }.zone-card.amber .zone-card-heading i { background: var(--amber); }
.zone-card > strong { margin-top: 8px; font-size: 16px; letter-spacing: -.03em; }
.zone-card > small { margin-top: 2px; color: #8692a3; font-size: 6px; }
.zone-card > div:last-child { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; color: #708097; border-top: 1px solid #e8edf3; font-size: 7px; }
.zone-card b { color: var(--ink); font-size: 8px; }
.dwell-bars { margin-top: 14px; display: grid; gap: 10px; }
.dwell-row { display: grid; grid-template-columns: 100px 1fr 52px; align-items: center; gap: 10px; }
.dwell-row > span { color: #52647b; font-size: 8px; font-weight: 700; }
.dwell-row > div { height: 9px; overflow: hidden; background: #edf2f7; border-radius: 5px; }
.dwell-row i { height: 100%; display: block; background: var(--cyan); border-radius: inherit; }
.dwell-row i.violet { background: var(--violet); }.dwell-row i.blue { background: var(--blue); }.dwell-row i.amber { background: var(--amber); }
.dwell-row strong { font-size: 8px; text-align: right; }
.traffic-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #effbfe, #fff); }
.traffic-summary p { margin: 0 0 5px; color: #6c7e94; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.traffic-summary h2 { margin: 0 0 4px; font-size: 12px; }
.traffic-summary div:nth-child(2) > span { color: var(--muted); font-size: 7px; }
.summary-legend { display: grid; gap: 6px; color: #52647b; font-size: 7px; font-weight: 700; }
.summary-legend span { display: flex; align-items: center; gap: 6px; }
.summary-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; }
.count-dot { background: var(--cyan); }.dwell-dot { background: var(--violet); }
.marketing-period { padding: 10px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.period-tabs { padding: 4px; display: flex; align-items: center; gap: 3px; background: #f1f4f8; border-radius: 6px; }
.period-tabs span, .period-tabs b { padding: 6px 8px; border-radius: 4px; font-size: 7px; white-space: nowrap; }
.period-tabs span { color: #6f7f93; }.period-tabs b { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(23,45,78,.08); }
.marketing-coverage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.marketing-coverage-card { padding: 7px 8px; background: #f9fbfd; border: 1px solid #e7ecf2; border-radius: 5px; }
.marketing-coverage-card > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.marketing-coverage-card strong { font-size: 7px; }
.marketing-coverage-card div span { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 6px; font-weight: 800; }
.marketing-coverage-card i { width: 5px; height: 5px; display: inline-block; background: var(--green); border-radius: 50%; }
.marketing-coverage-card p { margin: 4px 0 0; color: #8a96a6; font-size: 6px; }
.marketing-metric-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.marketing-metric { border-top: 2px solid rgba(117,70,222,.45); }
.marketing-dashboard-grid { margin-top: 10px; display: grid; grid-template-columns: .78fr 1.22fr; gap: 10px; }
.marketing-campaigns, .marketing-summary { grid-column: 1 / -1; }
.campaign-table { margin-top: 11px; display: grid; }
.campaign-row { min-height: 45px; padding: 8px 0; display: grid; grid-template-columns: auto minmax(140px, 1.5fr) repeat(3, minmax(52px, .55fr)) auto; align-items: center; gap: 9px; border-top: 1px solid #edf1f6; }
.campaign-row:first-child { border-top: 0; }
.campaign-row > i { width: 7px; height: 28px; background: var(--violet); border-radius: 4px; }
.campaign-row > i.rose { background: var(--rose); }.campaign-row > i.cyan { background: var(--cyan); }
.campaign-identity, .campaign-row > div:not(.campaign-identity) { display: grid; gap: 3px; }
.campaign-row strong { font-size: 8px; }.campaign-row span { color: #8693a5; font-size: 6px; }
.campaign-row > b { padding: 4px 6px; color: #087853; background: #eaf8f3; border-radius: 4px; font-size: 6px; }
.marketing-roas { background: linear-gradient(150deg, #f7f2ff, #fff 66%); border-color: #ded1fa; }
.roas-headline { margin: 18px 0 15px; display: grid; justify-items: center; }
.roas-headline strong { color: var(--violet); font-size: 38px; line-height: 1; letter-spacing: -.06em; }
.roas-headline span { margin-top: 4px; color: #7c6b96; font-size: 7px; }
.roas-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.roas-stat-grid div { padding: 8px; display: grid; gap: 3px; background: rgba(255,255,255,.72); border: 1px solid #e9e0fa; border-radius: 5px; }
.roas-stat-grid strong { font-size: 9px; }.roas-stat-grid strong.positive { color: var(--green); }
.roas-stat-grid span { color: #8a7d9d; font-size: 6px; }
.baseline-compare { margin-top: 9px; padding-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid #e4d9f8; }
.baseline-compare span { display: grid; gap: 2px; color: #897b9c; font-size: 6px; }.baseline-compare b { color: var(--ink); font-size: 8px; }
.timeline-legend { display: flex; align-items: center; gap: 4px; }
.timeline-legend i, .timeline-legend b { width: 6px; height: 6px; display: inline-block; border-radius: 2px; }
.timeline-legend i { background: var(--violet); }.timeline-legend b { background: var(--cyan); }
.marketing-weeks { height: 176px; margin-top: 13px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.marketing-week { min-width: 0; display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; gap: 3px; }
.week-plot { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; background: linear-gradient(180deg, transparent, #f7f4fc); border-bottom: 1px solid #e9e2f3; border-radius: 4px 4px 0 0; }
.week-plot i { width: min(13px, 28%); min-height: 5px; display: block; border-radius: 3px 3px 0 0; }
.revenue-bar { background: var(--violet); }.traffic-bar { background: var(--cyan); opacity: .78; }
.marketing-week > strong { font-size: 6px; white-space: nowrap; }.marketing-week > span, .marketing-week > small { color: #8491a3; font-size: 5px; white-space: nowrap; }
.marketing-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #f6f1ff, #fff); }
.marketing-summary p { margin: 0 0 5px; color: #6c7e94; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.marketing-summary h2 { margin: 0 0 4px; font-size: 12px; }
.marketing-summary div:nth-child(2) > span { color: var(--muted); font-size: 7px; }
.marketing-story .decision-icon { background: linear-gradient(145deg, var(--violet), var(--blue)); }
.marketing-story .guide-target.is-active { border-color: rgba(117,70,222,.65); box-shadow: 0 0 0 3px rgba(117,70,222,.13), 0 14px 30px rgba(63,39,126,.13); }
.marketing-story .guide-target.is-active::after { background: var(--violet); }
.marketing-insight { border-left-color: var(--violet); background: #f7f2ff; }
.marketing-insight span { color: var(--violet); }
.location-table { margin-top: 12px; display: grid; }
.location-row { padding: 10px 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; border-top: 1px solid #edf1f6; }
.location-row:first-child { border-top: 0; }
.location-row > div:first-child { display: grid; gap: 3px; }
.location-row strong { font-size: 9px; }
.location-row span { color: #8390a2; font-size: 7px; }
.conversion-cell { display: grid; justify-items: end; gap: 2px; }
.progress-track { height: 4px; grid-column: 1 / -1; overflow: hidden; background: #edf2f7; border-radius: 4px; }
.progress-track i { height: 100%; display: block; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: inherit; }
.campaign-status { padding: 4px 6px; color: var(--green) !important; background: rgba(11,159,110,.09); border-radius: 4px; font-weight: 800; }
.campaign-stat { margin: 18px 0 15px; display: grid; }
.campaign-stat strong { color: var(--blue-2); font-size: 29px; letter-spacing: -.05em; }
.campaign-stat span { color: var(--muted); font-size: 8px; }
.campaign-split > span { height: 5px; display: block; overflow: hidden; background: #edf2f7; border-radius: 5px; }
.campaign-split i { height: 100%; display: block; background: var(--violet); }
.campaign-split p { margin: 6px 0 12px; color: var(--muted); font-size: 8px; }
.campaign-split strong { color: var(--violet); }
.campaign-panel > small { color: #8b96a6; font-size: 7px; line-height: 1.4; }
.hourly-panel { grid-column: 1 / -1; }
.risk-key { display: flex; align-items: center; gap: 5px; }
.risk-key i { width: 6px; height: 6px; background: var(--rose); border-radius: 2px; }
.hourly-chart { height: 134px; margin-top: 17px; display: flex; align-items: flex-end; gap: 8px; }
.chart-column { height: 100%; flex: 1; display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; gap: 2px; color: #78879a; }
.bar-wrap { width: min(30px, 72%); height: 100%; display: flex; align-items: flex-end; background: #f0f4f8; border-radius: 4px 4px 0 0; }
.bar-wrap i { width: 100%; min-height: 4px; display: block; background: linear-gradient(180deg, var(--cyan), var(--blue)); border-radius: 4px 4px 0 0; }
.risk-window .bar-wrap { background: rgba(231,75,112,.08); box-shadow: inset 0 0 0 1px rgba(231,75,112,.14); }
.risk-window .bar-wrap i { background: linear-gradient(180deg, var(--rose), #c73d61); }
.chart-column strong { color: var(--ink-2); font-size: 7px; }
.chart-column span { font-size: 7px; font-weight: 700; }
.chart-column small { color: #98a3b1; font-size: 6px; }
.decision-panel { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #f3f8ff, #fff); }
.decision-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue), var(--cyan)); border-radius: 7px; font-size: 16px; }
.decision-panel div:nth-child(2) > span { color: var(--muted); font-size: 7px; }
.opportunity { display: grid; justify-items: end; gap: 2px; }
.opportunity strong { color: var(--green); font-size: 17px; }
.opportunity span { color: var(--muted); font-size: 6px; }
.saved-chip { padding: 7px 8px; color: #087853; background: #e8f8f2; border: 1px solid #c7ecde; border-radius: 5px; font-size: 7px; font-weight: 800; }
.connected-grid { margin-top: 10px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.story-list-panel, .story-chart-panel { min-height: 244px; }
.signal-list { margin-top: 12px; display: grid; }
.signal-row { min-height: 55px; padding: 10px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #edf1f6; }
.signal-row:first-child { border-top: 0; }
.signal-rank { width: 24px; height: 24px; display: grid; place-items: center; color: var(--story-accent); background: color-mix(in srgb, var(--story-accent) 9%, white); border-radius: 5px; font-size: 7px; font-weight: 800; }
.signal-row div { min-width: 0; display: grid; gap: 3px; }
.signal-row strong { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.signal-row div span { color: #8390a2; font-size: 7px; }
.signal-row b { color: var(--story-accent); font-size: 9px; }
.story-chart { height: 168px; margin-top: 22px; display: flex; align-items: flex-end; gap: 8px; }
.story-bar { height: 100%; flex: 1; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 5px; }
.story-bar i { width: min(28px, 80%); min-height: 5px; display: block; border-radius: 4px 4px 0 0; opacity: .88; }
.story-bar span { color: #8995a6; font-size: 7px; font-weight: 700; }
.story-decision { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 13px; background: linear-gradient(100deg, color-mix(in srgb, var(--story-accent) 7%, white), #fff); }
.connected-story .decision-icon { background: var(--story-accent); }
.connected-story .opportunity strong { color: var(--story-accent); }
.connected-story .guide-target.is-active { border-color: color-mix(in srgb, var(--story-accent) 65%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--story-accent) 13%, transparent), 0 14px 30px rgba(28,69,135,.13); }
.connected-story .guide-target.is-active::after { background: var(--story-accent); }
.connected-story .insight-card span { color: var(--story-accent); }

.guide-target { position: relative; transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease; }
.guide-target.is-active { z-index: 2; border-color: rgba(37,99,235,.6); box-shadow: 0 0 0 3px rgba(37,99,235,.13), 0 14px 30px rgba(28,69,135,.13); transform: translateY(-1px); }
.guide-target.is-active::after { content: "Current insight"; position: absolute; top: -9px; right: 10px; padding: 3px 7px; color: #fff; background: var(--blue); border-radius: 3px; font-size: 6px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.guide-panel { position: sticky; top: 0; height: calc(100vh - 72px); display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(20,43,78,.05); }
.guide-progress { padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.guide-progress > div:first-child { display: flex; justify-content: space-between; color: #78879a; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.guide-progress strong { color: var(--ink); }
.progress-dots { margin-top: 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.progress-dots i { height: 3px; background: #dfe6ef; border-radius: 3px; }
.progress-dots i.filled { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.guide-content { padding: clamp(30px, 5vh, 54px) 28px; overflow-y: auto; }
.guide-kicker { margin: 0 0 18px !important; color: var(--blue-2) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-content h2 { margin: 0; font-size: 26px; line-height: 1.16; letter-spacing: -.04em; }
.guide-content > p:not(.guide-kicker) { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.insight-card { margin-top: 28px; padding: 18px; display: grid; gap: 10px; background: #f2f7fd; border-left: 3px solid var(--blue); border-radius: 0 7px 7px 0; }
.insight-card span { color: var(--blue-2); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.insight-card strong { font-size: 12px; line-height: 1.55; }
.guide-actions { margin-top: auto; padding: 18px 22px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 9px; border-top: 1px solid var(--line); }
.guide-actions .primary-button { min-width: 0; }
.secondary-button { min-height: 46px; padding: 0 15px; color: #4b5d75; background: #f4f7fa; border: 1px solid #dbe3ed; border-radius: 7px; font-size: 12px; font-weight: 800; }
.secondary-button:hover:not(:disabled) { background: #eaf0f6; }
.secondary-button:disabled { opacity: .45; cursor: default; }
.noscript-card { max-width: 620px; margin: 80px auto; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.completion-shell { width: min(850px, calc(100% - 40px)); min-height: calc(100vh - 72px); margin: 0 auto; padding: 74px 0 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.completion-mark { width: 62px; height: 62px; margin-bottom: 23px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--green), var(--cyan)); border-radius: 50%; box-shadow: 0 14px 34px rgba(11,159,110,.2); font-size: 25px; font-weight: 800; }
.completion-shell h1 { max-width: 780px; margin: 0; font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -.055em; }
.completion-shell > p:not(.section-kicker) { max-width: 650px; margin: 22px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.completion-results { width: 100%; margin: 40px 0 31px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(20,43,78,.06); }
.completion-results span { padding: 23px 14px; display: grid; gap: 5px; color: var(--muted); border-left: 1px solid var(--line); font-size: 11px; }
.completion-results span:first-child { border-left: 0; }
.completion-results strong { color: var(--ink); font-size: 24px; letter-spacing: -.04em; }
.completion-actions { display: flex; gap: 12px; }
.completion-actions a { text-decoration: none; }
.completion-shell > small { margin-top: 26px; color: #8a96a8; font-size: 10px; }

@media (max-width: 1180px) {
  .gate-shell { grid-template-columns: 1fr 430px; gap: 50px; }
  .gate-preview { height: 220px; }
  .product-shell { grid-template-columns: 66px minmax(560px, 1fr) 310px; }
  .product-sidebar { padding-left: 8px; padding-right: 8px; }
  .product-logo { padding-left: 10px; }
  .product-logo span, .product-nav-item span, .sidebar-bottom div { display: none; }
  .product-nav-item { justify-content: center; padding: 0; }
  .product-nav-item i { width: 28px; height: 28px; }
  .sidebar-bottom { justify-content: center; padding-left: 0; padding-right: 0; }
}

@media (max-width: 920px) {
  .gate-shell { grid-template-columns: 1fr; padding-top: 52px; }
  .gate-copy { margin: 0 auto; text-align: center; }
  .gate-copy h1 { font-size: clamp(40px, 9vw, 62px); }
  .gate-proof { justify-content: center; }
  .gate-preview { margin-left: auto; margin-right: auto; text-align: left; transform: none; }
  .access-wrap { margin: 0 auto; justify-self: center; }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .full-tour-card { grid-template-columns: 1fr; gap: 28px; }
  .full-tour-route { grid-template-columns: repeat(5, 1fr); }
  .product-shell { display: block; }
  .product-sidebar { position: static; width: 100%; height: auto; padding: 8px 10px; flex-direction: row; align-items: center; overflow-x: auto; }
  .product-logo { padding: 0 10px 0 0; }
  .product-sidebar nav { display: flex; }
  .product-nav-item { width: 36px; flex: 0 0 36px; }
  .sidebar-bottom { display: none; }
  .guide-panel { position: relative; height: auto; min-height: 400px; border: 0; border-top: 1px solid var(--line); }
  .guide-content { padding: 34px 24px; }
  .guide-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
}

@media (max-width: 640px) {
  .demo-header { min-height: 62px; padding: 0 18px; }
  .demo-brand img { width: 145px; }
  .sample-badge { display: none; }
  .gate-shell { min-height: calc(100vh - 62px); padding: 38px 18px 55px; gap: 40px; }
  .gate-copy h1 { margin-top: 16px; font-size: 40px; }
  .gate-lede { font-size: 16px; }
  .gate-preview { height: 180px; margin-top: 34px; }
  .preview-sidebar { width: 48px; padding: 18px 11px; }
  .preview-main { padding: 21px 18px; }
  .preview-guide { display: none; }
  .access-card { padding: 27px 21px; }
  .chooser-shell { width: calc(100% - 36px); padding: 45px 0 65px; }
  .chooser-heading { align-items: flex-start; }
  .chooser-heading h1 { font-size: 39px; }
  .quiet-button { display: none; }
  .full-tour-card { margin-top: 32px; padding: 25px 21px; }
  .full-tour-copy h2 { font-size: 29px; }
  .full-tour-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .full-tour-meta i { display: none; }
  .full-tour-button { width: 100%; }
  .full-tour-route { grid-template-columns: repeat(3, 1fr); }
  .full-tour-route div { min-height: 66px; padding: 10px; }
  .module-grid-heading { margin-top: 38px; }
  .module-grid { margin-top: 16px; grid-template-columns: 1fr; }
  .module-card { min-height: 220px; }
  .card-button { min-height: 44px; }
  .access-card .consent-row { min-height: 44px; align-items: center; }
  .chooser-footnote { display: grid; }
  .workspace-header { padding: 0 14px; }
  .period-control { display: none !important; }
  .dashboard { padding: 16px 12px 24px; }
  .dashboard-title { align-items: center; }
  .dashboard-title div > span { display: none; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .traffic-learning-grid { grid-template-columns: 1fr; }
  .zones-panel, .dwell-panel, .traffic-summary { grid-column: 1; }
  .zone-layout { grid-template-columns: 1fr; }
  .connected-grid { grid-template-columns: 1fr; }
  .marketing-period { grid-template-columns: 1fr; }
  .marketing-dashboard-grid { grid-template-columns: 1fr; }
  .marketing-campaigns, .marketing-roas, .marketing-timeline, .marketing-summary { grid-column: 1; }
  .story-list-panel, .story-chart-panel { min-height: auto; }
  .story-decision { grid-column: 1; }
  .hourly-panel, .decision-panel { grid-column: 1; }
  .decision-panel { grid-template-columns: auto 1fr; }
  .entrance-row { grid-template-columns: minmax(112px, 1.4fr) repeat(3, minmax(42px, .55fr)); gap: 6px; }
  .zone-card-grid { grid-template-columns: 1fr 1fr; }
  .traffic-summary { grid-template-columns: auto 1fr; }
  .marketing-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .marketing-coverage { grid-template-columns: 1fr; }
  .campaign-row { grid-template-columns: auto 1fr auto; }
  .campaign-row > div:not(.campaign-identity) { display: none; }
  .marketing-summary { grid-template-columns: auto 1fr; }
  .marketing-summary .summary-legend { grid-column: 2; }
  .summary-legend { grid-column: 2; grid-template-columns: auto auto; justify-content: start; }
  .opportunity { justify-items: start; grid-column: 2; }
  .saved-chip { grid-column: 2; justify-self: start; }
  .hourly-chart { gap: 3px; }
  .chart-column small { font-size: 5px; }
  .guide-content h2 { font-size: 24px; }
  .completion-results { grid-template-columns: 1fr; }
  .completion-results span { border-left: 0; border-top: 1px solid var(--line); }
  .completion-results span:first-child { border-top: 0; }
  .completion-actions { width: 100%; flex-direction: column; }
}

.suite-return {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: #143fbc;
  box-shadow: 0 14px 32px rgba(19,63,188,.28);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.suite-return:hover,
.suite-return:focus-visible {
  background: #0d319c;
  transform: translateY(-1px);
}

.suite-return-inline {
  position: static;
  min-height: 36px;
  padding: 0 12px;
  border-color: #c8d7f3;
  box-shadow: none;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .suite-return {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    min-height: 42px;
    padding: 0 14px;
    font-size: 12px;
  }

  body.is-product-view .suite-return {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.is-product-view .suite-return-inline {
    position: static;
    min-height: 42px;
    padding: 0 10px;
  }

  .suite-return-inline .suite-return-label {
    font-size: 0;
  }

  .suite-return-inline .suite-return-label::after {
    content: "Suite";
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Product-faithful walkthrough shell */
body.is-product-view { background: #f7f8fa; }
body.is-product-view > .demo-header { display: none; }
body.is-product-view .product-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "sidebar workspace guide";
  background: #f7f8fa;
}

.product-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-area: topbar;
  min-width: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: stretch;
  background: #fff;
  border-bottom: 1px solid #e4e7ec;
}
.product-topbar .product-logo {
  width: 260px;
  min-width: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e4e7ec;
}
.product-topbar .product-logo img { width: 202px; height: auto; display: block; }
.product-topbar > nav { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; }
.product-topbar .product-nav-item {
  width: auto;
  min-height: 38px;
  padding: 0 12px;
  gap: 7px;
  color: #505865;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.product-topbar .product-nav-item i {
  width: auto;
  height: auto;
  color: #66707d;
  background: transparent;
  font-size: 14px;
}
.product-topbar .product-nav-item:hover,
.product-topbar .product-nav-item:disabled:hover { color: #303744; background: #f4f6f8; }
.product-topbar .product-nav-item:disabled { opacity: 1; cursor: default; }
.product-topbar .product-nav-item.active { color: #fff; background: #4d7fe6; }
.product-topbar .product-nav-item.active i { color: #fff; background: transparent; }
.product-account { padding: 0 17px 0 10px; display: flex; align-items: center; gap: 11px; border-left: 1px solid #edf0f3; }
.product-account .tour-exit { padding: 7px 10px; color: #465468; background: #f6f8fa; border: 1px solid #e5e9ef; border-radius: 8px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.product-account .tour-exit:hover { color: #315eb9; background: #eef4ff; }
.notification-icon { padding: 0 9px; color: #697381; border-right: 1px solid #e9edf1; font-size: 19px; }
.product-account > i { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #17285b; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 800; }
.product-account > div { display: grid; gap: 2px; }
.product-account strong { color: #151b26; font-size: 12px; white-space: nowrap; }
.product-account div span { color: #7b8490; font-size: 10px; white-space: nowrap; }

body.is-product-view .product-sidebar {
  position: sticky;
  top: 64px;
  grid-area: sidebar;
  width: auto;
  height: calc(100vh - 64px);
  padding: 16px 11px 12px;
  display: flex;
  flex-direction: column;
  color: #4d5664;
  background: #fff;
  border-right: 1px solid #e4e7ec;
  overflow-y: auto;
}
body.is-product-view .product-sidebar > nav { display: grid; gap: 3px; }
.context-nav-item {
  width: 100%;
  min-height: 41px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #505865;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.context-nav-item i { color: #64707e; font-size: 17px; font-style: normal; text-align: center; }
.context-nav-item b { color: #727c88; font-size: 12px; }
.context-nav-item:hover { background: #f4f6f9; }
.context-nav-item.active { color: #233b77; background: #eef3ff; }
.context-nav-item.active i { color: #355eb8; }
body.is-product-view .sidebar-bottom { margin-top: auto; padding: 14px 0 0; display: grid; gap: 3px; border-top: 1px solid #edf0f3; }
body.is-product-view .sidebar-bottom button {
  min-height: 39px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #505865;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
body.is-product-view .sidebar-bottom button i { font-style: normal; text-align: center; }
body.is-product-view .sidebar-bottom button:hover { background: #f4f6f9; }
body.is-product-view .sidebar-bottom .logout-item { color: #d64c56; }

body.is-product-view .product-workspace { grid-area: workspace; min-width: 0; }
body.is-product-view .dashboard { padding: 26px 22px 38px; }
body.is-product-view .dashboard-title { margin-bottom: 21px; align-items: center; }
body.is-product-view .dashboard-title p { margin: 0 0 7px; color: #416ed3; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
body.is-product-view .marketing-story .dashboard-title p { color: #4e5561; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.is-product-view .marketing-story .dashboard-title p span { color: #4272d1; }
body.is-product-view .dashboard-title h1 { margin: 0 0 5px; color: #101722; font-size: 27px; line-height: 1.15; letter-spacing: -.035em; }
body.is-product-view .dashboard-title div > span { color: #626b78; font-size: 12px; line-height: 1.45; }
.dashboard-controls { display: flex; align-items: center; gap: 10px; }
.segmented-control, .feed-filter { padding: 4px; display: flex; align-items: center; gap: 2px; color: #606a77; background: #f1f3f6; border-radius: 8px; }
.segmented-control b, .segmented-control i, .feed-filter b, .feed-filter i { padding: 8px 11px; border-radius: 6px; font-size: 10px; font-style: normal; white-space: nowrap; }
.segmented-control b, .feed-filter b { color: #161c25; background: #fff; box-shadow: 0 2px 7px rgba(20,35,61,.08); }
.dashboard-controls > button, .refresh-filter, .location-filter { padding: 9px 12px; color: #343c48; background: #fff; border: 1px solid #e1e5eb; border-radius: 8px; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(20,35,61,.03); }

body.is-product-view .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
body.is-product-view .metric-card {
  min-height: 120px;
  padding: 14px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 32px auto auto;
  gap: 5px 8px;
  border-color: #e5e8ed;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(31,42,64,.025);
}
.metric-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #3e68ce; background: #edf3ff; border-radius: 8px; font-size: 15px; font-weight: 800; }
.metric-icon-2 { color: #3e68ce; background: #eef3ff; }
.metric-icon-3 { color: #188a70; background: #e9f8f3; }
.metric-icon-4 { color: #7246d6; background: #f2ecff; }
.metric-icon-5 { color: #be7910; background: #fff6e4; }
.metric-icon-6 { color: #2f68d3; background: #edf2ff; }
body.is-product-view .metric-card p { margin: 0; align-self: center; color: #68717e; font-size: 10px; line-height: 1.25; }
body.is-product-view .metric-card > div { grid-column: 1 / -1; }
body.is-product-view .metric-card strong { font-size: 20px; }
body.is-product-view .metric-card div span { font-size: 7px; }
body.is-product-view .metric-card small { grid-column: 1 / -1; color: #7f8895; font-size: 7px; line-height: 1.35; }
body.is-product-view .dashboard-panel { padding: 17px; border-color: #e5e8ed; border-radius: 10px; box-shadow: 0 2px 6px rgba(31,42,64,.02); }
body.is-product-view .panel-heading p { color: #5d6876; font-size: 8px; }
body.is-product-view .panel-heading h2 { color: #161d28; font-size: 14px; }
body.is-product-view .panel-heading small { margin-top: 5px; display: block; color: #7d8793; font-size: 8px; }

.feed-card-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.feed-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e4e8ed; border-radius: 9px; box-shadow: 0 3px 10px rgba(28,40,61,.04); }
.feed-thumbnail { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #d8dde4; }
.feed-thumbnail img { position: absolute; width: 200%; height: 200%; max-width: none; object-fit: cover; }
.feed-thumbnail.quadrant-1 img { top: 0; left: 0; }
.feed-thumbnail.quadrant-2 img { top: 0; left: -100%; }
.feed-thumbnail.quadrant-3 img { top: -100%; left: 0; }
.feed-thumbnail.quadrant-4 img { top: -100%; left: -100%; }
.feed-thumbnail::after { content: "SIMULATED FEED"; position: absolute; right: 7px; bottom: 6px; padding: 3px 5px; color: rgba(255,255,255,.92); background: rgba(8,18,34,.58); border-radius: 4px; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.feed-live { position: absolute; top: 7px; left: 7px; padding: 4px 6px; display: flex; align-items: center; gap: 4px; color: #145e49; background: rgba(239,255,248,.92); border-radius: 5px; font-size: 6px; font-weight: 800; }
.feed-live i { width: 4px; height: 4px; background: #15a474; border-radius: 50%; }
.zone-polygon { position: absolute; left: 29%; top: 28%; width: 45%; height: 43%; border: 2px solid rgba(44,117,255,.8); background: rgba(44,117,255,.08); clip-path: polygon(9% 15%, 89% 0, 100% 79%, 19% 100%); transform: rotate(-4deg); }
.feed-card-body { padding: 10px 11px 11px; }
.feed-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #4d72c7; font-size: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.feed-card-heading b { padding: 3px 5px; color: #157153; background: #eaf9f3; border-radius: 4px; font-size: 5px; }
.feed-card h3 { margin: 8px 0 2px; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.feed-card-body > p { margin: 0; color: #808b98; font-size: 7px; }
.feed-stat-grid { margin-top: 9px; padding-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-top: 1px solid #edf0f3; }
.feed-stat-grid span { display: grid; gap: 3px; }
.feed-stat-grid small { color: #8a94a1; font-size: 6px; }
.feed-stat-grid strong { color: #17202d; font-size: 9px; }
.feed-card-foot { margin-top: 9px; padding-top: 8px; display: flex; justify-content: space-between; gap: 6px; color: #7c8794; border-top: 1px solid #edf0f3; font-size: 6px; }
.feed-card-foot b { color: #3869cc; white-space: nowrap; }

body.is-product-view .marketing-period { padding: 0; display: block; background: transparent; border: 0; }
.marketing-filterbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
body.is-product-view .period-tabs { padding: 4px; gap: 2px; background: #f1f3f6; border-radius: 8px; }
body.is-product-view .period-tabs span, body.is-product-view .period-tabs b { padding: 8px 11px; border-radius: 6px; font-size: 9px; }
.location-filter { min-width: 148px; text-align: left; }
.month-strip { margin-top: 14px; padding: 5px 16px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; background: #f0f2f5; border-radius: 8px; }
.month-strip span { padding: 7px 0; color: #65707d; border-radius: 6px; font-size: 8px; font-weight: 700; text-align: center; }
.month-strip span.active { color: #101620; background: #fff; box-shadow: 0 2px 7px rgba(20,35,61,.09); }
.month-strip span.future { opacity: .33; }
body.is-product-view .marketing-coverage { margin-top: 12px; gap: 10px; }
body.is-product-view .marketing-coverage-card { padding: 11px 13px; background: #fff; border-color: #e5e8ed; border-radius: 9px; }
body.is-product-view .marketing-coverage-card strong { font-size: 9px; }
body.is-product-view .marketing-coverage-card div span { font-size: 7px; }
body.is-product-view .marketing-coverage-card p { margin-top: 6px; font-size: 7px; }
body.is-product-view .marketing-metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
body.is-product-view .marketing-metric { border-top-width: 1px; }

/* Sales walkthrough */
.sales-story .dashboard { display: grid; gap: 14px; }
.sales-frame { padding: 1px; border: 1px solid transparent; border-radius: 10px; }
.sales-frame .dashboard-title { margin: 0 0 13px; }
.sales-title h1 { font-size: 25px !important; }
.sales-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sales-range, .sales-date, .sales-controls > strong, .sales-more { min-height: 35px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; color: #56606d; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; font-size: 8px; white-space: nowrap; }
.sales-range i, .sales-range em { color: #87919d; font-style: normal; }
.sales-range b { color: #3e4651; }
.sales-date { background: #f8f9fb; font-weight: 700; }
.sales-controls > strong { color: #3762ba; background: #eef3ff; border-color: #dce6fc; }
.sales-view-tabs { min-height: 35px; padding: 4px; display: flex; align-items: center; gap: 2px; color: #4f5865; background: #f2f3f5; border-radius: 8px; }
.sales-view-tabs b, .sales-view-tabs i { padding: 8px 10px; border-radius: 6px; font-size: 8px; font-style: normal; white-space: nowrap; }
.sales-view-tabs b { color: #254d9f; background: #fff; box-shadow: 0 2px 6px rgba(24,38,67,.08); }
.sales-more { margin-left: auto; color: #303844; font-weight: 700; }
.sales-operating { min-width: 0; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #e3e7ec; border-radius: 9px; }
.sales-operating > div:first-child { min-width: 185px; display: grid; gap: 3px; }
.sales-operating p { margin: 0; color: #89929d; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.sales-operating > div:first-child strong { color: #505965; font-size: 8px; }
.sales-total-row { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.sales-total { padding: 7px 9px; display: flex; align-items: center; gap: 4px; background: #fafbfc; border: 1px solid #edf0f3; border-radius: 7px; white-space: nowrap; }
.sales-total small { color: #929ba6; font-size: 6px; font-weight: 700; }
.sales-total strong { color: #25303d; font-size: 8px; }
.sales-total.green strong { color: #16815f; }
.sales-total.blue strong { color: #3466c4; }
.sales-total.violet strong { color: #6c4fc0; }
.sales-total-row button { padding: 8px 10px; color: #515b68; background: #fff; border: 1px solid #e3e7ec; border-radius: 7px; font-size: 7px; font-weight: 800; }
.sales-level-panel { min-width: 0; background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; overflow: visible; }
.sales-panel-heading { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f3; }
.sales-panel-heading h2 { margin: 0 0 5px; color: #151d29; font-size: 14px; }
.sales-panel-heading h2 span { color: #4774d0; }
.sales-panel-heading p { margin: 0; color: #7c8693; font-size: 7px; }
.sales-panel-heading > div:last-child { display: flex; align-items: center; gap: 8px; }
.sales-panel-heading > div:last-child b { padding: 7px 9px; color: #5c6673; background: #fafbfc; border: 1px solid #e8ebef; border-radius: 99px; font-size: 7px; }
.sales-panel-heading button { padding: 9px 11px; color: #2e57a8; background: #eef3ff; border: 1px solid #d7e2fa; border-radius: 8px; font-size: 8px; font-weight: 800; }
.sales-level-grid { padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sales-level-card { min-width: 0; background: #fff; border: 1px solid #e5e8ec; border-radius: 9px; box-shadow: 0 2px 5px rgba(30,42,62,.02); overflow: visible; }
.sales-level-card.is-risk { border-color: #efd6d8; }
.sales-level-head { min-height: 53px; padding: 11px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; border-bottom: 1px solid #edf0f3; }
.sales-level-head h3 { margin: 0 0 4px; color: #171e29; font-size: 10px; line-height: 1.2; }
.sales-level-head p { margin: 0; color: #858e99; font-size: 6px; }
.sales-level-head > b { padding: 5px 7px; border-radius: 99px; font-size: 7px; white-space: nowrap; }
.sales-level-head > b.positive { color: #147454; background: #eaf8f2; border: 1px solid #cfeee0; }
.sales-level-head > b.negative { color: #b54750; background: #fff1f1; border: 1px solid #f3d7d9; }
.sales-level-metrics { padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 8px; }
.sales-level-metrics > span { min-width: 0; display: grid; gap: 3px; }
.sales-level-metrics small { color: #89929e; font-size: 5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sales-level-metrics strong { color: #151d27; font-size: 9px; }
.sales-level-metrics em { overflow: hidden; color: #7e8894; font-size: 5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.sales-mix-bar { height: 5px; margin: 0 12px; display: flex; overflow: hidden; background: #e9edf3; border-radius: 99px; }
.sales-mix-bar i { display: block; background: #4778de; }
.sales-mix-bar b { display: block; background: #58c58e; }
.sales-mix-label { padding: 5px 12px 9px; display: flex; justify-content: space-between; color: #687380; font-size: 5px; }
.sales-expected { padding: 7px 12px; display: flex; justify-content: space-between; color: #77828e; background: #fafbfc; border-radius: 0 0 9px 9px; font-size: 6px; }
.sales-expected strong { color: #475362; }
.sales-decision { padding: 15px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #edf8f3, #fff); border: 1px solid #ceeadd; border-radius: 10px; }
.sales-decision .decision-icon { background: linear-gradient(145deg, #1b9a6d, #3974d6); }
.sales-decision > div:nth-child(2) p { margin: 0 0 4px; color: #24805f; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.sales-decision h2 { margin: 0 0 4px; font-size: 12px; }
.sales-decision > div:nth-child(2) span { color: #6e7986; font-size: 7px; }
.sales-decision > div:last-child { display: grid; justify-items: end; gap: 2px; }
.sales-decision > div:last-child strong { color: #16815f; font-size: 17px; }
.sales-decision > div:last-child span { color: #798490; font-size: 6px; }
.sales-decision > div:last-child b { margin-top: 3px; color: #ad5358; font-size: 8px; }
.sales-story .guide-target.is-active { border-color: rgba(27,151,106,.7); box-shadow: 0 0 0 3px rgba(27,151,106,.13), 0 12px 28px rgba(25,98,73,.1); }
.sales-story .guide-target.is-active::after { background: #16865f; }
.sales-insight { background: #eef9f4; border-left-color: #16865f; }
.sales-insight span { color: #117653; }

/* Inventory walkthrough */
.inventory-story .dashboard { display: grid; gap: 14px; }
.inventory-frame .dashboard-title { margin-bottom: 13px; }
.inventory-controls .sales-date { flex: 0 1 auto; }
.sales-more.is-aging { color: #234d9f; background: #eef3ff; border-color: #d7e2fa; }
.inventory-operating .sales-total.rose strong { color: #bc4f5a; }
.inventory-operating .sales-total.amber strong { color: #aa701e; }
.inventory-level-card.is-risk { border-color: #efcfd1; box-shadow: inset 0 2px 0 #d7686f; }
.sales-level-head > b.inventory-good { color: #147454; background: #eaf8f2; border: 1px solid #cfeee0; }
.sales-level-head > b.inventory-watch { color: #9a681b; background: #fff6e4; border: 1px solid #f2dfb9; }
.sales-level-head > b.inventory-risk { color: #b54750; background: #fff1f1; border: 1px solid #f3d7d9; }
.inventory-level-metrics > span:nth-child(5) strong { color: #9c5b25; }
.inventory-queue-panel, .inventory-action-detail { min-width: 0; background: #fff; border: 1px solid #e2e6eb; border-radius: 10px; box-shadow: 0 2px 6px rgba(31,42,64,.02); }
.inventory-queue-heading { padding: 15px 16px 11px; }
.inventory-queue-heading h2 { margin: 0 0 5px; color: #171e29; font-size: 14px; }
.inventory-queue-heading p { margin: 0; color: #707b88; font-size: 8px; }
.inventory-queue-table { overflow-x: auto; }
.inventory-queue-head, .inventory-queue-row { min-width: 760px; display: grid; grid-template-columns: .95fr .95fr 1.3fr .72fr 58px; align-items: center; gap: 8px; }
.inventory-queue-head { padding: 10px 14px; color: #87909b; background: #f7f8fa; border-top: 1px solid #edf0f3; border-bottom: 1px solid #e8ebef; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inventory-queue-row { min-height: 94px; padding: 13px 14px; border-bottom: 1px solid #edf0f3; }
.inventory-queue-row:last-child { border-bottom: 0; }
.inventory-queue-row > div { min-width: 0; display: grid; gap: 5px; }
.inventory-queue-row > div:first-child b { width: max-content; padding: 4px 6px; border-radius: 99px; font-size: 6px; }
.inventory-queue-row > div:first-child b.amber { color: #9c681b; background: #fff6e4; }
.inventory-queue-row > div:first-child b.rose { color: #b54750; background: #fff0f1; }
.inventory-queue-row > div:first-child b.blue { color: #3464bb; background: #eef3ff; }
.inventory-queue-row strong { color: #212a36; font-size: 8px; line-height: 1.4; }
.inventory-queue-row small { color: #818b97; font-size: 6px; line-height: 1.35; }
.inventory-queue-row > div:first-child small { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inventory-queue-row > span { color: #495462; font-size: 7px; font-weight: 650; line-height: 1.4; }
.inventory-queue-row > em { color: #515d6b; font-size: 7px; font-style: normal; font-weight: 750; }
.inventory-queue-row > button { padding: 9px 8px; color: #315eb2; background: #eef3ff; border: 1px solid #dbe5fa; border-radius: 7px; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.inventory-action-title { padding: 14px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inventory-action-title p { margin: 0 0 4px; color: #a16d1f; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.inventory-action-title h2 { margin: 0 0 4px; font-size: 14px; }
.inventory-action-title span { color: #7c8693; font-size: 7px; }
.inventory-action-title > b { padding: 7px 9px; color: #995f16; background: #fff6e4; border: 1px solid #f0dfbd; border-radius: 99px; font-size: 7px; white-space: nowrap; }
.inventory-action-table { overflow-x: auto; border-top: 1px solid #edf0f3; }
.inventory-action-head, .inventory-action-row { min-width: 760px; display: grid; grid-template-columns: 1.45fr .8fr .6fr .6fr .6fr .8fr; align-items: center; gap: 10px; }
.inventory-action-head { padding: 9px 13px; color: #87909b; background: #f7f8fa; border-bottom: 1px solid #e8ebef; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.inventory-action-row { min-height: 54px; padding: 9px 13px; color: #4f5a67; border-bottom: 1px solid #edf0f3; font-size: 7px; }
.inventory-action-row:last-child { border-bottom: 0; }
.inventory-action-row > div { min-width: 0; display: grid; gap: 3px; }
.inventory-action-row > div strong { color: #202936; font-size: 8px; }
.inventory-action-row > div small { overflow: hidden; color: #7f8995; font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }
.inventory-action-row > b { color: #a15d22; }
.inventory-action-row > em { padding: 5px 6px; color: #8b5d18; background: #fff6e4; border-radius: 5px; font-size: 6px; font-style: normal; font-weight: 800; text-align: center; }
.inventory-action-foot { padding: 11px 13px; display: flex; justify-content: space-between; gap: 10px; color: #7f8994; background: #fafbfc; border-radius: 0 0 10px 10px; font-size: 6px; }
.inventory-action-foot strong { color: #315eae; }
.inventory-story .guide-target.is-active { border-color: rgba(194,126,30,.72); box-shadow: 0 0 0 3px rgba(194,126,30,.13), 0 12px 28px rgba(104,75,30,.1); }
.inventory-story .guide-target.is-active::after { background: #b7771d; }
.inventory-insight { background: #fff8ea; border-left-color: #b7771d; }
.inventory-insight span { color: #9c6519; }

/* Diamonds walkthrough */
.diamond-story .dashboard { display: grid; gap: 14px; }
.diamond-story .dashboard-title { margin-bottom: 0; }
.diamond-title h1 { display: flex; align-items: center; gap: 8px; }
.diamond-title h1 span { color: #4778d8; font-size: 25px; }
.diamond-auto-badge { padding: 8px 10px; color: #687382; background: #fff; border: 1px solid #e5e8ed; border-radius: 8px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.diamond-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.diamond-kpi-card { min-width: 0; padding: 14px 15px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; box-shadow: 0 2px 7px rgba(30,43,66,.025); }
.diamond-kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #386cda; background: #edf3ff; border-radius: 8px; font-size: 16px; font-weight: 800; }
.diamond-kpi-icon.green { color: #168761; background: #eaf8f3; }
.diamond-kpi-icon.violet { color: #7a47d9; background: #f2ecff; }
.diamond-kpi-icon.rose { color: #d3525e; background: #fff0f1; }
.diamond-kpi-card > div { min-width: 0; display: grid; gap: 4px; }
.diamond-kpi-card small { color: #6d7683; font-size: 8px; }
.diamond-kpi-card strong { color: #111925; font-size: 20px; letter-spacing: -.03em; }
.diamond-kpi-card p { margin: 0; color: #929aa5; font-size: 6px; }
.diamond-mix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.diamond-mix-card { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; }
.diamond-mix-card > div { display: flex; align-items: center; gap: 10px; }
.diamond-mix-card b { padding: 5px 8px; color: #107153; background: #e9f8f1; border: 1px solid #cdeedf; border-radius: 99px; font-size: 8px; }
.diamond-mix-card.memo b { color: #6043a3; background: #f0edfb; border-color: #dfd7f6; }
.diamond-mix-card span { color: #77818e; font-size: 8px; }
.diamond-mix-card strong { font-size: 12px; }
.diamond-portfolio-panel, .diamond-matrix-panel { min-width: 0; padding: 14px; background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; box-shadow: 0 2px 7px rgba(30,43,66,.025); }
.diamond-filter-row { display: flex; align-items: center; gap: 8px; }
.diamond-search { min-width: 210px; flex: 1; padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: #939ca7; border: 1px solid #dde3ea; border-radius: 8px; font-size: 8px; }
.diamond-filter-label { color: #6b7582; font-size: 8px; font-weight: 800; }
.diamond-filter-row button { padding: 10px 10px; color: #4e5968; background: #fff; border: 1px solid #dde3ea; border-radius: 8px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.diamond-type-filters { margin-top: 10px; display: flex; gap: 6px; overflow-x: auto; }
.diamond-type-filters span, .diamond-type-filters b { padding: 7px 10px; display: flex; align-items: center; gap: 7px; color: #626d7a; border: 1px solid #e2e6eb; border-radius: 99px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.diamond-type-filters b { color: #274f9f; background: #f0f4ff; border-color: #cbd9f8; }
.diamond-type-filters i { padding: 2px 4px; color: #848e9a; background: #fff; border-radius: 99px; font-size: 6px; font-style: normal; }
.diamond-range-filters { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.diamond-range-filters > span { display: grid; gap: 5px; }
.diamond-range-filters small { color: #6d7784; font-size: 6px; font-weight: 800; }
.diamond-range-filters b { padding: 8px 9px; color: #4a5563; border: 1px solid #e0e5eb; border-radius: 7px; font-size: 8px; font-weight: 600; }
.diamond-table { margin-top: 12px; overflow-x: auto; border: 1px solid #e7eaee; border-radius: 8px; }
.diamond-table-head, .diamond-table-row { min-width: 960px; display: grid; grid-template-columns: 52px 1.35fr 72px 50px 48px 58px 1.05fr 70px 55px 90px; align-items: center; gap: 8px; }
.diamond-table-head { padding: 8px 10px; color: #707a87; background: #f6f7f9; border-bottom: 1px solid #e6e9ee; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.diamond-table-row { padding: 9px 10px; color: #596575; border-bottom: 1px solid #edf0f3; font-size: 7px; }
.diamond-table-row:last-child { border-bottom: 0; }
.diamond-table-row > div { min-width: 0; display: grid; gap: 3px; }
.diamond-table-row > div strong { color: #202936; font-size: 8px; }
.diamond-table-row > div small { overflow: hidden; color: #8a94a0; white-space: nowrap; text-overflow: ellipsis; }
.diamond-source { width: max-content; padding: 3px 5px; color: #2f66c4; background: #edf3ff; border-radius: 4px; font-size: 5px; font-weight: 800; }
.diamond-table-row > b { color: #222b38; }
.rap-value { color: #15815f; }
.diamond-matrix-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.diamond-matrix-title > div { display: flex; align-items: center; gap: 9px; }
.diamond-matrix-title > div:first-child > span { width: 34px; height: 34px; display: grid; place-items: center; color: #24788a; background: #e8f8fa; border-radius: 8px; font-size: 16px; }
.diamond-matrix-title h2 { margin: 0; color: #151d28; font-size: 15px; }
.diamond-matrix-title p { margin: 3px 0 0; color: #808a96; font-size: 7px; }
.diamond-matrix-title > div:last-child b, .diamond-matrix-title > div:last-child span { padding: 8px 10px; color: #4f5967; border: 1px solid #e0e5eb; border-radius: 7px; font-size: 7px; white-space: nowrap; }
.diamond-matrix-title > div:last-child b { color: #fff; background: #367f91; border-color: #367f91; }
.carat-tabs { margin-top: 12px; display: flex; gap: 6px; overflow-x: auto; }
.carat-tabs span, .carat-tabs b { padding: 8px 10px; color: #5f6976; background: #fff; border: 1px solid #e1e5ea; border-radius: 7px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.carat-tabs b { color: #fff; background: #367f91; border-color: #367f91; }
.matrix-kpis { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.matrix-kpis > span { padding: 10px 11px; display: grid; gap: 5px; border: 1px solid #e3e7ec; border-radius: 8px; }
.matrix-kpis small { color: #7b8592; font-size: 7px; }
.matrix-kpis strong { font-size: 13px; }
.diamond-matrix-table { margin-top: 10px; overflow-x: auto; border: 1px solid #e3e7ec; border-radius: 8px; }
.diamond-matrix-header, .diamond-matrix-row { min-width: 650px; display: grid; grid-template-columns: 58px repeat(6, 1fr); }
.diamond-matrix-header b { padding: 9px; color: #66717e; background: #f5f7f8; border-right: 1px solid #e8ebee; font-size: 7px; text-align: center; text-transform: uppercase; }
.diamond-matrix-row > b { padding: 13px 8px; display: grid; place-items: center; color: #1d2632; background: #fff; border-top: 1px solid #edf0f3; border-right: 1px solid #edf0f3; font-size: 9px; }
.matrix-cell { position: relative; min-height: 48px; padding: 8px; display: grid; place-content: center; gap: 3px; background: #f7fbfb; border-top: 1px solid #edf0f3; border-right: 1px solid #edf0f3; text-align: center; }
.matrix-cell.warm { background: #e7f6f7; }
.matrix-cell.hot { background: #bfe8ec; }
.matrix-cell strong { color: #20303a; font-size: 9px; }
.matrix-cell small { color: #5f747b; font-size: 5px; }
.diamond-decision { padding: 15px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #eaf9fa, #fff); border: 1px solid #cae9ec; border-radius: 10px; }
.diamond-decision > div:nth-child(2) p { margin: 0 0 4px; color: #397b83; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.diamond-decision h2 { margin: 0 0 4px; font-size: 12px; }
.diamond-decision > div:nth-child(2) span { color: #71808a; font-size: 7px; }
.diamond-decision > div:last-child { display: grid; justify-items: end; gap: 2px; }
.diamond-decision > div:last-child strong { color: #267f89; font-size: 23px; }
.diamond-decision > div:last-child span { color: #74818d; font-size: 6px; }
.diamond-story .guide-target.is-active { border-color: rgba(42,145,158,.7); box-shadow: 0 0 0 3px rgba(42,145,158,.13), 0 12px 28px rgba(27,92,102,.1); }
.diamond-story .guide-target.is-active::after { background: #2b8793; }
.diamond-insight { background: #eff9fa; border-left-color: #2b8793; }
.diamond-insight span { color: #227782; }

/* Predictive walkthrough */
.predictive-story .dashboard { display: grid; gap: 14px; }
.predictive-story .dashboard-title { margin-bottom: 0; }
.predictive-powerhouse-hero { padding: 17px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: #fff8ed; border: 1px solid #f1dfbf; border-radius: 10px; }
.powerhouse-flame { width: 36px; height: 36px; display: grid; place-items: center; color: #d77a31; background: #fff0d9; border-radius: 9px; font-size: 18px; }
.predictive-powerhouse-hero p { margin: 0 0 5px; color: #b56528; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.predictive-powerhouse-hero h2 { margin: 0 0 5px; color: #161d27; font-size: 14px; }
.predictive-powerhouse-hero div span { color: #65707c; font-size: 8px; }
.predictive-powerhouse-hero > b { padding: 8px 10px; color: #5f6874; background: rgba(255,255,255,.76); border: 1px solid #f2e7d3; border-radius: 99px; font-size: 7px; white-space: nowrap; }
.predictive-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.predictive-kpi-card { min-width: 0; padding: 14px; display: grid; gap: 6px; background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; box-shadow: 0 2px 7px rgba(30,43,66,.025); }
.predictive-kpi-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #426ed0; background: #eef3ff; border-radius: 8px; font-size: 14px; font-weight: 800; }
.predictive-kpi-icon.green { color: #168761; background: #eaf8f3; }
.predictive-kpi-icon.amber { color: #b8751e; background: #fff7e5; }
.predictive-kpi-icon.slate { color: #617080; background: #f0f2f5; }
.predictive-kpi-icon.indigo { color: #4a5ec3; background: #eef0ff; }
.predictive-kpi-card > small { margin-top: 2px; color: #747f8c; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.predictive-kpi-card > strong { color: #111925; font-size: 20px; letter-spacing: -.03em; }
.predictive-kpi-card > p { margin: 0; color: #7f8995; font-size: 7px; }
.predictive-filter-panel { padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #fff; border: 1px solid #e4e8ed; border-radius: 10px; }
.predictive-filter-panel label { display: grid; gap: 6px; }
.predictive-filter-panel label > span { color: #697582; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.predictive-filter-panel label > b { padding: 10px 11px; display: flex; justify-content: space-between; color: #4c5664; border: 1px solid #dfe4ea; border-radius: 8px; font-size: 8px; font-weight: 600; }
.predictive-candidates { min-width: 0; }
.predictive-analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.predictive-analysis-grid article { padding: 12px 13px; display: grid; gap: 7px; background: #eef3ff; border: 1px solid #dce6fa; border-radius: 9px; }
.predictive-analysis-grid small { color: #3f6fc4; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.predictive-analysis-grid strong { color: #1b2a42; font-size: 8px; line-height: 1.45; }
.predictive-candidate-heading { margin-top: 10px; padding: 14px 15px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e4e8ed; border-bottom: 0; border-radius: 10px 10px 0 0; }
.predictive-candidate-heading p { margin: 0 0 4px; color: #687481; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.predictive-candidate-heading h2 { margin: 0; font-size: 13px; }
.predictive-candidate-heading > span { color: #7f8994; font-size: 7px; }
.predictive-candidate-table { overflow-x: auto; background: #fff; border: 1px solid #e4e8ed; border-radius: 0 0 10px 10px; }
.predictive-candidate-row { min-width: 820px; padding: 10px 12px; display: grid; grid-template-columns: 30px minmax(190px, 1.3fr) repeat(4, minmax(70px, .55fr)) 72px; align-items: center; gap: 9px; border-bottom: 1px solid #edf0f3; }
.predictive-candidate-row:last-child { border-bottom: 0; }
.candidate-rank { width: 25px; height: 25px; display: grid; place-items: center; color: #4b65b8; background: #eef2ff; border-radius: 6px; font-size: 7px; font-weight: 800; }
.predictive-candidate-row > div { min-width: 0; display: grid; gap: 3px; }
.predictive-candidate-row > div strong { overflow: hidden; color: #1c2531; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.predictive-candidate-row > div small { color: #7f8996; font-size: 6px; }
.predictive-candidate-row > span:not(.candidate-rank) { display: grid; gap: 3px; }
.predictive-candidate-row span small { color: #89939f; font-size: 5px; }
.predictive-candidate-row span b { color: #27313d; font-size: 8px; }
.predictive-candidate-row em { padding: 5px 6px; color: #177053; background: #e9f8f2; border-radius: 5px; font-size: 6px; font-style: normal; font-weight: 800; text-align: center; }
.predictive-candidate-row em.watch { color: #9b6818; background: #fff6e3; }
.predictive-decision { padding: 15px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: linear-gradient(100deg, #eef2ff, #fff); border: 1px solid #d9e1f6; border-radius: 10px; }
.predictive-decision > div:nth-child(2) p { margin: 0 0 4px; color: #506abb; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.predictive-decision h2 { margin: 0 0 4px; font-size: 12px; }
.predictive-decision > div:nth-child(2) span { color: #6d7886; font-size: 7px; }
.predictive-decision > div:last-child { display: grid; justify-items: end; gap: 2px; }
.predictive-decision > div:last-child strong { color: #405fbd; font-size: 15px; }
.predictive-decision > div:last-child span { color: #7e8996; font-size: 6px; }
.predictive-story .guide-target.is-active { border-color: rgba(78,103,196,.7); box-shadow: 0 0 0 3px rgba(78,103,196,.13), 0 12px 28px rgba(47,65,131,.1); }
.predictive-story .guide-target.is-active::after { background: #4f67c1; }
.predictive-insight { background: #f1f3fc; border-left-color: #4f67c1; }
.predictive-insight span { color: #455ab3; }

/* Bill AI walkthrough */
.bill-story .sidebar-bottom button:first-child { color: #6548c5; background: #f1edff; }
.bill-stage { position: relative; min-width: 0; min-height: calc(100vh - 64px); overflow: hidden; background: #f4f6f9; }
.bill-dashboard-ghost { min-height: 100%; padding: 28px; opacity: .42; filter: saturate(.65); }
.bill-dashboard-ghost > div:first-child { display: grid; gap: 5px; }
.bill-dashboard-ghost h1 { margin: 0; color: #17212d; font-size: 22px; }
.bill-dashboard-ghost span { color: #7e8995; font-size: 9px; }
.bill-ghost-kpis { margin-top: 28px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.bill-ghost-kpis i { height: 90px; background: #fff; border: 1px solid #dfe4ea; border-radius: 10px; }
.bill-ghost-chart { height: 330px; margin-top: 18px; padding: 26px; display: flex; align-items: flex-end; gap: 10px; background: #fff; border: 1px solid #dfe4ea; border-radius: 12px; }
.bill-ghost-chart i { flex: 1; background: #5c82dc; border-radius: 5px 5px 0 0; }
.bill-drawer { position: absolute; inset: 0 0 0 auto; width: min(440px, 100%); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; color: #e8eaf0; background: #070812; border-left: 1px solid #272937; box-shadow: -18px 0 45px rgba(8,9,18,.28); }
.bill-drawer-header { padding: 13px 16px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; border-bottom: 1px solid #242633; }
.bill-drawer-header > span, .bill-spark { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #9a56ed, #7132df); border-radius: 10px; box-shadow: 0 7px 18px rgba(126,64,220,.3); font-size: 16px; }
.bill-drawer-header h2 { margin: 0 0 2px; color: #fff; font-size: 11px; }
.bill-drawer-header p { margin: 0; color: #747989; font-size: 6px; }
.bill-drawer-header small { color: #747989; font-size: 10px; }
.bill-drawer-header button { width: 26px; height: 26px; color: #737888; background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 15px; }
.bill-nudges { padding: 12px 14px 0; display: grid; gap: 7px; }
.bill-nudges article { padding: 9px 10px; display: flex; align-items: flex-start; gap: 8px; background: rgba(228,165,47,.08); border: 1px solid rgba(228,165,47,.18); border-radius: 10px; }
.bill-nudges article > span { color: #e2ae3c; font-size: 11px; }
.bill-nudges article > div { display: grid; gap: 2px; }
.bill-nudges strong { color: #f0d58b; font-size: 7px; }
.bill-nudges p { margin: 0; color: #767988; font-size: 6px; }
.bill-empty-state { min-height: 0; padding: 28px 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bill-empty-state .bill-spark { width: 54px; height: 54px; margin-bottom: 17px; border-radius: 16px; font-size: 24px; }
.bill-empty-state h3 { margin: 0 0 8px; color: #fff; font-size: 17px; }
.bill-empty-state > p { max-width: 290px; margin: 0 0 19px; color: #9a9eac; font-size: 9px; line-height: 1.55; }
.bill-quick-actions { width: 100%; display: grid; gap: 8px; }
.bill-quick-actions button { padding: 11px 13px; color: #d3d6de; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; font: inherit; font-size: 8px; text-align: left; }
.bill-conversation { min-height: 0; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.bill-message { display: flex; align-items: flex-start; gap: 8px; }
.bill-message.user { justify-content: flex-end; }
.bill-message > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #9550e9, #6d32d7); border-radius: 7px; font-size: 10px; }
.bill-message.user > span { order: 2; color: #cfd2da; background: #353846; font-size: 6px; font-weight: 800; }
.bill-message > div { max-width: 85%; padding: 9px 11px; color: #d5d8df; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px 12px 12px 4px; font-size: 7px; line-height: 1.45; }
.bill-message.user > div { color: #fff; background: #7240d6; border-color: #7240d6; border-radius: 12px 12px 4px 12px; }
.bill-message p { margin: 0 0 5px; }
.bill-message p:last-child { margin-bottom: 0; }
.bill-message ul, .bill-message ol { margin: 4px 0 0; padding-left: 15px; display: grid; gap: 4px; }
.bill-message strong, .bill-message b { color: #fff; }
.bill-priority-message { margin-bottom: 2px; }
.bill-confirmation { margin-left: 33px; overflow: hidden; background: rgba(135,79,230,.08); border: 1px solid rgba(146,89,235,.32); border-radius: 10px; }
.bill-confirmation > div:first-child { padding: 8px 11px; display: flex; justify-content: space-between; color: #c6a9f6; font-size: 7px; }
.bill-confirmation > div:first-child span { color: #757989; }
.bill-confirmation > div:first-child b { color: #55c892; }
.bill-confirmation .bill-undo-inline { padding: 3px 6px; color: #efb553; background: rgba(232,165,54,.1); border: 0; border-radius: 5px; font: inherit; font-size: 6px; font-weight: 700; }
.bill-confirmation dl { margin: 0; padding: 7px 11px; display: grid; grid-template-columns: 65px 1fr; gap: 5px 8px; border-top: 1px solid rgba(255,255,255,.05); }
.bill-confirmation dt { color: #747989; font-size: 6px; }
.bill-confirmation dd { margin: 0; color: #dce0e7; font-size: 7px; }
.bill-confirmation dd:nth-of-type(4) { color: #fff; font-weight: 800; }
.bill-confirm-actions { padding: 7px 11px 10px; display: flex; justify-content: flex-end; gap: 7px; }
.bill-confirm-actions button { min-width: 86px; padding: 7px 9px; color: #afb3bf; background: rgba(255,255,255,.06); border: 0; border-radius: 7px; font: inherit; font-size: 7px; font-weight: 700; }
.bill-confirm-actions button:last-child { color: #fff; background: #7543dc; }
.bill-result > div { border-color: rgba(62,177,125,.25); background: rgba(48,151,105,.09); }
.bill-result small { margin-top: 7px; display: block; color: #4fc391; font-size: 5px; font-weight: 800; letter-spacing: .06em; }
.bill-input-wrap { padding: 10px 12px 8px; border-top: 1px solid #252733; }
.bill-followups { margin-bottom: 7px; display: flex; gap: 5px; overflow: hidden; }
.bill-followups span { padding: 5px 7px; color: #9094a1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; font-size: 5px; white-space: nowrap; }
.bill-input-wrap > div:not(.bill-followups) { padding: 5px 5px 5px 10px; display: flex; align-items: center; justify-content: space-between; color: #777b8a; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; box-shadow: 0 0 0 2px rgba(124,70,222,.2); font-size: 7px; }
.bill-input-wrap button { width: 28px; height: 28px; color: #5e6270; background: rgba(255,255,255,.04); border: 0; border-radius: 7px; }
.bill-input-wrap > small { margin-top: 3px; display: block; color: #4f5360; font-size: 5px; text-align: right; }
.bill-story .bill-drawer .guide-target.is-active { border-color: rgba(161,99,248,.9); box-shadow: 0 0 0 3px rgba(142,79,233,.2), 0 12px 28px rgba(24,10,50,.32); }
.bill-story .bill-drawer .guide-target.is-active::after { top: 5px; right: 8px; background: #8a4de1; }
.bill-insight { background: #f3effc; border-left-color: #7a43d8; }
.bill-insight span { color: #6e38c7; }

/* Dashboard walkthrough */
.owner-story .dashboard { display: grid; gap: 14px; }
.owner-frame, .owner-coverage, .owner-kpi-grid, .owner-marketing, .owner-traffic-panel, .owner-conversion-panel { min-width: 0; }
.owner-frame { padding: 15px 16px; background: #fff; border: 1px solid #e2e7ed; border-radius: 10px; }
.owner-title-row { display: grid; grid-template-columns: auto minmax(250px, 1fr) minmax(360px, auto); align-items: center; gap: 16px; }
.owner-title-row h1 { margin: 0 0 3px; color: #111925; font-size: 20px; letter-spacing: -.025em; }
.owner-title-row p { margin: 0; color: #747f8b; font-size: 9px; }
.owner-status-pills { display: flex; align-items: center; gap: 8px; }
.owner-status-pills > span { padding: 7px 10px; display: flex; align-items: center; gap: 5px; border-radius: 99px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.owner-status-pills i { font-style: normal; }
.owner-status-pills small { font-size: 6px; font-weight: 500; opacity: .75; }
.owner-status-pills .vision { color: #177451; background: #d9f5e9; }
.owner-status-pills .pos { color: #345fac; background: #e7effe; }
.owner-range { padding: 6px; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 3px; background: #f3f5f7; border-radius: 8px; }
.owner-range > span, .owner-range > b { padding: 6px 8px; color: #717c88; border-radius: 6px; font-size: 6px; font-weight: 700; white-space: nowrap; }
.owner-range > b { color: #222e3b; background: #fff; box-shadow: 0 1px 4px rgba(33,47,69,.1); }
.owner-range > em { padding: 6px 8px; color: #3d4855; background: #fff; border: 1px solid #dfe4e9; border-radius: 5px; font-size: 6px; font-style: normal; white-space: nowrap; }
.owner-range > i { color: #9aa3ad; font-size: 6px; font-style: normal; }
.owner-health-banner { margin-bottom: 10px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; color: #16634a; background: #eaf8f2; border: 1px solid #cceedd; border-radius: 9px; }
.owner-health-banner > span { width: 28px; height: 28px; display: grid; place-items: center; color: #16845f; background: #d5f1e5; border-radius: 8px; font-size: 13px; }
.owner-health-banner div { display: grid; gap: 2px; }
.owner-health-banner strong { font-size: 8px; }
.owner-health-banner p { margin: 0; color: #50806e; font-size: 7px; }
.owner-coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.owner-coverage-card { padding: 11px 13px; background: #fff; border: 1px solid #e2e7ed; border-radius: 9px; }
.owner-coverage-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.owner-coverage-card strong { color: #26313e; font-size: 8px; }
.owner-coverage-card b { padding: 4px 7px; display: flex; align-items: center; gap: 4px; color: #217657; background: #eaf7f1; border-radius: 99px; font-size: 5px; }
.owner-coverage-card b i { width: 5px; height: 5px; background: #25a474; border-radius: 50%; }
.owner-coverage-card p { margin: 7px 0 0; color: #7d8894; font-size: 6px; line-height: 1.4; }
.owner-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.owner-kpi-card { padding: 12px; background: #fff; border: 1px solid #e2e7ed; border-radius: 9px; }
.owner-kpi-card > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.owner-kpi-card > div > span { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; border-radius: 7px; font-size: 11px; }
.owner-kpi-card span.emerald { background: #43b982; }.owner-kpi-card span.blue { background: #4b7ee0; }.owner-kpi-card span.violet { background: #9b60df; }.owner-kpi-card span.amber { background: #e6a23d; }.owner-kpi-card span.rose { background: #df5871; }.owner-kpi-card span.cyan { background: #46abc0; }
.owner-kpi-card > div small { min-width: 0; overflow: hidden; padding: 3px 5px; color: #4a6ba9; background: #eef3fb; border-radius: 4px; font-size: 5px; white-space: nowrap; text-overflow: ellipsis; }
.owner-kpi-card > strong { margin-top: 9px; display: block; color: #17212d; font-size: 16px; }
.owner-kpi-card > p { margin: 2px 0 0; color: #76818d; font-size: 7px; }
.owner-marketing { padding: 13px 15px; background: linear-gradient(100deg, #f1f4ff, #faf7ff); border: 1px solid #dbe1f7; border-radius: 10px; }
.owner-marketing-heading { display: flex; align-items: center; gap: 9px; }
.owner-marketing-heading > span { width: 28px; height: 28px; display: grid; place-items: center; color: #5d5fbc; background: #e3e6fb; border-radius: 7px; }
.owner-marketing-heading > div { min-width: 0; display: grid; gap: 2px; }
.owner-marketing-heading h2 { margin: 0; color: #292b66; font-size: 10px; }
.owner-marketing-heading p { margin: 0; color: #777ca5; font-size: 6px; }
.owner-marketing-heading button, .owner-panel-heading button { margin-left: auto; padding: 6px 8px; color: #57607a; background: rgba(255,255,255,.75); border: 1px solid #d8ddeb; border-radius: 5px; font: inherit; font-size: 6px; font-weight: 700; white-space: nowrap; }
.owner-marketing-metrics { margin-top: 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.owner-marketing-metrics span { display: grid; gap: 2px; }
.owner-marketing-metrics strong { color: #222c39; font-size: 15px; }
.owner-marketing-metrics small { color: #767f8b; font-size: 6px; }
.owner-utilization { height: 5px; margin-top: 9px; overflow: hidden; background: #dfe3fa; border-radius: 99px; }
.owner-utilization i { height: 100%; display: block; background: #716fd0; border-radius: inherit; }
.owner-marketing > small { margin-top: 4px; display: block; color: #777cab; font-size: 5px; }
.owner-main-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr); gap: 12px; }
.owner-traffic-panel, .owner-conversion-panel { padding: 14px 15px; background: #fff; border: 1px solid #e2e7ed; border-radius: 10px; }
.owner-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.owner-panel-heading h2 { margin: 0; color: #17212d; font-size: 12px; }
.owner-panel-heading p { margin: 3px 0 0; color: #8a949e; font-size: 6px; }
.owner-panel-heading > div:last-child { display: flex; align-items: center; gap: 8px; color: #6d7884; font-size: 5px; }
.owner-panel-heading > div:last-child b { color: #242d38; }
.owner-traffic-chart { height: 172px; margin-top: 13px; padding: 12px 6px 0; display: flex; align-items: flex-end; gap: 6px; background: repeating-linear-gradient(to bottom, #eef1f4 0, #eef1f4 1px, transparent 1px, transparent 42px); border-bottom: 1px solid #dfe4e9; }
.owner-traffic-column { height: 100%; min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.owner-traffic-column i { width: min(22px, 76%); min-height: 4px; display: block; background: #3969df; border-radius: 3px 3px 0 0; }
.owner-traffic-column small { height: 14px; color: #929ca7; font-size: 5px; white-space: nowrap; }
.owner-conversion-rate { padding: 12px 0 9px; display: grid; justify-items: center; gap: 3px; text-align: center; }
.owner-conversion-rate strong { color: #37a3b6; font-size: 27px; }
.owner-conversion-rate span { color: #687480; font-size: 7px; }
.owner-conversion-rate small { color: #18906a; font-size: 5px; }
.owner-conversion-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.owner-conversion-totals span { padding: 8px; display: grid; justify-items: center; gap: 2px; background: #f7f9fb; border-radius: 7px; }
.owner-conversion-totals strong { color: #24303c; font-size: 8px; }
.owner-conversion-totals small { color: #85909b; font-size: 5px; }
.owner-location-list { margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf0f3; }
.owner-location-list > p { margin: 0 0 6px; color: #78838f; font-size: 6px; font-weight: 700; }
.owner-location-row { padding: 7px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border-bottom: 1px solid #f0f2f4; }
.owner-location-row:last-child { border-bottom: 0; }
.owner-location-row > div { min-width: 0; display: grid; gap: 2px; }
.owner-location-row strong { color: #2d3743; font-size: 7px; }
.owner-location-row small { overflow: hidden; color: #9099a3; font-size: 5px; white-space: nowrap; text-overflow: ellipsis; }
.owner-location-row > span { color: #89939e; font-size: 5px; white-space: nowrap; }
.owner-location-row > b { color: #16855f; font-size: 8px; }
.owner-location-row.watch > b { color: #c0791f; }
.owner-story .guide-target.is-active { border-color: rgba(62,111,210,.72); box-shadow: 0 0 0 3px rgba(62,111,210,.13), 0 12px 28px rgba(30,68,132,.1); }
.owner-story .guide-target.is-active::after { background: #3f70d2; }
.owner-insight { background: #eef3fc; border-left-color: #3f70d2; }
.owner-insight span { color: #355fae; }

/* Budget walkthrough */
.budget-story .dashboard { display: grid; gap: 14px; }
.budget-frame, .budget-sheet-panel, .budget-level-panel, .budget-builder-strip, .budget-draft-panel { min-width: 0; background: #fff; border: 1px solid #e2e7ed; border-radius: 9px; box-shadow: 0 2px 8px rgba(30,43,66,.025); }
.budget-frame { overflow: hidden; }
.budget-heading { padding: 17px 18px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.budget-heading p, .budget-sheet-heading p, .budget-panel-heading p, .budget-builder-title p { margin: 0 0 5px; color: #4d72bb; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.budget-heading h1 { margin: 0 0 5px; color: #131c28; font-size: 20px; letter-spacing: -.025em; }
.budget-heading > div:first-child > span, .budget-sheet-heading > div:first-child > span, .budget-panel-heading > div:first-child > span { color: #6e7985; font-size: 7px; line-height: 1.5; }
.budget-filters { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.budget-filters button, .budget-sheet-heading button, .budget-builder-title button { padding: 8px 10px; color: #4a5664; background: #fff; border: 1px solid #dce2e8; border-radius: 6px; font: inherit; font-size: 7px; font-weight: 700; }
.budget-filters button:last-child, .budget-sheet-heading button:first-child { color: #fff; background: #3f6ec2; border-color: #3f6ec2; }
.budget-datebar { padding: 10px 18px; display: flex; align-items: center; gap: 12px; background: #f7f9fb; border-top: 1px solid #e7ebef; }
.budget-datebar > span { display: grid; gap: 2px; }
.budget-datebar small { color: #84909c; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.budget-datebar strong { color: #35404d; font-size: 7px; }
.budget-datebar > i { width: 1px; height: 26px; background: #dfe4e9; }
.budget-datebar > em { margin-left: auto; padding: 5px 8px; color: #5675b5; background: #eaf0fb; border-radius: 99px; font-size: 6px; font-style: normal; font-weight: 700; }
.budget-sheet-panel { overflow: hidden; }
.budget-sheet-heading { padding: 15px 16px 11px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.budget-sheet-heading h2, .budget-panel-heading h2, .budget-builder-title h2 { margin: 0 0 4px; color: #17212d; font-size: 13px; }
.budget-sheet-heading > div:last-child { display: flex; gap: 7px; }
.budget-sheet-tabs { padding: 0 16px; display: flex; gap: 20px; border-bottom: 1px solid #e7ebef; }
.budget-sheet-tabs > * { padding: 9px 1px 8px; color: #76818d; font-size: 7px; font-weight: 700; font-style: normal; }
.budget-sheet-tabs b { color: #3966b4; border-bottom: 2px solid #396bc0; }
.budget-sheet-tabs i { padding: 2px 5px; color: inherit; background: #eef2f7; border-radius: 99px; font-size: 5px; font-style: normal; }
.budget-sheet-totalbar { padding: 13px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; background: #fbfcfd; }
.budget-total { min-width: 0; padding-left: 11px; display: grid; gap: 4px; border-left: 3px solid #5279c7; }
.budget-total.slate { border-left-color: #83909d; }
.budget-total.green { border-left-color: #1d9a70; }
.budget-total.violet { border-left-color: #7165bf; }
.budget-total.amber { border-left-color: #d09335; }
.budget-total small { color: #77828e; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.budget-total strong { color: #1b2632; font-size: 15px; }
.budget-level-panel, .budget-draft-panel { overflow: hidden; }
.budget-panel-heading { padding: 14px 16px 11px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.budget-panel-heading > b { padding: 6px 8px; color: #617083; background: #f1f4f7; border-radius: 5px; font-size: 6px; white-space: nowrap; }
.budget-level-summary { margin: 0 16px 11px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid #e3e8ed; border-radius: 7px; }
.budget-level-summary span { padding: 9px 10px; display: grid; gap: 3px; background: #f9fafc; border-right: 1px solid #e3e8ed; }
.budget-level-summary span:last-child { border-right: 0; }
.budget-level-summary small { color: #84909c; font-size: 5px; text-transform: uppercase; }
.budget-level-summary strong { color: #26313d; font-size: 10px; }
.budget-level-table, .budget-draft-table { width: 100%; overflow-x: auto; }
.budget-level-head, .budget-level-row { min-width: 780px; display: grid; grid-template-columns: minmax(175px, 1.25fr) repeat(4, minmax(105px, .8fr)); align-items: center; gap: 10px; }
.budget-level-head { padding: 8px 14px; color: #798590; background: #f2f5f8; border-top: 1px solid #e6eaee; border-bottom: 1px solid #e6eaee; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.budget-level-row { padding: 10px 14px; border-bottom: 1px solid #edf0f3; }
.budget-level-row:last-child { border-bottom: 0; }
.budget-level-row.is-risk { background: #fffaf2; box-shadow: inset 3px 0 #d4932e; }
.budget-level-row > div { min-width: 0; display: grid; gap: 3px; }
.budget-level-row small { color: #87919c; font-size: 5px; }
.budget-level-row strong { color: #25303c; font-size: 8px; }
.budget-level-row span { color: #697683; font-size: 6px; line-height: 1.35; }
.budget-level-name strong { overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.budget-level-name small { color: #5472ad; }
.budget-otb strong { color: #16815e; font-size: 11px; }
.budget-level-row em { width: max-content; padding: 3px 6px; color: #3d6bba; background: #edf3fd; border-radius: 99px; font-size: 5px; font-style: normal; font-weight: 800; }
.budget-level-row em.risk { color: #9a6517; background: #fff0d3; }
.budget-level-row em.watch { color: #846225; background: #fff6e6; }
.budget-level-row em.open { color: #177052; background: #e9f7f1; }
.budget-builder-strip { overflow: hidden; }
.budget-builder-title { padding: 14px 16px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.budget-builder-title button { color: #fff; background: #3f6ec2; border-color: #3f6ec2; }
.budget-builder-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #e5e9ee; }
.budget-builder-metric { padding: 12px; display: grid; gap: 4px; background: #fafbfd; border-right: 1px solid #e5e9ee; }
.budget-builder-metric:last-child { border-right: 0; }
.budget-builder-metric small { color: #7b8793; font-size: 6px; font-weight: 700; }
.budget-builder-metric strong { color: #26313d; font-size: 14px; }
.budget-builder-metric.is-good { background: #edf8f3; }
.budget-builder-metric.is-good strong { color: #17805e; }
.budget-draft-head, .budget-draft-row { min-width: 730px; display: grid; grid-template-columns: minmax(180px, 1.15fr) repeat(3, minmax(140px, 1fr)); align-items: center; gap: 12px; }
.budget-draft-head { padding: 8px 15px; color: #7a8692; background: #f2f5f8; border-top: 1px solid #e6eaee; border-bottom: 1px solid #e6eaee; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.budget-draft-row { padding: 12px 15px; border-bottom: 1px solid #edf0f3; }
.budget-draft-row > div { min-width: 0; display: grid; gap: 3px; }
.budget-draft-row small { color: #87929d; font-size: 5px; }
.budget-draft-row strong { color: #24303c; font-size: 8px; }
.budget-draft-row span { color: #687582; font-size: 6px; }
.budget-draft-row em { width: max-content; padding: 4px 7px; color: #345fae; background: #edf2fb; border-radius: 5px; font-size: 6px; font-style: normal; font-weight: 800; }
.budget-draft-foot { padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #687582; background: #f9fbfc; font-size: 7px; }
.budget-draft-foot span { display: flex; align-items: center; gap: 6px; }
.budget-draft-foot i { width: 7px; height: 7px; background: #1c936b; border-radius: 50%; }
.budget-draft-foot strong { color: #177052; }
.budget-story .guide-target.is-active { border-color: rgba(61,106,191,.72); box-shadow: 0 0 0 3px rgba(61,106,191,.13), 0 12px 28px rgba(31,67,128,.1); }
.budget-story .guide-target.is-active::after { background: #3d6abf; }
.budget-insight { background: #eef3fb; border-left-color: #3d6abf; }
.budget-insight span { color: #355dac; }

body.is-product-view .guide-panel {
  position: sticky;
  top: 64px;
  grid-area: guide;
  height: calc(100vh - 64px);
  border-left: 1px solid #e0e5eb;
  box-shadow: -8px 0 28px rgba(25,43,72,.04);
}
body.is-product-view .guide-progress { padding: 20px 22px 17px; }
body.is-product-view .guide-progress > div:first-child { font-size: 8px; }
body.is-product-view .guide-content h2 { font-size: 25px; }
body.is-product-view .guide-target.is-active { box-shadow: 0 0 0 3px rgba(63,111,218,.13), 0 12px 28px rgba(28,69,135,.09); }
body.is-product-view .guide-target.is-active::after { top: -10px; right: 12px; padding: 4px 7px; border-radius: 5px; font-size: 6px; }

/* Live-faithful Traffic walkthrough */
.traffic-story .dashboard { display: block; }
.traffic-story .live-traffic-title { min-height: 54px; }
.traffic-story .live-traffic-title > div:first-child { max-width: 660px; }
.traffic-story .live-traffic-title h1 { font-size: 28px; }
.traffic-breakdown-controls { display: flex; align-items: center; gap: 9px; }
.traffic-breakdown-controls > button { padding: 10px 12px; color: #525b67; background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.data-source-control { padding: 4px; display: flex; gap: 2px; color: #7b8490; background: #f1f3f6; border-radius: 8px; }
.data-source-control b, .data-source-control i { padding: 8px 10px; border-radius: 6px; font-size: 9px; font-style: normal; white-space: nowrap; }
.data-source-control b { color: #232a33; background: #fff; box-shadow: 0 2px 7px rgba(20,35,61,.08); }
.traffic-sync-strip { min-height: 42px; margin-bottom: 18px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #28735e; background: #effaf6; border: 1px solid #e0f3eb; border-radius: 5px; font-size: 9px; }
.traffic-sync-strip small { color: #6d8d83; font-size: 8px; }
.traffic-breakdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.traffic-breakdown-card { min-height: 118px; padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e5e8ed; border-radius: 10px; box-shadow: 0 2px 7px rgba(31,42,64,.025); }
.traffic-breakdown-card > div { min-width: 0; display: grid; gap: 5px; }
.traffic-breakdown-card p { margin: 0; color: #636d79; font-size: 10px; }
.traffic-breakdown-card strong { overflow: hidden; color: #121923; font-size: 23px; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; text-overflow: ellipsis; }
.traffic-breakdown-card span { color: #929aa5; font-size: 7px; line-height: 1.35; }
.traffic-breakdown-card > i { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; border-radius: 8px; font-size: 20px; font-style: normal; }
.traffic-breakdown-card > i.green { background: #50b991; }.traffic-breakdown-card > i.blue { background: #4b7de4; }.traffic-breakdown-card > i.violet { background: #9b50e0; }.traffic-breakdown-card > i.amber { background: #eba526; }
.traffic-story .live-timeline-panel { min-height: 340px; margin-top: 18px; padding: 22px 24px; }
.live-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.live-panel-heading h2 { margin: 0; color: #151c27; font-size: 15px; }
.live-panel-heading p { margin: 5px 0 0; color: #89929e; font-size: 8px; }
.live-panel-heading > span { padding: 5px 8px; color: #5575ba; background: #f0f4fd; border-radius: 5px; font-size: 7px; font-weight: 750; }
.live-panel-heading > span i { width: 6px; height: 6px; margin-right: 4px; display: inline-block; background: #4f7fe5; border-radius: 50%; }
.live-traffic-chart { height: 245px; margin-top: 22px; background: repeating-linear-gradient(to bottom, #eef1f4 0, #eef1f4 1px, transparent 1px, transparent 58px); border-bottom: 1px solid #e5e9ee; }
.live-traffic-chart svg { width: 100%; height: 100%; overflow: visible; }
.live-traffic-chart text { fill: #8c95a1; font-size: 10px; font-family: Inter, sans-serif; font-weight: 600; }
.traffic-diagnostic-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.traffic-diagnostic-grid > .dashboard-panel { min-height: 275px; padding: 20px; }
.entrance-review-panel .entrance-table { margin-top: 17px; }
.live-dwell-panel .dwell-bars { margin-top: 22px; }
.live-zone-metrics { margin-bottom: 18px; }
.traffic-story .customer-projection { margin-bottom: 18px; padding: 18px 19px; background: linear-gradient(110deg, #f1faf7, #f7fcfa); border: 1px solid #d8eee6; border-radius: 10px; }
.projection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.projection-heading p { margin: 0 0 7px; color: #42826e; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.projection-heading h2 { margin: 0; color: #141c25; font-size: 15px; }
.projection-heading span { max-width: 690px; margin-top: 7px; display: block; color: #616d76; font-size: 8px; line-height: 1.55; }
.projection-heading > b { padding: 6px 9px; color: #3d765f; background: #fff; border-radius: 99px; box-shadow: 0 2px 7px rgba(38,91,70,.07); font-size: 7px; white-space: nowrap; }
.projection-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.projection-grid > span { padding: 12px; display: grid; gap: 6px; background: rgba(255,255,255,.92); border: 1px solid #e3efea; border-radius: 7px; }
.projection-grid small { color: #7b8785; font-size: 6px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.projection-grid strong { color: #121a20; font-size: 13px; }
.traffic-story .traffic-feeds-section { padding: 0; overflow: hidden; }
.traffic-feeds-section > .panel-heading { padding: 18px 19px; border-bottom: 1px solid #e8ebef; }
.traffic-story .feed-card-grid { margin: 0; padding: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.traffic-story .feed-card { border-radius: 9px; }
.traffic-story .feed-thumbnail { aspect-ratio: 16 / 8.8; }
.thumbnail-update { position: absolute; right: 8px; bottom: 8px; z-index: 2; min-height: 30px; padding: 0 10px; color: #1e2731; background: rgba(255,255,255,.96); border: 0; border-radius: 7px; box-shadow: 0 3px 10px rgba(11,22,40,.15); font-size: 7px; font-weight: 800; }
.traffic-story .feed-thumbnail::after { display: none; }
.traffic-story .feed-card-body { padding: 12px 13px 13px; }
.traffic-story .feed-card-heading { font-size: 7px; }
.traffic-story .feed-card-heading b { padding: 5px 7px; font-size: 6px; }
.traffic-story .feed-card h3 { margin-top: 7px; font-size: 12px; }
.traffic-story .feed-card-body > p { font-size: 8px; }
.traffic-story .feed-stat-grid { margin-top: 14px; padding-top: 0; border-top: 0; }
.traffic-story .feed-stat-grid span { padding: 10px; background: #f8f9fb; border-radius: 6px; }
.traffic-story .feed-stat-grid small { font-size: 6px; text-transform: uppercase; }
.traffic-story .feed-stat-grid strong { font-size: 13px; }
.qualified-visits { margin-top: 10px !important; }
.correction-box { margin-top: 11px; padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 7px; color: #31539a; background: #eef3fe; border: 1px solid #e1e9fa; border-radius: 7px; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.correction-box em { min-height: 29px; padding: 0 8px; display: flex; align-items: center; color: #1b2430; background: #fff; border: 1px solid #dbe2ee; border-radius: 5px; font-size: 8px; font-style: normal; text-transform: none; }
.correction-box button { min-height: 29px; padding: 0 10px; color: #fff; background: #4a78df; border: 0; border-radius: 5px; font-size: 7px; font-weight: 800; }
.traffic-story .feed-card-foot { font-size: 6px; }
.feed-view-link { margin-top: 9px; padding-top: 10px; display: flex; justify-content: space-between; color: #2f5caf; border-top: 1px solid #edf0f3; font-size: 7px; font-weight: 800; }
.traffic-story .guide-panel { color: #eef1f8; background: #070b18; border-left-color: #191f31; box-shadow: -12px 0 32px rgba(8,13,27,.16); }
.traffic-story .guide-progress { border-bottom-color: #202638; }
.traffic-story .guide-progress > div:first-child { color: #929bad; }
.traffic-story .guide-progress strong { color: #f2f4fa; }
.traffic-story .progress-dots i { background: #252c40; }
.traffic-story .progress-dots i.filled { background: linear-gradient(90deg, #7554ee, #b04ff0); }
.traffic-guide-brand { padding: 16px 22px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #202638; }
.traffic-guide-brand > i { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #7250ed, #aa45e8); border-radius: 9px; font-style: normal; box-shadow: 0 7px 18px rgba(125,74,235,.28); }
.traffic-guide-brand > div { display: grid; gap: 3px; }
.traffic-guide-brand strong { font-size: 11px; }
.traffic-guide-brand span { color: #858fa2; font-size: 8px; }
.traffic-story .guide-kicker { color: #a88bff !important; }
.traffic-story .guide-content h2 { color: #fff; }
.traffic-story .guide-content > p:not(.guide-kicker) { color: #9ca5b5; }
.traffic-story .insight-card { background: #121829; border-left-color: #865bea; }
.traffic-story .insight-card span { color: #ae91ff; }
.traffic-story .insight-card strong { color: #eef1f7; }
.traffic-story .guide-actions { border-top-color: #202638; }
.traffic-story .secondary-button { color: #b2b9c8; background: #141a2a; border-color: #272e42; }
.traffic-story .primary-button { background: linear-gradient(135deg, #7452ee, #9b49e1); box-shadow: 0 8px 22px rgba(120,73,227,.25); }

@media (max-width: 1280px) {
  body.is-product-view .product-shell { grid-template-columns: 220px minmax(0, 1fr) 320px; }
  .product-topbar { grid-template-columns: 220px minmax(0, 1fr) auto; }
  .product-topbar .product-logo { width: 220px; }
  .product-topbar .product-logo img { width: 180px; }
  .product-topbar .product-nav-item { padding: 0 8px; font-size: 11px; }
  .product-account > div { display: none; }
  body.is-product-view .metric-card { padding: 11px; }
  .feed-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-story .feed-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-breakdown-card > i { width: 37px; height: 37px; }
  .traffic-breakdown-card strong { font-size: 19px; }
  .diamond-filter-label { display: none; }
  .sales-controls { align-items: stretch; }
  .sales-more { margin-left: 0; }
  .predictive-candidate-row { min-width: 760px; }
}

@media (max-width: 920px) {
  body.is-product-view .product-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "topbar" "sidebar" "guide" "workspace";
  }
  .product-topbar { position: static; min-height: 62px; grid-template-columns: 1fr auto; }
  .product-topbar .product-logo { width: auto; grid-column: 1; grid-row: 1; border-right: 0; }
  .product-topbar > nav { grid-column: 1 / -1; grid-row: 2; padding: 6px 10px 9px; justify-content: flex-start; overflow-x: auto; border-top: 1px solid #edf0f3; }
  .product-topbar .product-nav-item span { display: inline; }
  .product-account { width: auto; grid-column: 2; grid-row: 1; border-left: 0; }
  .notification-icon { display: none; }
  body.is-product-view .product-sidebar { position: static; width: 100%; height: auto; padding: 7px 10px; display: block; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e4e7ec; }
  body.is-product-view .product-sidebar > nav { display: flex; min-width: max-content; }
  .context-nav-item { width: auto; min-width: max-content; padding: 0 11px; grid-template-columns: 20px auto auto; }
  body.is-product-view .sidebar-bottom { display: none; }
  body.is-product-view .guide-panel { position: static; height: auto; min-height: 0; border-left: 0; border-top: 1px solid #e0e5eb; border-bottom: 1px solid #e0e5eb; box-shadow: 0 10px 28px rgba(25,43,72,.05); }
  body.is-product-view .guide-actions { position: static; }
  body.is-product-view .metric-grid, body.is-product-view .marketing-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .traffic-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-breakdown-controls { flex-wrap: wrap; justify-content: flex-end; }
  .traffic-diagnostic-grid { grid-template-columns: 1fr; }
  .projection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-filterbar { justify-content: flex-start; overflow-x: auto; }
  .diamond-filter-row { overflow-x: auto; }
  .diamond-matrix-title { align-items: flex-start; }
  .diamond-matrix-title > div:last-child { overflow-x: auto; }
  .sales-operating { align-items: flex-start; flex-direction: column; }
  .sales-total-row { justify-content: flex-start; }
  .sales-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .predictive-powerhouse-hero { grid-template-columns: auto 1fr; }
  .predictive-powerhouse-hero > b { grid-column: 2; justify-self: start; }
  .predictive-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-title-row { grid-template-columns: 1fr; }
  .owner-range { justify-content: flex-start; }
  .owner-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-main-grid { grid-template-columns: 1fr; }
  .bill-stage { min-height: 760px; }
  .budget-heading { flex-direction: column; }
  .budget-filters { justify-content: flex-start; }
  .budget-builder-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .budget-builder-metric:nth-child(3) { border-right: 0; }
  .budget-builder-metric:nth-child(-n+3) { border-bottom: 1px solid #e5e9ee; }
}

@media (max-width: 640px) {
  .product-topbar .product-logo img { width: 166px; }
  .product-account { padding-right: 10px; }
  .product-account > i { display: none; }
  .product-account .tour-exit { min-height: 42px; }
  .product-topbar .product-nav-item, .context-nav-item { min-height: 44px; }
  body.is-product-view .guide-panel { padding-bottom: 76px; }
  body.is-product-view .guide-progress { padding: 14px 18px 12px; }
  body.is-product-view .guide-content { padding: 20px 18px 22px; overflow: visible; }
  body.is-product-view .guide-kicker { margin-bottom: 11px !important; }
  body.is-product-view .guide-content h2 { font-size: 22px; }
  body.is-product-view .guide-content > p:not(.guide-kicker) { margin-top: 13px; font-size: 12px; line-height: 1.58; }
  body.is-product-view .insight-card { margin-top: 16px; padding: 14px; gap: 7px; }
  body.is-product-view .guide-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid #dfe5ed;
    box-shadow: 0 -10px 30px rgba(19,37,66,.12);
    backdrop-filter: blur(14px);
  }
  body.is-product-view .product-workspace { padding-bottom: 76px; }
  .traffic-guide-brand { padding: 12px 18px; }
  .traffic-story .guide-actions { background: rgba(7,11,24,.96); border-top-color: #202638; }
  body.is-product-view .dashboard { padding: 20px 12px 28px; }
  body.is-product-view .dashboard-title { align-items: flex-start; }
  .dashboard-controls { display: none; }
  .traffic-breakdown-controls { display: none; }
  .traffic-sync-strip { align-items: flex-start; flex-direction: column; padding: 11px 13px; }
  .traffic-breakdown-grid { grid-template-columns: 1fr; }
  .traffic-story .live-timeline-panel { min-height: 280px; padding: 17px 14px; }
  .live-traffic-chart { height: 190px; }
  .projection-heading { display: grid; }
  .projection-heading > b { width: max-content; }
  .projection-grid { grid-template-columns: 1fr; }
  body.is-product-view .metric-grid, body.is-product-view .marketing-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-card-grid, .traffic-story .feed-card-grid { grid-template-columns: 1fr; gap: 8px; }
  .feed-filter { display: none; }
  .month-strip { padding-left: 5px; padding-right: 5px; overflow-x: auto; grid-template-columns: repeat(12, minmax(36px, 1fr)); }
  body.is-product-view .marketing-coverage { grid-template-columns: 1fr; }
  .diamond-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diamond-story .dashboard { grid-template-columns: minmax(0, 1fr); }
  .diamond-title { display: grid; }
  .diamond-auto-badge { width: max-content; max-width: 100%; white-space: normal; }
  .diamond-mix-grid { grid-template-columns: 1fr; }
  .diamond-search { min-width: 230px; }
  .diamond-range-filters { grid-template-columns: 1fr 1fr; }
  .diamond-matrix-title { display: grid; }
  .matrix-kpis { grid-template-columns: 1fr 1fr; }
  .diamond-decision { grid-template-columns: auto 1fr; }
  .diamond-decision > div:last-child { grid-column: 2; justify-items: start; }
  .sales-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .sales-controls > * { min-width: 0; }
  .sales-date, .sales-view-tabs { grid-column: 1 / -1; }
  .sales-view-tabs { overflow-x: auto; }
  .sales-more { margin-left: 0; }
  .sales-panel-heading { align-items: flex-start; }
  .sales-panel-heading > div:last-child { flex-direction: column; align-items: flex-end; }
  .sales-level-grid { grid-template-columns: 1fr; }
  .sales-decision { grid-template-columns: auto 1fr; }
  .sales-decision > div:last-child { grid-column: 2; justify-items: start; }
  .inventory-action-title { display: grid; }
  .inventory-action-title > b { width: max-content; }
  .inventory-action-foot { display: grid; }
  .predictive-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .predictive-filter-panel { grid-template-columns: 1fr 1fr; }
  .predictive-analysis-grid { grid-template-columns: 1fr; }
  .predictive-decision { grid-template-columns: auto 1fr; }
  .predictive-decision > div:last-child { grid-column: 2; justify-items: start; }
  .owner-status-pills { align-items: flex-start; flex-direction: column; }
  .owner-range { overflow-x: auto; flex-wrap: nowrap; }
  .owner-coverage-grid { grid-template-columns: 1fr; }
  .owner-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-marketing-heading { align-items: flex-start; }
  .owner-marketing-heading button { margin-left: 0; }
  .owner-marketing-heading { flex-wrap: wrap; }
  .owner-traffic-chart { gap: 3px; }
  .owner-traffic-column small { font-size: 4px; }
  .bill-dashboard-ghost { display: none; }
  .bill-drawer { width: 100%; border-left: 0; }
  .bill-empty-state { padding-left: 20px; padding-right: 20px; }
  .bill-confirmation { margin-left: 0; }
  .bill-message > div { max-width: 88%; }
  .budget-heading, .budget-sheet-heading, .budget-panel-heading, .budget-builder-title { display: grid; }
  .budget-filters { overflow-x: auto; flex-wrap: nowrap; }
  .budget-filters button { white-space: nowrap; }
  .budget-datebar { align-items: flex-start; flex-wrap: wrap; }
  .budget-datebar > em { margin-left: 0; }
  .budget-sheet-heading > div:last-child { flex-wrap: wrap; }
  .budget-sheet-tabs { overflow-x: auto; }
  .budget-sheet-totalbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-total:last-child { grid-column: 1 / -1; }
  .budget-level-summary { grid-template-columns: 1fr 1fr; }
  .budget-level-summary span:nth-child(2) { border-right: 0; }
  .budget-level-summary span:nth-child(-n+2) { border-bottom: 1px solid #e3e8ed; }
  .budget-builder-metrics { grid-template-columns: 1fr 1fr; }
  .budget-builder-metric:nth-child(odd) { border-right: 1px solid #e5e9ee; }
  .budget-builder-metric:nth-child(even) { border-right: 0; }
  .budget-builder-metric:nth-child(-n+4) { border-bottom: 1px solid #e5e9ee; }
  .budget-draft-foot { display: grid; }
}