.commercial-dashboard { padding: 142px 0; background: var(--surface); }
.commercial-dashboard__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 66px; }
.commercial-dashboard__intro h2 { margin: 0; font-size: clamp(50px, 6vw, 94px); line-height: .9; }
.commercial-dashboard__intro h2 em { color: var(--accent); font-style: normal; }
.commercial-dashboard__intro > p { max-width: 490px; margin: 0 0 8px; color: var(--muted); font-size: 18px; line-height: 1.58; }
.signal-board { display: grid; grid-template-columns: 8fr 4fr; overflow: hidden; border: 1px solid var(--line); background: var(--surface-deep); box-shadow: 0 28px 70px var(--card-shadow); }
.signal-board__main { position: relative; min-height: 490px; padding: 28px 34px; color: var(--accent); background: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 30%); }
.signal-board__meta { display: flex; justify-content: space-between; gap: 20px; color: var(--ink); font: 700 11px var(--display-font); letter-spacing: .12em; text-transform: uppercase; }
.signal-board__meta i { color: var(--accent); font-style: normal; }
.signal-board svg { display: block; width: 100%; height: 350px; margin-top: 25px; overflow: visible; }
.signal-board__gridlines path { stroke: color-mix(in srgb, var(--accent) 20%, transparent); stroke-width: 1; }
.signal-board__area { fill: url(#signalFill); }.signal-board__curve { fill: none; stroke: currentColor; stroke-width: 4; }.signal-board circle { fill: var(--surface-deep); stroke: currentColor; stroke-width: 4; }
.signal-board__axis { display: flex; justify-content: space-between; color: var(--dim); font: 600 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.signal-board__side { padding: 31px; border-left: 1px solid var(--line); background: var(--surface); }.signal-board__side > p { margin: 0 0 38px; color: var(--dim); font: 700 11px var(--display-font); letter-spacing: .12em; text-transform: uppercase; }
.signal-board__side > div { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; padding: 20px 0; border-top: 1px solid var(--line); }.signal-board__side span,.signal-board__side em { color: var(--dim); font-size: 12px; font-style: normal; }.signal-board__side strong { color: var(--muted); font-size: 15px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }.signal-board__side b { grid-column: 2; color: var(--ink); font: 700 19px/1.08 var(--display-font); letter-spacing: -.035em; }.signal-board__side em { color: var(--accent); font-weight: 700; }
.commercial-playbook { padding: 142px 0; background: var(--accent); color: var(--accent-ink); }.commercial-playbook__intro { margin-bottom: 62px; }.commercial-playbook__intro .eyebrow { color: var(--accent-ink); opacity: .68; }.commercial-playbook__intro h2 { margin: 0; font-size: clamp(54px, 7vw, 108px); line-height: .84; letter-spacing: -.065em; }.commercial-playbook__intro h2 em { font-style: normal; opacity: .53; }
.playbook-canvas { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; min-height: 620px; border: 1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); background: color-mix(in srgb, var(--accent-ink) 7%, transparent); }.playbook-canvas:before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--accent-ink) 15%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-ink) 15%, transparent) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, black, transparent 84%); }
.playbook-canvas__statement { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 38px; }.playbook-canvas__statement > span { font: 700 11px var(--display-font); letter-spacing: .13em; opacity: .67; }.playbook-canvas__statement > strong { font: 700 clamp(46px, 5.3vw, 82px)/.83 var(--display-font); letter-spacing: -.07em; }.playbook-canvas__statement > strong em { font-style: normal; opacity: .55; }.playbook-canvas__statement > p { max-width: 410px; margin: 0; color: color-mix(in srgb, var(--accent-ink) 76%, transparent); font-size: 16px; line-height: 1.52; }
.playbook-canvas__levers { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 1px; list-style: none; background: color-mix(in srgb, var(--accent-ink) 35%, transparent); }.playbook-canvas__levers li { display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; padding: 26px; background: var(--accent); transition: background .25s, transform .25s; }.playbook-canvas__levers li:hover { z-index: 2; transform: scale(.98); background: color-mix(in srgb, var(--accent-ink) 10%, var(--accent)); }.playbook-canvas__levers li > span { color: color-mix(in srgb, var(--accent-ink) 65%, transparent); font: 700 15px var(--display-font); }.playbook-canvas__levers small { display: block; margin-bottom: 13px; color: color-mix(in srgb, var(--accent-ink) 66%, transparent); font: 700 11px var(--display-font); letter-spacing: .11em; text-transform: uppercase; }.playbook-canvas__levers strong { display: block; max-width: 220px; font: 700 24px/1 var(--display-font); letter-spacing: -.045em; }
.playbook-canvas__seal { position: absolute; z-index: 2; right: calc(50% - 90px); bottom: 33px; display: grid; width: 180px; aspect-ratio: 1; place-items: center; padding: 26px; border: 1px solid color-mix(in srgb, var(--accent-ink) 70%, transparent); border-radius: 50%; text-align: center; background: var(--accent); box-shadow: 0 16px 35px color-mix(in srgb, var(--accent-ink) 18%, transparent); transform: rotate(-10deg); }.playbook-canvas__seal span { font: 700 9px var(--display-font); letter-spacing: .13em; }.playbook-canvas__seal strong { font: 700 28px/.82 var(--display-font); letter-spacing: -.06em; }.playbook-canvas__seal em { font-style: normal; opacity: .55; }
@media (max-width: 800px) { .commercial-dashboard,.commercial-playbook { padding: 92px 0; }.commercial-dashboard__intro { display: block; margin-bottom: 42px; }.commercial-dashboard__intro > p { margin-top: 28px; font-size: 16px; }.signal-board { display: block; }.signal-board__main { min-height: 400px; padding: 20px; }.signal-board svg { height: 270px; }.signal-board__side { border-top: 1px solid var(--line); border-left: 0; padding: 24px 20px; }.signal-board__side > p { margin-bottom: 20px; }.signal-board__side > div { padding: 15px 0; }.commercial-playbook__intro { margin-bottom: 42px; }.playbook-canvas { display: block; min-height: 0; }.playbook-canvas__statement { min-height: 460px; padding: 25px; }.playbook-canvas__levers li { min-height: 180px; padding: 20px; }.playbook-canvas__levers strong { font-size: 20px; }.playbook-canvas__seal { right: calc(50% - 72px); bottom: calc(50% - 72px); width: 144px; padding: 18px; }.playbook-canvas__seal strong { font-size: 23px; } }