/* Mainstreet palette and typography with the approved Signal-style pathway cards. */
body[data-design="3"] #how{color:var(--ink)}
body[data-design="3"] #how .sectionhead h2{font-family:Georgia,serif;font-weight:400}
body[data-design="3"] #how .sectionhead:after{display:none}
body[data-design="3"] #how .step{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
body[data-design="3"] #how .step .num{font:11px monospace;display:inline-flex;padding:7px 9px;border:1px solid var(--line);border-radius:6px;margin-bottom:45px;color:var(--primary)}
body[data-design="3"] #how .step:before{content:"";display:block;height:2px;background:var(--primary);width:0;transition:width .5s;margin-bottom:20px}
body[data-design="3"] #how .step:hover{box-shadow:0 18px 45px #17171710;border-color:var(--muted)}
body[data-design="3"] #how .step:hover:before{width:100%}
body[data-design="3"] #how .step:hover .num{background:var(--primary);color:#fff;transform:rotate(-5deg)}
@media(max-width:900px){body[data-design="3"] #how .step{padding:22px}}
@media(max-width:650px){body[data-design="3"] #how .step{padding:25px}body[data-design="3"] #how .step .num{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){body[data-design="3"] #how .step,body[data-design="3"] #how .step:before,body[data-design="3"] #how .step .num{transition:none!important;transform:none!important}}

/* Final Mainstreet presentation: consistent focus, brand mark and navigation. */
body[data-design="3"]>.scroll-progress{background:var(--primary);box-shadow:0 0 15px #e509144d}
body[data-design="3"] .conceptbar{display:none}
body[data-design="3"] :is(button,a,input,textarea,select):focus-visible{outline-color:var(--primary)}
body[data-design="3"] .step .num{border-color:#e6cecc}