/* One quiet product surface. The demonstration explains the work. */
.product-panel{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center;padding:28px 0 12px}
.product-copy{min-width:0;padding-block:24px}
.pill{display:block;margin-bottom:22px;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--brand-ink)}
.product-copy h3{font-size:clamp(2rem,3vw,2.65rem);line-height:1.12;margin-bottom:22px}
.product-copy>p{max-width:405px;font-size:1rem;line-height:1.85;color:var(--muted)}
.feature-list{list-style:none;margin:26px 0 30px;padding:0;font-size:.875rem;line-height:1.7}
.feature-list li{position:relative;padding-left:22px;margin-top:11px}
.feature-list li::before{content:'✓';position:absolute;left:0;color:var(--brand-ink)}
.product-copy .button{min-height:50px}
.product-demonstration{min-width:0}
.product-process{padding:32px 0 28px 38px;border-left:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:600px}
.process-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:18px}
.product-process h4{font-size:clamp(1.75rem,2.4vw,2.1rem);line-height:1.2;max-width:430px;margin-bottom:16px}
.process-steps{list-style:none;margin:0;padding:0}
.process-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding-block:24px;border-bottom:1px solid var(--line)}
.process-steps li:last-child{border-bottom:0}
.process-number{font-family:var(--display);font-size:1rem;color:var(--brand-ink);padding-top:3px}
.process-steps h5{font-family:var(--display);font-size:1.375rem;font-weight:500;line-height:1.25;margin:0 0 9px}
.process-steps p{font-size:.9375rem;line-height:1.75;color:var(--muted);max-width:440px}

/* Mapping for the original Erudis component; no changes to page-wide tokens. */
.product-demonstration{
 --bg:var(--white);--surface:var(--paper);--text:var(--ink);--text-muted:var(--muted);--text-faint:var(--muted);
 --accent:var(--brand-ink);--accent-soft:var(--brand-soft);--accent-border:#e4a394;
 --tint-video:var(--paper);--tint-video-ink:var(--ink);--tint-drill:var(--paper);--tint-drill-ink:var(--brand-ink);
 --font-mono:var(--display);--line-strong:#a7a9b6;--radius-1:4px;--radius-2:12px;--radius-pill:8px;
 --step-small:.875rem;--step-legal:.8125rem;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
 --shadow-1:0 1px 3px #191a2412;--shadow-2:0 12px 36px -20px #191a2420;
 --duration:.18s;--easing:cubic-bezier(.2,0,.2,1)
}
.erudis-demo .demo-head{background:var(--paper);padding:16px 22px}
.erudis-demo .demo-switch{background:transparent;border:1px solid var(--line);padding:3px}
.erudis-demo .demo-tab[aria-selected=true]{color:var(--brand-ink)}
.erudis-demo .demo-tab:hover,.erudis-demo .step:hover{background:var(--brand-soft)}
.erudis-demo .demo-tab:active,.erudis-demo .step:active,.erudis-demo .demo-play:active{background:var(--brand-soft)}
.erudis-demo .demo-tab:disabled,.erudis-demo .step:disabled{opacity:.65}
.erudis-demo .stage{display:grid;min-height:480px}
.erudis-demo .aud,.erudis-demo .aud[data-active]{display:grid;grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none}
.erudis-demo .aud[data-active]{visibility:visible;pointer-events:auto}
.erudis-demo .phase,.erudis-demo .phase[data-active]{display:flex;grid-area:1/1;flex-direction:column;min-width:0;min-height:480px;padding:25px 24px 30px;visibility:hidden;pointer-events:none}
.erudis-demo .aud[data-active] .phase[data-active]{visibility:visible;pointer-events:auto}
.erudis-demo .phase-head{height:auto;min-height:34px;line-height:1.3}
.erudis-demo .phase-title{font-family:var(--display);font-size:1.25rem;font-weight:500;letter-spacing:-.025em}
.erudis-demo .phase-no{font-size:.875rem}
.erudis-demo .module-name{line-height:1.4}
.erudis-demo .module-items li{padding:5px 8px}
.erudis-demo .file-kind{font-size:.75rem}
.erudis-demo .file{gap:12px}
.erudis-demo .step{min-height:50px;border-radius:4px}
.erudis-demo .demo-foot{padding-top:8px}
.erudis-demo .demo-play{margin-top:-8px}
.erudis-demo .feed li{flex-wrap:wrap;gap:6px 10px}
.erudis-demo .feed-text{flex:1;min-width:150px}
.erudis-demo .feed-tag{margin-left:16px}
.erudis-demo .module-head{flex-wrap:wrap;gap:5px 9px}
.erudis-demo .module-name{flex:1;min-width:100px}
.erudis-demo .file-status{font-size:.75rem}
.product-demonstration .demo-note{max-width:540px;font-size:.75rem;line-height:1.7;padding-top:14px}
/* Readable first paint, including a failed script load. */
.erudis-demo:not([data-ready]) .phase [data-erudis]{animation:none!important;opacity:1;transform:none}
.erudis-demo:not([data-ready]) .phase-head{animation:none!important}
.erudis-demo:not([data-ready]) .bar-fill{width:var(--w)}
@media(max-width:1120px){
 .product-panel{gap:32px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
 .product-process{padding-left:28px}
 .erudis-demo .phase,.erudis-demo .phase[data-active]{padding-inline:18px}
 .erudis-demo .demo-head{padding-inline:18px}
 .erudis-demo .file{flex-wrap:wrap}
 .erudis-demo .file-text{flex:1;min-width:130px}
 .erudis-demo .file-status{margin-left:54px}
 .erudis-demo .counters li{padding:10px 12px}
 .erudis-demo .counters .num{font-size:1.3rem}
}
@media(max-width:820px){
 .product-panel{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:10px}
 .product-copy{padding:12px 0 0}
 .product-copy>p{max-width:550px}
 .product-copy h3{font-size:2.25rem}
 .product-process{border-left:0;border-top:1px solid var(--line);padding:28px 0 0;min-height:0}
 .product-demonstration{max-width:660px;width:100%}
 .erudis-demo .file-status{margin-left:auto}
}
@media(max-width:520px){
 .product-panel{gap:28px}
 .product-copy h3{font-size:2.1rem}
 .product-copy .button{font-size:.8125rem}
 .process-steps li{gap:10px;grid-template-columns:28px minmax(0,1fr)}
 .product-demonstration{--space-4:12px;--space-5:16px}
 .erudis-demo .demo-head{gap:10px;padding:14px 16px}
 .erudis-demo .demo-switch-label{font-size:.8125rem}
 .erudis-demo .demo-tab{padding-inline:12px}
 .erudis-demo .stage,.erudis-demo .phase,.erudis-demo .phase[data-active]{min-height:570px}
 .erudis-demo .phase,.erudis-demo .phase[data-active]{padding:20px 16px 25px}
 .erudis-demo .phase-title{font-size:1.125rem}
 .erudis-demo .file-status{margin-left:54px}
 .erudis-demo .file-name{font-size:.8125rem}
 .erudis-demo .counters{flex-wrap:wrap}
 .erudis-demo .counters li{padding:10px 8px;min-width:60px}
 .erudis-demo .counters .lbl{font-size:.75rem}
 .erudis-demo .module-time{display:none}
 .erudis-demo .module{padding:12px}
 .erudis-demo .module-name{min-width:100%;font-size:.875rem}
 .erudis-demo .step-name{font-size:.75rem}
 .erudis-demo .demo-foot{gap:12px}
 .erudis-demo .demo-play{margin-top:0}
 .erudis-demo .feed-tag{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){.erudis-demo *{animation:none!important;transition:none!important}.erudis-demo .phase [data-erudis]{opacity:1;transform:none}}
@media(forced-colors:active){.erudis-demo .demo-tab[aria-selected=true],.erudis-demo .step[aria-current=step]{outline:2px solid Highlight}.erudis-demo .phase-no{border:1px solid CanvasText}}

.erudis-demo .aud:not([data-active]) *, .erudis-demo .phase:not([data-active]) *{animation-name:none!important}

.erudis-demo .phase[data-reset] *{animation:none!important}