.demo-shell{background:#f5f4f8;color:#201b2b}.demo-workspace{max-width:1120px;margin:auto;padding:30px 30px 24px}.demo-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.demo-kicker{font-size:10px;letter-spacing:2px;color:#867397}.demo-top h1{font-size:25px;margin-top:7px}.demo-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.demo-tools button,.demo-paths button{padding:9px 14px;border:1px solid #e1dbe9;border-radius:9px;background:white;font-size:12px}.demo-tools .selected,.demo-paths .selected{background:#5b1dda;color:white;border-color:#5b1dda}.demo-tools span{width:12px}.demo-paths{display:flex;gap:8px;align-items:center;margin:24px 0 16px;flex-wrap:wrap}.demo-paths small{margin-left:8px;font-size:12px}.demo-guide{border:1px solid #e8e0f2;border-radius:16px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;margin-bottom:22px;min-height:125px}.demo-guide #step-tag{font-size:11px;color:#7d6395}.demo-guide h2{font-size:20px;margin:5px 0 7px}.demo-guide p{font-size:13px;max-width:690px;color:#746982}.demo-guide button,.demo-guide a{display:block;padding:10px 14px;border:1px solid #d6c8ea;border-radius:10px;white-space:nowrap;font-size:12px;margin:5px 0;text-align:center}.demo-guide a{background:#5b1dda;color:white}.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.role-panel{min-width:0}.role-heading{display:flex;justify-content:space-between;align-items:center;margin:0 auto 12px;max-width:430px;padding:0 8px;gap:10px}.role-heading h2{font-size:16px}.role-heading p{font-size:11px;color:#81768e;margin-top:5px}.role-heading span{font-size:11px;color:#6b4e91;border-radius:20px;padding:6px 10px;background:#ebe3f6;white-space:nowrap}.role-panel iframe{display:block;width:100%;max-width:430px;height:840px;border:1px solid #e8e3ee;border-radius:23px;background:white;margin:auto;box-shadow:0 8px 28px #33234d08}.demo-workspace footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#92899c;margin-top:24px;line-height:1.8}.role-panel.next iframe{box-shadow:0 0 0 2px #baa4e8,0 8px 28px #33234d08}.demo-shell .sheet p{font-size:13px}.demo-shell .sheet h2{margin-right:25px}@media(max-width:760px){.demo-workspace{padding:18px 12px}.demo-top{display:block}.demo-tools{margin-top:15px}.demo-guide{padding:16px;align-items:flex-start;flex-direction:column;gap:7px}.dual-grid{gap:12px}.role-heading{padding:0;display:block;min-height:76px}.role-heading span{display:inline-block;margin-top:7px}.role-panel iframe{height:750px;border-radius:15px}.demo-workspace footer{display:block}}@media(max-width:580px){.dual-grid{grid-template-columns:1fr}.role-panel iframe{height:760px}.role-heading{min-height:0;display:flex}.role-panel{margin-bottom:18px}}

/* Readable guidance outside the embedded product screens. */
.demo-workspace{max-width:1240px}.demo-kicker{font-size:14px;letter-spacing:1.5px}.demo-top h1{font-size:30px;line-height:1.3}.demo-tools button,.demo-tools a,.demo-paths button{font-size:17px;line-height:1.4;min-height:46px;padding:10px 16px}.demo-tools a{background:white;border:1px solid #e1dbe9;border-radius:9px}.demo-paths small{font-size:17px;line-height:1.65;flex-basis:100%;margin:6px 0 0;color:#655970}.demo-guide{align-items:flex-start}.demo-guide #step-tag{font-size:16px}.demo-guide h2{font-size:25px;line-height:1.4}.demo-guide p{font-size:18px;line-height:1.8;color:#54495f;max-width:800px}.demo-guide button,.demo-guide a{font-size:17px;line-height:1.5;white-space:normal;min-width:175px}.role-heading{max-width:460px;align-items:flex-start}.role-heading h2{font-size:21px;line-height:1.5}.role-heading p{font-size:17px;line-height:1.6;color:#655970}.role-heading span{font-size:16px;white-space:normal;min-width:86px;text-align:center}.demo-workspace footer{font-size:17px;color:#655970}.demo-shell .sheet p{font-size:18px;line-height:1.8}.demo-shell .sheet button{font-size:17px;min-height:46px}.demo-shell .sheet h2{font-size:25px}
.intro{max-width:1040px;margin:auto;padding:40px 28px 60px;font-size:18px;line-height:1.8}.intro h1{font-size:36px;line-height:1.35;margin:22px 0 14px}.intro h2{font-size:25px;line-height:1.4;margin-bottom:14px}.intro h3{font-size:20px;margin-bottom:6px}.intro p{margin:10px 0;color:#54495f}.intro section{background:white;border:1px solid #e1dbe9;border-radius:16px;padding:26px;margin-top:22px}.intro ol,.intro ul{padding-left:26px}.intro li{margin:12px 0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.intro .start-link{display:inline-block;background:#5b1dda;color:white;border-radius:10px;padding:13px 22px;font-size:19px;margin-top:16px}.intro .notice{font-size:18px;line-height:1.8}.intro .demo-tools{justify-content:flex-end}.intro .muted{color:#655970}
@media(max-width:760px){.demo-top h1{font-size:27px}.demo-guide h2{font-size:23px}.demo-guide p{font-size:18px}.demo-tools{gap:8px}.intro{padding:24px 16px 40px}.intro h1{font-size:29px}.intro section{padding:20px}.intro-grid{grid-template-columns:1fr;gap:16px}.role-heading{flex-wrap:wrap}.demo-workspace footer a{display:block;margin-top:12px}}

/* Four-page onboarding and presentation-scale external controls. */
.demo-tools button,.demo-tools a,.demo-paths button{font-size:22px;padding:12px 20px;min-height:54px}.demo-top{flex-wrap:wrap}.demo-paths{gap:14px;margin-top:30px}.demo-paths small{font-size:22px;line-height:1.7;margin-top:10px}.demo-guide{padding:28px;gap:24px}.demo-guide #step-tag{font-size:21px}.demo-guide h2{font-size:30px;margin:8px 0 14px}.demo-guide p{font-size:24px;line-height:1.75;max-width:850px}.demo-guide button,.demo-guide a{font-size:21px;padding:14px 18px}.role-heading{max-width:480px;flex-wrap:wrap;gap:12px;margin-bottom:18px}.role-heading h2{font-size:25px}.role-heading p{font-size:22px;line-height:1.65}.role-heading span{font-size:20px}.demo-workspace footer{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:22px;line-height:1.7;gap:24px;margin-top:34px;padding:26px 0}.demo-workspace #admin-link{display:inline-flex;align-items:center;justify-content:center;background:#5b1dda;color:white;padding:16px 32px;border-radius:12px;font-size:24px;font-weight:600;min-height:60px;box-shadow:0 6px 16px #5b1dda20}.demo-shell .sheet p{font-size:22px}.demo-shell .sheet button{font-size:21px}
.intro{max-width:1160px;padding:26px 40px 40px;font-size:21px;line-height:1.7}.intro .demo-tools{margin-bottom:28px}.guide-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.guide-progress button{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;background:#eae6f0;border:1px solid transparent;border-radius:12px;color:#63576f;font-size:18px;line-height:1.35}.guide-progress button span{font-size:15px;border-radius:50%;background:#fff9;padding:8px}.guide-progress button[aria-current]{background:#5b1dda;color:white;box-shadow:0 6px 16px #5b1dda22}.guide-progress button[aria-current] span{background:#ffffff24}.guide-heading{margin:38px 0 28px;max-width:900px}.intro .demo-kicker{font-size:16px;color:#745992}.intro h1{font-size:42px;letter-spacing:-.7px;margin:12px 0 14px;outline:none}.intro .guide-heading p{font-size:23px;line-height:1.65;color:#6b5e79}.intro section{padding:0;border:0;background:transparent;margin:0}.intro h3{font-size:24px;line-height:1.4}.intro p{font-size:21px;line-height:1.7}.role-card{padding:28px;background:white;border:1px solid #e1dbe9;border-radius:18px}.role-symbol{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;background:#eee6fc;color:#5b1dda;border-radius:14px;font-size:32px;margin-bottom:20px}.seller-card .role-symbol{background:#e5f4ec;color:#147853}.sync-line{text-align:center;border-radius:12px;background:#eee6fa;color:#614584;padding:15px;margin:20px 0;font-size:20px}.intro .walkthrough{list-style:none;padding:0;display:grid;gap:12px}.intro .walkthrough li{display:flex;gap:22px;background:white;border:1px solid #e1dbe9;border-radius:14px;margin:0;padding:20px 24px}.step-number{display:flex;flex:0 0 42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:#eee6fa;color:#5b1dda;font-weight:bold}.intro .walkthrough p{margin:6px 0 0}.intro .branch-grid{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.intro .branch-grid li{background:white;border:1px solid #e1dbe9;border-radius:16px;margin:0;padding:22px}.intro .branch-grid li:last-child{grid-column:1/-1}.branch-label{display:block;font-size:15px;letter-spacing:1px;color:#866b9d;margin-bottom:12px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.control-grid article{padding:24px;border:1px solid #e1dbe9;border-radius:16px;background:white}.intro-note{margin-top:24px;padding:22px;border-left:4px solid #ad93d8;background:#eee9f5;color:#62546f}.intro .notice{font-size:19px;line-height:1.7;margin-top:20px}.guide-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid #ddd4e6}.guide-pagination>span{font-size:18px;color:#78698a}.guide-pagination button,.guide-pagination a{padding:14px 25px;font-size:22px;border-radius:12px;line-height:1.5}.guide-next{background:#5b1dda;color:white;border:1px solid #5b1dda}.guide-back{background:white;border:1px solid #ddd4e6}.guide-back:disabled{opacity:.35}.intro button:focus-visible,.intro a:focus-visible{outline:3px solid #ad93d8;outline-offset:3px}
@media(max-width:760px){.intro{padding:20px 18px 32px}.guide-progress{grid-template-columns:1fr 1fr;gap:8px}.guide-progress button{font-size:16px;padding:10px;gap:8px}.intro h1{font-size:32px}.intro .guide-heading p{font-size:22px}.intro-grid,.control-grid,.intro .branch-grid{grid-template-columns:1fr}.intro .branch-grid li:last-child{grid-column:auto}.guide-heading{margin:28px 0 22px}.role-card{padding:22px}.guide-pagination button,.guide-pagination a{font-size:19px;padding:12px 16px}.demo-guide{padding:20px}.demo-guide p{font-size:23px}.demo-guide h2{font-size:28px}.demo-paths small,.role-heading p,.demo-workspace footer{font-size:22px}.demo-tools button,.demo-tools a{font-size:20px}.intro .walkthrough li{padding:18px;gap:14px}}
/* A bounded guide surface with consistent breathing room on every page. */
body.demo-shell:has(.intro){background:#eeedf3;padding:48px 32px;min-height:100vh}
.intro{width:100%;max-width:1040px;margin:0 auto;padding:32px 52px 40px;background:#fcfbfe;border:1px solid #ddd7e7;border-radius:24px;box-shadow:0 16px 60px #3020440a;box-sizing:border-box}
.intro .demo-tools{margin-bottom:26px}.guide-progress{gap:10px}.guide-progress button{font-size:17px;padding:12px;gap:9px}.guide-heading{margin:34px 0 28px;max-width:780px}.intro h1{font-size:36px}.intro .guide-heading p{font-size:22px;max-width:760px}.intro section{padding:0}.intro-grid{gap:20px}.role-card{padding:24px}.intro p{font-size:20px;line-height:1.8}.intro h3{font-size:23px}.intro .walkthrough li{padding:18px 22px}.intro .branch-grid li{padding:22px}.guide-pagination{margin-top:32px;padding-top:26px}
@media(min-width:1600px){body.demo-shell:has(.intro){padding-top:64px;padding-bottom:64px}}
@media(max-width:1000px){body.demo-shell:has(.intro){padding:28px 24px}.intro{padding:28px 32px 34px}.guide-progress{grid-template-columns:1fr 1fr}}
@media(max-width:600px){body.demo-shell:has(.intro){padding:16px 12px}.intro{padding:22px 18px 26px;border-radius:18px}.intro h1{font-size:29px}.intro .guide-heading p{font-size:21px}.guide-progress button{font-size:15px;padding:10px 8px;gap:7px}.guide-progress button span{padding:6px}.role-card{padding:20px}.intro .walkthrough li{padding:16px;gap:12px}.guide-pagination button,.guide-pagination a{font-size:18px;padding:12px}.guide-pagination{gap:8px}.intro .demo-tools button{font-size:18px;padding:10px 15px}}
/* Supporting copy follows the product's 14px body / 16px subheading scale. */
.demo-workspace{padding-top:24px}.demo-kicker,.intro .demo-kicker{font-size:11px;letter-spacing:1px}.demo-top h1{font-size:21px}.demo-tools button,.demo-tools a,.demo-paths button,.intro .demo-tools button{font-size:14px;min-height:38px;padding:8px 13px}.demo-paths{gap:10px;margin:20px 0 14px}.demo-paths small{font-size:14px;line-height:1.65;margin-top:4px}.demo-guide{padding:18px 22px;gap:18px;min-height:0;margin-bottom:22px}.demo-guide #step-tag{font-size:12px}.demo-guide h2{font-size:18px;margin:6px 0 8px}.demo-guide p{font-size:14px;line-height:1.7;max-width:850px}.demo-guide button,.demo-guide a{font-size:14px;padding:9px 13px;min-width:150px}.role-heading{gap:8px;margin-bottom:12px;max-width:430px}.role-heading h2{font-size:16px}.role-heading p{font-size:13px;line-height:1.6}.role-heading span{font-size:12px;min-width:74px;padding:6px 9px}.demo-workspace footer{font-size:13px;gap:16px;margin-top:22px;padding:18px 0}.demo-workspace #admin-link{font-size:14px;min-height:40px;padding:10px 22px;border-radius:9px;box-shadow:none}.demo-shell .sheet p{font-size:14px;line-height:1.7}.demo-shell .sheet h2{font-size:18px}.demo-shell .sheet button{font-size:14px;min-height:38px}
body.demo-shell:has(.intro){padding:32px 24px}.intro{max-width:980px;padding:26px 40px 30px;font-size:14px;line-height:1.7;border-radius:20px}.intro .demo-tools{margin-bottom:20px}.guide-progress{gap:10px}.guide-progress button{font-size:14px;padding:10px 12px;gap:9px;border-radius:10px}.guide-progress button span{font-size:11px;padding:6px}.guide-heading{margin:26px 0 22px}.intro h1{font-size:23px;letter-spacing:0;line-height:1.4;margin:10px 0}.intro .guide-heading p,.intro p{font-size:14px;line-height:1.75}.intro h2{font-size:18px}.intro h3{font-size:16px;line-height:1.5}.intro-grid{gap:18px}.role-card{padding:20px;border-radius:12px}.role-symbol{width:38px;height:38px;font-size:23px;border-radius:10px;margin-bottom:12px}.sync-line{font-size:13px;padding:10px;margin:16px 0}.intro .walkthrough{gap:10px}.intro .walkthrough li{padding:14px 18px;gap:16px;border-radius:12px}.step-number{flex-basis:30px;height:30px;font-size:14px}.intro .walkthrough p{margin-top:4px}.intro .branch-grid{gap:14px}.intro .branch-grid li{padding:18px;border-radius:12px}.branch-label{font-size:11px;margin-bottom:8px}.control-grid{gap:14px}.control-grid article{padding:18px;border-radius:12px}.intro-note{padding:15px 18px;font-size:14px;margin-top:18px}.intro .notice{font-size:13px;line-height:1.7;margin-top:16px}.guide-pagination{margin-top:22px;padding-top:18px}.guide-pagination>span{font-size:12px}.guide-pagination button,.guide-pagination a{font-size:14px;padding:10px 18px;border-radius:9px}
@media(max-width:600px){body.demo-shell:has(.intro){padding:16px 12px}.intro{padding:20px 18px 24px}.guide-progress button{font-size:13px;padding:9px 8px;gap:6px}.intro h1{font-size:21px}.guide-heading{margin:22px 0 18px}.role-card{padding:18px}.demo-guide{padding:16px}.demo-top h1{font-size:20px}.guide-pagination button,.guide-pagination a{font-size:14px;padding:10px 14px}}