/* Homepage teaching preview. Keep these styles scoped to this section. */
.hero3 .hero3-walkthrough { display: block; margin: 16px 0 10px; }
.decision-demo {
    --decision-ink: #182d45;
    --decision-muted: #495c6b;
    --decision-paper: #fff;
    --decision-tint: #f0f5f6;
    --decision-line: #cbd7dd;
    --decision-accent: #0b615d;
    background: #f5f4ee;
    color: var(--decision-ink);
    padding: 64px 24px;
    scroll-margin-top: 90px;
}
.decision-demo-inner { max-width: 1180px; margin: 0 auto; }
.decision-demo-heading { max-width: 760px; margin-bottom: 28px; }
.decision-demo .decision-eyebrow { font: 600 12px/1.5 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--decision-accent); margin: 0 0 12px; }
.decision-demo h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.16; letter-spacing: -.025em; margin: 0 0 16px; }
.decision-demo h3 { font-size: 23px; line-height: 1.3; margin: 0 0 14px; }
.decision-demo h4 { font-size: 19px; line-height: 1.4; margin: 0 0 10px; }
.decision-demo p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.decision-demo a { color: var(--decision-accent); text-decoration: underline; text-underline-offset: 3px; }
.decision-demo a:hover { text-decoration-thickness: 2px; }
.decision-demo-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.decision-problem { padding: 28px; background: var(--decision-paper); border: 1px solid var(--decision-line); border-top: 4px solid var(--decision-accent); border-radius: 4px; }
.decision-problem table { width: 100%; border-collapse: collapse; margin: 20px 0; font: 14px/1.5 'JetBrains Mono', monospace; }
.decision-problem caption { color: var(--decision-muted); text-align: left; font: 14px/1.5 'IBM Plex Sans', sans-serif; margin-bottom: 8px; }
.decision-problem th, .decision-problem td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--decision-line); }
.decision-problem th { background: var(--decision-tint); }
.decision-methods { border: 0; padding: 0; margin: 22px 0 14px; min-width: 0; }
.decision-methods legend { font-weight: 600; margin-bottom: 10px; }
.decision-methods button { display: block; width: 100%; text-align: left; font: inherit; line-height: 1.4; color: var(--decision-ink); background: var(--decision-paper); border: 1px solid var(--decision-line); border-radius: 4px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.decision-methods button:hover, .decision-methods button[aria-pressed="true"] { background: var(--decision-tint); border-color: var(--decision-accent); }
.decision-demo .decision-feedback { padding: 14px; background: var(--decision-tint); border-left: 3px solid var(--decision-accent); font-size: 15px; }
.decision-demo details { border-bottom: 1px solid var(--decision-line); }
.decision-demo summary { cursor: pointer; padding: 18px 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.decision-demo summary::marker { color: var(--decision-accent); }
.decision-step-number { font: 500 13px/1.5 'JetBrains Mono', monospace; color: var(--decision-accent); margin-right: 8px; }
.decision-steps details:first-child summary { padding-top: 0; }
.decision-steps details > a { display: inline-block; margin: 0 0 20px; }
.decision-demo .decision-equation { overflow-wrap: anywhere; font: 14px/1.9 'JetBrains Mono', monospace; padding: 14px; border: 1px solid var(--decision-line); border-radius: 4px; background: var(--decision-paper); }
.decision-equation code { font: inherit; color: inherit; background: none; padding: 0; white-space: normal; }
.decision-demo kbd { border: 1px solid var(--decision-line); border-bottom-width: 3px; border-radius: 3px; padding: 2px 6px; font: inherit; }
.decision-next { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--decision-line); }
.decision-next-heading { max-width: 800px; }
.decision-next-heading p { color: var(--decision-muted); }
.decision-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.decision-needs article { padding: 22px; background: var(--decision-paper); border: 1px solid var(--decision-line); border-radius: 4px; display: flex; flex-direction: column; }
.decision-needs p { flex: 1; color: var(--decision-muted); }
.decision-needs a { display: block; font-size: 15px; line-height: 1.5; padding: 8px 0; }
.decision-needs .decision-practice-link { font-weight: 600; }
.decision-demo :is(a, button, summary):focus-visible { outline: 3px solid var(--decision-accent); outline-offset: 4px; }
.decision-demo [hidden] { display: none; }
html.dark-mode .decision-demo, body.dark-mode .decision-demo {
    --decision-ink: #e5edf3;
    --decision-muted: #b5c4d0;
    --decision-paper: #182838;
    --decision-tint: #203745;
    --decision-line: #3c5263;
    --decision-accent: #8dd6c7;
    background: #12212e;
}
@media (max-width: 800px) {
    .decision-demo { padding: 42px 20px; }
    .decision-demo-grid { grid-template-columns: 1fr; gap: 24px; }
    .decision-needs { grid-template-columns: 1fr; gap: 14px; }
    .decision-problem { padding: 22px; }
}
@media (max-width: 420px) {
    .decision-demo { padding: 36px 16px; }
    .decision-problem, .decision-needs article { padding: 18px; }
    .decision-demo summary { font-size: 16px; }
    .decision-problem th, .decision-problem td { padding: 10px 8px; }
}