/* Pair each step of the homepage story with its real interface. */
.home-story #workflow-title { scroll-margin-top: 120px; }
.home-story .home-v3__steps { display: grid; grid-template-columns: 1fr; gap: 36px; }
.home-story .home-v3__steps article {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(24px, 3vw, 48px);
    padding: 32px;
    align-items: start;
    text-align: left;
}
.home-story .home-v3__steps article > span,
.home-story .home-v3__steps article > h3,
.home-story .home-v3__steps article > p { grid-column: 1; }
.home-story .home-v3__steps article > span { margin-bottom: 18px; }
.home-story .home-v3__steps article > h3 { margin: 0 0 18px; font-size: clamp(23px, 2vw, 30px); }
.home-story .home-v3__steps article > p { margin: 0; }
.home-story .home-story__screen {
    display: block;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    overflow: hidden;
    border: 1px solid var(--control-border-color);
    border-radius: 6px;
    line-height: 0;
}
.home-story__screen img { display: block; width: 100%; height: auto; }
.home-story__screen:hover { box-shadow: 0 0 0 2px var(--link-color); }
.home-story__screen:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 4px; }
@media (max-width: 1000px) {
    .home-story .home-v3__steps article { grid-template-columns: 1fr; grid-template-rows: auto; }
    .home-story .home-story__screen { grid-column: 1; grid-row: auto; margin-top: 28px; }
}
/* Native posters and task demonstrations share one stable viewport. */
.task-demo{margin:18px 0 0;min-width:0;position:relative}
.task-demo .home-story__screen{margin:0;aspect-ratio:1280/800;overflow:hidden}
.task-demo .home-story__screen img{width:100%;height:100%;object-fit:contain}
.task-demo .home-story__screen[hidden]{display:none}
.task-demo-host{min-width:0}
.task-demo-launch{position:absolute;left:8px;bottom:8px;z-index:2;display:flex}
.task-demo-launch[hidden]{display:none}
.task-demo-launch button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;border:0;border-radius:6px;padding:6px 9px;background:transparent;color:var(--text-color,#19242f);text-shadow:0 0 2px #fff;cursor:pointer}
.task-demo-launch button:hover{opacity:.7}
.task-demo-launch button:focus-visible{outline:2px solid #287bbd;outline-offset:2px}
.task-demo-launch button:disabled{opacity:.55;cursor:wait}
.task-demo[aria-busy="true"] .task-demo-host{position:absolute;visibility:hidden;width:100%;pointer-events:none}
.home-v3__steps .task-demo[data-demo-enhanced] .home-story__screen{aspect-ratio:auto;padding-bottom:0}
.home-v3__steps .task-demo[data-demo-enhanced] .home-story__screen img{aspect-ratio:1280/800;width:100%;height:auto;object-fit:contain}
.task-demo-placeholder{padding-bottom:108px;overflow:hidden;border-radius:6px}
.task-demo-placeholder>div{aspect-ratio:1280/800;background:linear-gradient(90deg,transparent 20%,#81909e20 20% 21%,transparent 21% 79%,#81909e20 79% 80%,transparent 80%),linear-gradient(#81909e20 0 8%,transparent 8% 13%,#81909e12 13% 90%,#81909e20 90%);filter:blur(7px);opacity:.65}
.task-demo-placeholder[hidden]{display:none}
@media(scripting:none){.task-demo-placeholder{display:none}}
@media print{.task-demo-host,.task-demo-launch,.task-demo-placeholder{display:none!important}.task-demo .home-story__screen[hidden]{display:block!important}}