.wrap{width:min(100% - 48px,1194px);margin-inline:auto}
.demo-intro{padding:76px 0 36px}
.demo-intro h1{font-size:clamp(39px,5vw,65px);line-height:1.1;letter-spacing:-.055em;max-width:790px;margin:0 0 18px}
.demo-intro>p:not(.eyebrow){font-size:16px;line-height:1.7;color:#56657a;max-width:740px;margin:0 0 25px}
.demo-status{display:inline-block;background:#edf3ff;border:1px solid #dce6f5;border-radius:7px;padding:12px 16px;color:#4d5f7b;font-size:12px;line-height:1.6}
.demo-status strong{color:#213e7e}
.demo-selector{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.demo-selector button{background:#fff;border:1px solid #dce5f2;border-radius:8px;text-align:left;padding:22px 25px;cursor:pointer;color:#172238}
.demo-selector button[aria-selected=true]{border:2px solid #2b5ed1;padding:21px 24px;box-shadow:0 8px 25px #234b9312;background:#f9fbff}
.demo-selector button:hover{border-color:#8ba9ea}
.demo-selector button span{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;color:#3361ca;margin-bottom:12px}
.demo-selector button strong{display:block;font-size:20px;letter-spacing:-.035em;margin-bottom:6px}
.demo-selector button small{display:block;font-size:12px;line-height:1.55;color:#67768b}
.demo-frame{margin-bottom:72px}
.workspace{display:grid;grid-template-columns:238px minmax(0,1fr);border:1px solid #d8e2f0;background:#fff;border-radius:11px;box-shadow:0 20px 45px #183d8310;min-height:585px;overflow:hidden}
.workspace[hidden],.workspace-screen[hidden]{display:none}
.workspace-nav{background:#f5f8fd;border-right:1px solid #dce5f1;padding:27px 19px;display:flex;flex-direction:column}
.workspace-nav>p{font-size:9px;letter-spacing:.15em;font-weight:800;color:#4269bf;margin:0 0 11px}
.workspace-nav h2{font-size:19px;letter-spacing:-.035em;margin:0 0 9px}
.workspace-label{align-self:flex-start;background:#e7efff;border-radius:99px;padding:6px 9px;color:#2f5bbd;font-size:10px;font-weight:800}
.workspace-nav nav{display:grid;gap:3px;margin:33px 0}
.workspace-nav nav button{border:0;background:transparent;color:#50627d;text-align:left;padding:11px 12px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:700}
.workspace-nav nav button:hover{background:#e8effb;color:#234eaa}
.workspace-nav nav button.is-active{background:#e0eafe;color:#204cae}
.workspace-nav>small{margin-top:auto;color:#8390a3;font-size:10px}
.workspace-content{min-width:0}
.workspace-bar{height:62px;border-bottom:1px solid #e4eaf4;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 34px;color:#566a89;font-size:10px;letter-spacing:.12em;font-weight:800}
.workspace-bar b{margin:0 8px;color:#b6c4d8}
.workspace-badge{background:#eaf2ff;color:#315cbb;border-radius:99px;padding:7px 9px;font-size:9px;letter-spacing:.08em;white-space:nowrap}
.workspace-badge.beta{background:#e5f3f3;color:#176771}
.workspace-screen{padding:36px 42px 45px}
.workspace-screen h2{font-size:clamp(27px,3vw,38px);line-height:1.18;letter-spacing:-.045em;margin:0 0 13px}
.screen-lead{color:#5d6e85;font-size:14px;line-height:1.7;max-width:720px;margin:0 0 31px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.summary-grid article{border:1px solid #dfe6f0;background:#f9fbfe;border-radius:7px;padding:22px;min-height:205px}
.summary-grid article span,.stage-list span{color:#315fc8;font-size:10px;font-weight:800;letter-spacing:.1em}
.summary-grid h3{font-size:15px;line-height:1.35;letter-spacing:-.02em;margin:29px 0 8px}
.summary-grid p,.stage-list p{font-size:12px;line-height:1.6;color:#67768b;margin:0}
.next-panel{border-left:3px solid #aac4fa;background:#f1f6ff;padding:18px 21px;margin-top:25px}
.next-panel strong{font-size:12px;color:#274e9b}
.next-panel p{font-size:12px;line-height:1.6;color:#536780;margin:6px 0 0}
.detail-list{border-top:1px solid #dfe6f0}
.detail-list>div{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid #dfe6f0}
.detail-list strong,.comparison-row strong{font-size:13px}
.detail-list span,.comparison-row span{color:#64758a;font-size:13px;line-height:1.5}
.comparison-head,.comparison-row{display:grid;grid-template-columns:190px 1fr;gap:18px;border-bottom:1px solid #dfe6f0;padding:17px 0}
.comparison-head{border-top:1px solid #dfe6f0;color:#4268be;font-size:9px;letter-spacing:.12em;font-weight:800}
.stage-list{display:grid;gap:10px}
.stage-list>div{display:grid;grid-template-columns:30px 160px 1fr;gap:15px;align-items:baseline;border:1px solid #dfe6f0;border-radius:7px;padding:18px}
.stage-list strong{font-size:13px}
.demo-next{border-top:1px solid #dce5f0;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:52px 0 70px}
.demo-next h2{font-size:clamp(27px,3vw,37px);letter-spacing:-.045em;margin:0 0 10px}
.demo-next p:not(.eyebrow){color:#65738a;font-size:13px;line-height:1.6;max-width:620px;margin:0}
.demo-next>div:last-child{display:grid;gap:9px;min-width:230px}
.demo-next a{display:flex;justify-content:space-between;gap:15px;text-decoration:none;padding:13px 15px;border:1px solid #d8e2f0;color:#2754b6;border-radius:6px;font-size:12px;font-weight:800}
.demo-next a:hover{background:#f1f5ff}
.approval-demo{margin-top:26px;border:1px solid #b9cbed;background:#f6f9ff;border-radius:8px;padding:22px}
.approval-demo>span{display:block;color:#315fc8;font-size:9px;letter-spacing:.13em;font-weight:800;margin-bottom:10px}
.approval-demo>strong{display:block;font-size:15px}
.approval-demo>p{font-size:12px;color:#425a7d;line-height:1.6;margin:8px 0 16px}
.approval-demo>div{display:flex;gap:8px;flex-wrap:wrap}
.approval-demo button{background:#2b5ed1;color:#fff;border:1px solid #2b5ed1;padding:9px 12px;border-radius:5px;font-size:11px;font-weight:800;cursor:pointer}
.approval-demo button[data-approval-action=decline],.approval-demo button[data-approval-action=reset]{background:#fff;color:#2a55ac;border-color:#cad8ef}
.approval-demo button:hover{filter:brightness(.95)}
.approval-demo>small{display:block;color:#7888a1;font-size:10px;margin-top:14px}
.demo-intro{position:relative;isolation:isolate;overflow:hidden;margin-top:25px;padding:68px clamp(25px,5vw,68px) 56px;border-radius:10px;background:linear-gradient(125deg,#0b214b,#143d86 68%,#235ecb);color:#fff}
.demo-intro::before{content:"";position:absolute;z-index:-1;inset:0;background:url('/workspace-preview/pattern-concentric-lozenges.svg') center / cover no-repeat;pointer-events:none}
.demo-intro .eyebrow{color:#aec8ff}
.demo-intro>p:not(.eyebrow){color:#d7e5ff}
.demo-status{background:#ffffff14;border-color:#ffffff3d;color:#d9e5fb}
.demo-status strong{color:#fff}
.demo-selector{margin-top:18px}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.workspace-nav{border-right:0;border-bottom:1px solid #dce5f1}.workspace-nav nav{display:flex;overflow:auto;gap:5px;margin:20px 0 0}.workspace-nav nav button{white-space:nowrap}.workspace-nav>small{display:none}.summary-grid{grid-template-columns:1fr}.summary-grid article{min-height:0}.summary-grid h3{margin-top:12px}}
@media(max-width:620px){.wrap{width:min(100% - 32px,1194px)}.demo-intro{padding:53px 0 29px}.demo-intro h1{font-size:40px}.demo-selector{grid-template-columns:1fr}.workspace-bar{padding:0 20px}.workspace-screen{padding:28px 20px 34px}.detail-list>div,.comparison-head,.comparison-row{grid-template-columns:1fr;gap:6px}.stage-list>div{grid-template-columns:26px 1fr;gap:7px}.stage-list p{grid-column:2}.demo-next{display:block;padding:42px 0 57px}.demo-next>div:last-child{margin-top:22px}}
@media(max-width:620px){.demo-intro{padding:47px 22px 34px}}

/* Three quiet geometric treatments: concentric rings, parallel lines and diamonds. */

.workspace-section-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:115px;padding:24px 42px;background:linear-gradient(105deg,#102b61,#18418f);color:#fff}
.workspace-section-banner::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none}
.workspace-section-banner.pattern-lines::before{background:url('/workspace-preview/pattern-lines.svg') center / cover no-repeat}
.workspace-section-banner.pattern-diamonds::before{background:url('/workspace-preview/pattern-diamonds.svg') center / cover no-repeat}
.workspace-section-banner>span{font-size:9px;letter-spacing:.16em;font-weight:800;color:#bfd4ff;margin-bottom:8px}
.workspace-section-banner>strong{font-size:clamp(17px,2vw,23px);line-height:1.25;font-weight:700;letter-spacing:-.03em;max-width:570px}
.case-banner{background:#f0f5ff;border:1px solid #d8e4fa;border-radius:8px;padding:19px 22px;margin:0 0 21px}
.case-banner>span{display:block;font-size:9px;color:#2d5cc1;letter-spacing:.13em;font-weight:800;margin-bottom:7px}
.case-banner>strong{display:block;color:#1c3157;font-size:16px;line-height:1.4}
.case-banner>p{font-size:12px;line-height:1.6;color:#5e708b;margin:7px 0 0}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:22px}
.metric-grid>div{border:1px solid #dce6f4;border-radius:7px;padding:15px;background:#fff;min-width:0}
.metric-grid span,.conversation-grid span{display:block;color:#647793;font-size:10px;font-weight:700;line-height:1.4}
.metric-grid strong{display:block;color:#234b99;font-size:22px;letter-spacing:-.04em;margin-top:8px}
.conversation-card{border:1px solid #cedbf1;border-radius:8px;background:#fff;overflow:hidden;margin:0 0 20px}
.conversation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;border-bottom:1px solid #e0e8f4}
.conversation-head span:first-child{font-size:9px;color:#3260be;letter-spacing:.1em;font-weight:800}
.conversation-head h3{font-size:18px;margin:7px 0 0;letter-spacing:-.03em}
.conversation-state{background:#e6f2f3;color:#176771;border-radius:99px;padding:7px 10px;font-size:10px;font-weight:800;white-space:nowrap}
.conversation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.conversation-grid>div{padding:18px 15px;border-right:1px solid #e5ebf5}
.conversation-grid>div:nth-child(4n){border-right:0}.conversation-grid>div:nth-child(-n+4){border-bottom:1px solid #e5ebf5}
.conversation-grid strong{display:block;font-size:15px;line-height:1.3;color:#243d69;margin:8px 0 5px}
.conversation-grid small{color:#75859a;font-size:10px;line-height:1.45}
.conversation-bottom{background:#f8faff;border-top:1px solid #e5ebf5;padding:17px 22px}
.conversation-bottom p{font-size:12px;line-height:1.6;color:#51647f;margin:0 0 8px}
.conversation-bottom p:last-child{margin:0}
.conversation-bottom strong{color:#234b99;margin-right:8px}
.stage-list.compact>div{grid-template-columns:24px 100px 1fr;padding:12px 15px}
.stage-list.compact strong{font-size:12px}
@media(max-width:850px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.conversation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.conversation-grid>div:nth-child(2){border-right:0}.conversation-grid>div:nth-child(-n+6){border-bottom:1px solid #e5ebf5}}
@media(max-width:620px){.workspace-section-banner{padding:24px 20px;min-height:100px}.conversation-head{display:block}.conversation-state{display:inline-block;margin-top:12px}.metric-grid strong{font-size:19px}.stage-list.compact>div{grid-template-columns:24px 1fr}.stage-list.compact p{grid-column:2}}

.demo-boundary{display:flex;align-items:center;gap:23px;padding:17px 20px;margin-bottom:18px;border:1px solid #d8e4f6;border-left:3px solid #2b5ed1;border-radius:6px;background:#f4f8ff;color:#52647f;font-size:12px;line-height:1.55}.demo-boundary strong{flex:none;color:#244d9e;font-size:13px}@media(max-width:700px){.demo-boundary{display:block}.demo-boundary strong{display:block;margin-bottom:6px}}

/* Subtle contrast refinements; retain the live site's layout and palette. */
.workspace-nav{background:#f3f5f8}
.workspace-nav nav button.is-active{background:#214b9d;color:#fff}
.summary-grid article{background:#fff}
.case-banner{background:#f7f9fc}
.next-panel{background:#f7f9fc;border-left-color:#2b5ed1}
.demo-boundary{background:#f7f9fc}

/* Hero refinement: deeper RAFT blue with concentric lozenges. */
.demo-intro{background:linear-gradient(125deg,#0b214b 0%,#102f69 68%,#17418a 100%)}

/* Spacing after removal of the single-product selector. */
.demo-intro{margin-bottom:18px}