/* One connected engineering flow, with assessment alongside the work. */
.how-it-works { background:#fff; scroll-margin-top:86px; }
.how-it-works-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:40px; align-items:center; }
.how-it-works .section-intro { min-width:0; padding:0; }
.how-it-works .section-intro h2 { margin:14px 0 0; font-size:clamp(1.875rem,3.1vw,2.75rem); line-height:1.18; letter-spacing:-.035em; }
.how-it-works .section-intro p { max-width:380px; margin:18px 0 0; font-size:1rem; line-height:1.65; }
.how-it-works .text-link { display:inline-flex; align-items:center; gap:12px; margin-top:18px; font-size:1rem; }
.workflow-scroll { min-width:0; width:100%; }
.workflow-framework { width:100%; min-width:0; margin:0; overflow:hidden; background:#fff; border:1px solid #c6d7e7; border-radius:14px; box-shadow:0 12px 36px #10295109; color:#102951; }
.framework-header { display:flex; align-items:center; gap:16px; min-height:58px; padding:7px 18px; border-bottom:1px solid #e1eaf3; }
.workflow-framework .framework-logo { display:block; width:106px; height:auto; flex:none; }
.framework-header>span { font-size:.875rem; line-height:1.4; color:#526b85; }
.framework-playback { margin-left:auto; flex:none; }
.framework-playback[hidden] { display:none; }
.framework-playback button { display:grid; place-items:center; width:44px; height:44px; padding:12px; border:0; border-radius:8px; background:transparent; color:#1b4f8b; cursor:pointer; }
.framework-playback button:hover { background:#edf5fc; }
.framework-playback button:focus-visible { outline:2px solid #9d5b2c; outline-offset:2px; }
.framework-playback-icon { width:9px; height:12px; border-inline:3px solid currentColor; }
.workflow-framework[data-paused="true"] .framework-playback-icon { width:0; height:0; border:6px solid transparent; border-right:0; border-left:9px solid currentColor; }
.framework-flow { padding:14px 18px 16px; }
.framework-inputs { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:8px 12px; background:#f1f6fb; border:1px solid #d7e3ef; border-radius:6px; transition:background .4s,border-color .4s; }
.framework-inputs strong { font-size:.875rem; font-weight:600; }
.framework-inputs>span { font-size:.875rem; color:#526b85; line-height:1.5; }
.framework-inputs.is-active { background:#e7f0fa; border-color:#7e9ec0; }
.framework-connector { height:20px; color:#8aa4be; text-align:center; font-size:20px; line-height:20px; }
.framework-engineering { padding:12px; background:#173c68; border-radius:8px; border:1px solid #173c68; }
.framework-lane-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.framework-lane-title strong { color:#fff; font-size:1rem; font-weight:600; }
.framework-lane-title>span { color:#c0d5ed; font-size:.875rem; line-height:1.4; }
.framework-work-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.framework-work-products>span { position:relative; min-width:0; padding:8px 10px 12px; border-radius:4px; background:#274e7b; color:#c7dcf6; font-size:.875rem; line-height:1.4; overflow:hidden; }
.framework-work-products strong { color:#fff; font-size:.875rem; font-weight:550; }
.framework-work-products>span::after { content:''; position:absolute; left:10px; bottom:5px; width:calc(100% - 20px); height:2px; background:#e2b28d; transform:scaleX(0); transform-origin:left; }
.framework-engineering.is-active .framework-work-products>span::after { animation:framework-draft 2.2s ease-out both; }
.framework-engineering.is-active .framework-work-products>span:nth-child(2)::after { animation-delay:.45s; }
.framework-engineering.is-active .framework-work-products>span:nth-child(3)::after { animation-delay:.9s; }
@keyframes framework-draft { to { transform:scaleX(1); } }
.framework-ide-handoff { display:grid; grid-template-columns:minmax(0,.8fr) 32px minmax(0,1.2fr); align-items:center; gap:10px; padding:12px; border:1px solid #d7e3ef; border-radius:8px; background:#f7faff; transition:background .4s,border-color .4s; }
.framework-context-package,.framework-ide-destination { min-width:0; }
.framework-context-package>strong,.framework-ide-destination>strong { display:block; color:#102951; font-size:.9375rem; line-height:1.4; font-weight:600; }
.framework-context-package>span { display:block; margin-top:4px; color:#526b85; font-size:.875rem; line-height:1.4; }
.framework-coding-agents { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; margin-top:7px; }
.framework-coding-agents>span { display:inline-flex; align-items:center; gap:5px; color:#102951; font-size:.875rem; line-height:1.4; }
.workflow-framework .framework-coding-agents img { display:block; width:18px; height:20px; object-fit:contain; flex:none; }
.workflow-framework .framework-coding-agents .framework-copilot img { width:124px; height:17px; }
.framework-handoff-flow { position:relative; height:2px; background:#a5bbd2; }
.framework-handoff-flow>span { position:absolute; right:-4px; top:-14px; font-size:24px; line-height:26px; color:#9d5b2c; }
.framework-handoff-flow::after { content:''; position:absolute; width:6px; height:6px; left:0; top:-2px; border-radius:50%; background:#9d5b2c; opacity:0; }
.framework-ide-handoff.is-active { border-color:#9d5b2c; background:#fff8f1; }
.framework-ide-handoff.is-active .framework-handoff-flow::after { animation:framework-ide-transfer 1.7s ease-in-out infinite; }
@keyframes framework-ide-transfer { 0% { left:0; opacity:0; } 20%,80% { opacity:1; } 100% { left:100%; opacity:0; } }
.framework-review-sync { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:center; gap:10px; }
.framework-review-sync>div { align-self:stretch; padding:8px 10px; border-left:2px solid #c5d6e8; transition:background .4s,border-color .4s; }
.framework-review-sync strong { display:block; font-size:.9375rem; font-weight:600; line-height:1.4; }
.framework-review-sync div>span { display:block; margin-top:3px; color:#526b85; font-size:.875rem; line-height:1.4; }
.framework-review-arrow { color:#8aa4be; font-size:22px; text-align:center; }
.framework-review-sync>.is-active { border-color:#9d5b2c; background:#fff8f1; }
.framework-assurance { position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 14px; padding:14px 18px; background:#102951; color:#fff; }
.framework-assurance strong { font-size:.9375rem; line-height:1.4; font-weight:600; }
.framework-assurance>span { color:#c7dcf6; font-size:.875rem; line-height:1.4; }
.framework-assurance::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#e2b28d; transform:scaleX(.18); transform-origin:left; }
.workflow-framework[data-enhanced="true"] .framework-assurance::before { animation:framework-evidence 5s ease-in-out infinite alternate; }
@keyframes framework-evidence { to { transform:scaleX(1); } }
.workflow-framework:not([data-running="true"]) .framework-assurance::before,.workflow-framework:not([data-running="true"]) .framework-work-products>span::after,.workflow-framework:not([data-running="true"]) .framework-handoff-flow::after { animation-play-state:paused; }
@media(max-width:899px) {
 .how-it-works-grid { grid-template-columns:1fr; gap:26px; }
 .how-it-works .section-intro { text-align:center; }
 .how-it-works .section-intro .eyebrow { justify-content:center; }
 .how-it-works .section-intro p { max-width:580px; margin-inline:auto; }
 .workflow-scroll { max-width:720px; margin-inline:auto; }
}
@media(max-width:560px) {
 .how-it-works .section-intro { text-align:left; }
 .how-it-works .section-intro .eyebrow { justify-content:flex-start; }
 .framework-header { gap:10px; padding:7px 12px; }
 .workflow-framework .framework-logo { width:90px; }
 .framework-flow { padding:12px; }
 .framework-inputs { display:block; padding:8px 10px; }
 .framework-inputs>span { display:block; margin-top:3px; }
 .framework-engineering { padding:10px; }
 .framework-lane-title { align-items:flex-start; }
 .framework-lane-title>span { max-width:80px; text-align:right; }
 .framework-work-products { gap:5px; }
 .framework-work-products>span { padding:7px 5px 11px; }
 .framework-work-products>span::after { left:5px; width:calc(100% - 10px); }
 .framework-ide-handoff { grid-template-columns:minmax(0,.9fr) 20px minmax(0,1.1fr); padding:10px; gap:7px; }
 .framework-review-sync { gap:6px; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); }
 .framework-review-sync>div { padding:7px; }
 .framework-assurance { padding:12px; }
}
@media(max-width:380px) {
 .framework-work-products { grid-template-columns:1fr; }
 .framework-work-products br { display:none; }
 .framework-work-products>span { padding:6px 8px 10px; }
 .framework-header>span { max-width:90px; }
 .framework-ide-handoff { grid-template-columns:1fr; gap:12px; }
 .framework-handoff-flow { width:28px; height:18px; margin-inline:auto; background:none; }
 .framework-handoff-flow>span { transform:rotate(90deg); }
 .framework-handoff-flow::after { display:none; }
 .framework-context-package>span br { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .workflow-framework [data-framework-stage] { transition:none; }
 .workflow-framework .framework-work-products>span::after,.workflow-framework .framework-handoff-flow::after,.workflow-framework .framework-assurance::before { animation:none!important; }
 .framework-work-products>span::after { transform:scaleX(1); }
}