.road-page{padding-bottom:60px;--road-ink:#173f55;--road-teal:#087e80;--navy:#173f55;--muted:#526d79;--ink:#173f55;color:var(--road-ink)}
.road-page :is(h2,h3){color:var(--road-ink)}
.road-page p{color:#526d79;line-height:1.95}
.road-hero{background:#edf7f7;border:1px solid #c8e1e3;border-radius:22px;padding:32px;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center;margin-top:12px}
.road-hero h2{font-size:32px;line-height:1.6;margin:12px 0}.road-hero p{margin-bottom:22px}
.road-page figure{margin:0;min-width:0}.road-page figcaption{font-size:11px;color:#526d79;margin-top:8px}
.road-kicker{font-size:12px;font-weight:800;color:#087e80;display:block;margin-bottom:10px}
.road-photo{position:relative;overflow:hidden;background:#e3eeee;border-radius:14px;isolation:isolate}
.road-photo img{position:absolute;max-width:none!important;height:auto;display:block}
.road-nav{display:flex;flex-wrap:wrap;gap:10px;padding-block:22px}.road-nav a{background:#ffffffea;color:#174d5d;border:1px solid #c8e1e3;border-radius:30px;padding:8px 18px;font-size:12px}.road-nav a:hover{background:#A9DDDD}
.road-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:24px;align-items:start}.road-content{min-width:0;display:grid;gap:22px}.road-layout>.side-panel{position:sticky;top:112px;min-width:0}
.road-panel{background:#fff;padding:30px;border:1px solid #c8e1e3;border-radius:18px;scroll-margin-top:120px;min-width:0}.road-panel h2{font-size:24px;margin-bottom:14px}.road-panel h3{font-size:16px}.road-panel p{font-size:13px}
.road-two{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:center}.road-two p{margin:8px 0 22px}
.road-stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:22px 0}.road-stepper button{font:inherit;font-size:11px;border:1px solid #c8e1e3;background:#edf7f7;color:#173f55;border-radius:12px;padding:12px 6px;cursor:pointer;line-height:1.6}.road-stepper button span{display:block;font-weight:800;font-size:18px;margin-bottom:5px}.road-stepper button[aria-pressed=true]{background:#174d5d;color:#fff;border-color:#174d5d}.road-stepper button:focus-visible{outline:3px solid #087e80;outline-offset:2px}
.road-demo{border:1px solid #c8e1e3;border-radius:16px;overflow:hidden}.road-scene{position:relative;height:130px;background:linear-gradient(#e3f2f2 0 58%,#31566b 58% 94%,#d7e9e9 94%);overflow:hidden}.road-scene:after{content:'';position:absolute;top:78%;width:100%;border-top:3px dashed #a9dddd}.road-car{position:absolute;color:#fff;top:45%;left:65%;font-size:65px;line-height:1;transition:left .5s;z-index:2}.road-sensor{position:absolute;right:14%;top:20%;background:#174d5d;color:#a9dddd;padding:8px 12px;border-radius:8px;border-bottom:25px solid #174d5d;z-index:3}.road-beam{position:absolute;right:18%;top:40%;width:90px;height:60px;background:#17a1a340;clip-path:polygon(100% 0,100% 100%,0 100%)}.road-alert{position:absolute;top:18%;left:47%;color:#fff;background:#b84945;border-radius:50%;width:26px;height:26px;text-align:center;font-weight:bold;opacity:0}.road-station{position:absolute;left:8%;top:18%;padding:7px 15px;border-radius:8px;background:#174d5d;color:#fff;opacity:.25;font-size:12px}.road-demo:not([data-road-phase="0"]) .road-car{left:45%}.road-demo:is([data-road-phase="2"],[data-road-phase="3"],[data-road-phase="4"]) .road-alert{opacity:1}.road-demo:is([data-road-phase="3"],[data-road-phase="4"]) .road-station{opacity:1;background:#087e80}.road-demo[data-road-phase="4"] .road-car{left:20%}
#road-step-detail{padding:22px;min-height:185px;background:#f4fafa}.road-phase-label{font-size:11px;color:#087e80;font-weight:800;display:block;margin-bottom:8px}#road-step-detail h3{margin-bottom:10px}.road-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.road-controls>span{font-size:12px}.road-controls button:disabled{opacity:.45;cursor:default}.road-reset{font:inherit;font-size:12px;border:0;background:transparent;color:#087e80;cursor:pointer;margin-inline-start:auto;text-decoration:underline}.road-note{background:#edf7f7;border-right:3px solid #087e80;padding:14px;margin-top:20px!important;font-size:12px!important}
.road-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.road-mini-card{border:1px solid #d7e7e8;padding:18px;border-radius:12px;background:#f6fafa}.road-mini-card>span{color:#087e80;font-size:12px;display:block;margin-bottom:7px}.road-mini-card h3{line-height:1.8;font-size:14px}.road-panel details{border:1px solid #c8e1e3;padding:16px;border-radius:10px;margin-top:18px}.road-panel summary{cursor:pointer;font-weight:700;color:#174d5d}.road-page .button{font-size:12px}
@media(max-width:1000px){.road-layout{grid-template-columns:minmax(0,1fr)}.road-layout>.side-panel{position:static}.road-hero h2{font-size:26px}}
@media(max-width:600px){.road-hero{grid-template-columns:1fr;padding:22px;gap:22px}.road-hero h2{font-size:25px}.road-panel{padding:20px}.road-panel h2{font-size:21px}.road-two{grid-template-columns:1fr}.road-two figure{max-width:240px;width:100%;margin:auto}.road-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.road-stepper button:last-child{grid-column:1/-1}.road-stepper button{min-height:66px}.road-cards{grid-template-columns:1fr}.road-nav{gap:7px}.road-nav a{font-size:11px;padding:7px 13px}#road-step-detail{min-height:235px}.road-controls{gap:9px}.road-reset{flex-basis:100%;text-align:start}.road-hero .button-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.road-car{transition:none}}