.demo-hero{padding-bottom:2rem!important}.demo-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:3rem;align-items:center}.demo-hero h1{font-size:clamp(2.5rem,5vw,4.2rem)!important}.demo-hero p{max-width:54rem}.demo-fiction{font-size:.8rem!important;color:#73758b!important;margin:1.2rem 0 0!important}.demo-module-picker label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.6rem}.demo-module-picker>div{display:flex;gap:.5rem}.demo-module-picker select{min-width:0;flex:1;border:1px solid #ded8f6;border-radius:.8rem;padding:.6rem;background:#fff;color:#20223f}.demo-module-picker .btn{margin:0}.demo-section{padding-top:1.8rem!important}.demo-chapter-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #e7e6f3}.demo-chapter-nav a{display:flex;align-items:center;gap:.45rem;padding:.65rem .8rem;border:1px solid #e7e6f3;border-radius:.9rem;font-size:.75rem;color:#62647c;background:#fff}.demo-chapter-nav a span{font-size:.65rem;color:#5840d7}.demo-chapter-nav a[aria-current]{background:#eee9ff;color:#422cae;border-color:#cabdf7}.demo-chapter[hidden]{display:none}.demo-chapter-heading{max-width:58rem;margin:0 0 1.5rem}.demo-chapter-heading h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:.55rem 0 .6rem}.demo-chapter-heading h2:focus{outline:none}.demo-chapter-heading p{color:#62647c;line-height:1.8}.demo-workflow{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.7fr);gap:2rem;align-items:start}.demo-explanation{padding:1.5rem;background:#f6f6ff;border:1px solid #e7e6f3;border-radius:1.5rem}.demo-explanation h3{font-size:.9rem;margin:0 0 .7rem}.demo-explanation h3:not(:first-child){margin-top:1.5rem}.demo-explanation p,.demo-explanation li{font-size:.84rem;line-height:1.8;color:#62647c}.demo-explanation ol{padding-left:1.2rem;margin:0}.demo-explanation li+li{margin-top:.8rem}.demo-workspace{min-width:0}.demo-state-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#73758b;margin:0 0 .6rem}.demo-screen{border:1px solid #e2def1;border-radius:1.2rem;overflow:hidden;background:#fff;box-shadow:0 10px 35px #30235908}.demo-screen>header{display:flex;align-items:center;gap:.8rem;background:#f9f8ff;padding:.9rem 1.1rem;border-bottom:1px solid #e7e6f3;font-size:.8rem;color:#20223f}.demo-window-dots{color:#d9d2ee;letter-spacing:.1rem;font-size:.55rem;white-space:nowrap}.demo-screen-badge{margin-left:auto;color:#5840d7;font-size:.65rem;letter-spacing:.08em}.demo-table-scroll{overflow-x:auto}.demo-screen table{width:100%;border-collapse:collapse;font-size:.79rem}.demo-screen th{color:#747589;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;background:#fdfcff}.demo-screen td,.demo-screen th{text-align:left;padding:.9rem 1rem;border-bottom:1px solid #eeedf5;vertical-align:top}.demo-screen td{color:#343650}.demo-screen summary{cursor:pointer;color:#5840d7;min-width:6rem;font-weight:600}.demo-row-detail{min-width:14rem;max-width:28rem;margin:.8rem 0 0;font-weight:400;line-height:1.7;color:#62647c}.demo-screen-help{font-size:.7rem;color:#73758b;margin:0;padding:.7rem 1rem}.demo-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}.demo-actions .btn{font-size:.78rem}.demo-outcome{border-left:3px solid #00a593;border-radius:0 .7rem .7rem 0;background:#edf9f6;padding:1rem;font-size:.85rem;color:#216c63;margin-top:1rem}.demo-boundary{font-size:.78rem;line-height:1.7;color:#73758b;margin:1.5rem 0 0;padding-left:1rem;border-left:2px solid #ded8f6}.demo-next{margin-top:3rem;padding:2rem;border:1px solid #e7e6f3;border-radius:1.5rem;display:flex;gap:2rem;align-items:center;justify-content:space-between;background:linear-gradient(115deg,#f8f5ff,#f1fbfa)}.demo-next h2{font-size:1.25rem;max-width:40rem}.demo-next p{font-size:.9rem;color:#62647c}.demo-next .btn{flex-shrink:0}
@media(max-width:950px){.demo-hero-grid{grid-template-columns:1fr;gap:1rem}.demo-module-picker{max-width:28rem}.demo-workflow{grid-template-columns:1fr}.demo-explanation ol{display:flex;gap:2rem;flex-wrap:wrap}.demo-explanation li{flex:1;min-width:12rem}.demo-explanation li+li{margin-top:0}.demo-next{flex-direction:column;align-items:flex-start}}@media(max-width:500px){.demo-chapter-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.8rem}.demo-chapter-nav a{flex-shrink:0;max-width:13rem}.demo-screen td,.demo-screen th{padding:.7rem}.demo-explanation{padding:1.1rem}.demo-next{padding:1.4rem}}
.demo-explanation>div+div{margin-top:1.5rem}.demo-workflow--entry{grid-template-columns:1fr}.demo-workflow--entry .demo-explanation{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem}.demo-workflow--entry .demo-explanation>div+div{margin-top:0}.demo-workflow--entry .demo-explanation ol{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}.demo-workflow--entry .demo-explanation li+li{margin-top:0}.demo-workflow--entry .accounting-lab{margin-top:0}
@media(max-width:800px){.demo-workflow--entry .demo-explanation{grid-template-columns:1fr}.demo-workflow--entry .demo-explanation ol{grid-template-columns:1fr}.demo-explanation>div+div{margin-top:1rem}}

/* A recognisable product environment, using the current module's own colour. */
.dsi-site.dsi-brand-theme .demo-hero { padding-block:38px 30px!important; }
.dsi-site .demo-hero-grid { grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:70px; }
.demo-identity { display:flex;gap:13px;align-items:center; }
.demo-module-icon { display:grid;place-items:center;width:48px;height:48px;background:var(--module-accent);border-radius:15px;color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--module-accent) 20%,transparent); }
.demo-module-icon .icon { width:27px;height:27px; }
.dsi-site .demo-hero h1 { font-size:clamp(2.8rem,4.5vw,4.5rem)!important;letter-spacing:-.055em;margin:20px 0; }
.demo-title-dot { color:var(--module-accent); }
.dsi-site .demo-hero-grid>div>p { font-size:17px;max-width:650px; }
.demo-hero-actions { display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px; }
.demo-preview-card { position:relative;overflow:hidden;padding:30px;border-radius:24px;background:linear-gradient(140deg,var(--module-accent),var(--module-deep));color:#fff;box-shadow:0 20px 45px color-mix(in srgb,var(--module-deep) 17%,transparent); }
.demo-preview-card::after { content:"";position:absolute;width:180px;height:180px;border:36px solid #ffffff08;border-radius:50%;top:-65px;right:-65px;pointer-events:none; }
.demo-preview-label { display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#ffffffc9; }
.dsi-site.dsi-brand-theme .demo-preview-card h2 { color:#fff;font-size:24px;margin:12px 0 22px; }
.demo-preview-card ul { padding:0;margin:0;list-style:none; }
.demo-preview-card li { display:flex;gap:12px;font-size:13px;line-height:1.7;margin:12px 0; }
.demo-preview-card li>span { color:#fff;background:#ffffff1c;border-radius:50%;width:23px;height:23px;text-align:center;flex-shrink:0; }
.demo-preview-footer { display:flex;gap:12px;align-items:center;border-top:1px solid #ffffff30;margin-top:25px;padding-top:18px; }
.demo-preview-footer strong { font-size:32px;line-height:1;letter-spacing:-.04em; }
.demo-preview-footer>span { font-size:12px;color:#ffffffd9; }
.demo-preview-footer .demo-preview-arrow { margin-left:auto;font-size:28px; }
.dsi-site.dsi-brand-theme .demo-fiction { font-size:12px!important;color:var(--dsi-text-muted)!important; }
.demo-module-strip { background:var(--dsi-surface);border-bottom:1px solid var(--dsi-border);padding:18px 0; }
.demo-module-strip>.wrap { display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:center; }
.demo-module-picker label { font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dsi-text-muted); }
.demo-module-picker>div { gap:6px; }
.demo-module-picker select { background:var(--dsi-surface);border-color:var(--dsi-border);color:var(--dsi-text);font-size:12px;padding:10px; }
.dsi-site .demo-module-picker .btn { font-size:12px;min-height:40px;padding:8px 13px; }
.demo-module-links { display:flex;align-items:center;gap:8px;overflow-x:auto;padding:10px 4px;scrollbar-width:thin; }
.dsi-site .demo-module-links a { display:flex;align-items:center;gap:8px;border:1px solid var(--dsi-border);border-radius:12px;padding:12px 14px;font-size:12px;font-weight:650;white-space:nowrap;color:var(--dsi-text-muted); }
.dsi-site .demo-module-links a[aria-current],.dsi-site .demo-module-links a:hover { color:var(--module-ink);border-color:var(--module-line);background:var(--module-tint); }
.dsi-site .demo-section { padding-top:42px!important;scroll-margin-top:115px; }
.demo-section-heading { display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:25px; }
.dsi-site .demo-section-heading h2 { font-size:28px;margin:9px 0 0; }
.dsi-site .demo-section-heading p { max-width:360px;font-size:13px;margin:0; }
.demo-chapter-nav { flex-wrap:wrap;gap:8px;border:0;padding:12px;background:var(--dsi-surface-alt);border-radius:16px;margin-bottom:32px; }
.dsi-site .demo-chapter-nav a { border:1px solid transparent;background:transparent;color:var(--dsi-text-muted);padding:10px 13px;font-size:12px; }
.dsi-site .demo-chapter-nav a span { display:grid;place-items:center;background:var(--dsi-surface);color:var(--module-ink);border-radius:7px;width:25px;height:25px;font-size:10px; }
.dsi-site .demo-chapter-nav a[aria-current] { background:var(--module-accent);border-color:var(--module-accent);color:#fff;box-shadow:0 4px 10px #0000000d; }
.dsi-site .demo-chapter-nav a[aria-current] span { background:#ffffff22;color:#fff; }
.demo-chapter-heading { margin-bottom:24px; }
.dsi-site .demo-chapter-heading h2 { font-size:clamp(23px,2.6vw,32px); }
.demo-chapter-heading .step-number { font-size:11px;margin-bottom:8px; }
.dsi-site .demo-chapter-heading p { font-size:14px; }
.demo-workflow { grid-template-columns:minmax(240px,.65fr) minmax(0,1.65fr);gap:25px; }
.demo-explanation { background:var(--dsi-surface);border-color:var(--module-line);border-top:3px solid var(--module-accent);padding:24px; }
.dsi-site .demo-explanation h3 { font-size:15px; }
.demo-explanation p,.demo-explanation li { color:var(--dsi-text-muted);font-size:13px; }
.demo-explanation li::marker { color:var(--module-ink);font-weight:750; }
.demo-screen { border-color:var(--module-line);background:var(--dsi-surface);box-shadow:0 14px 36px color-mix(in srgb,var(--module-deep) 7%,transparent); }
.demo-screen>header { background:var(--module-deep);border-color:transparent;color:#fff;min-height:58px; }
.demo-window-dots { color:#ffffff66; }
.demo-screen-badge { color:#fff;padding:4px 9px;background:#ffffff1c;border-radius:6px; }
.demo-screen th { background:var(--module-tint);color:var(--dsi-text-muted); }
.demo-screen :is(td,th) { border-color:var(--dsi-border); }
.demo-screen td { color:var(--dsi-text); }
.demo-screen summary { color:var(--module-ink); }
.demo-screen tbody tr:hover { background:var(--module-tint); }
.demo-screen-help { background:var(--dsi-surface-alt); }
.demo-state-label { color:var(--dsi-text-muted);font-weight:650; }
.demo-boundary { color:var(--dsi-text-muted);border-color:var(--module-line); }
.demo-next { border-color:var(--module-line);background:var(--module-tint); }
.demo-workflow--entry { grid-template-columns:1fr; }
@media(max-width:950px) { .dsi-site .demo-hero-grid { gap:30px;grid-template-columns:minmax(0,1fr) minmax(250px,.8fr); }.demo-workflow { grid-template-columns:1fr; }.demo-module-strip>.wrap { grid-template-columns:1fr;gap:12px; }.demo-module-picker { max-width:340px; }.demo-preview-card { padding:24px; } }
@media(max-width:650px) { .dsi-site .demo-hero-grid { grid-template-columns:1fr;gap:28px; }.demo-preview-card { padding:24px; }.demo-section-heading { flex-direction:column;align-items:flex-start;gap:12px; }.demo-chapter-nav { flex-wrap:nowrap;overflow-x:auto;padding:8px; }.demo-chapter-nav a { flex-shrink:0;max-width:240px; }.dsi-site .demo-hero h1 { font-size:40px!important; }.demo-hero-actions { gap:18px; }.demo-preview-footer { margin-top:18px; }.demo-explanation { padding:20px; } }
