.real-world{width:min(1160px,calc(100% - 48px));margin:80px auto 90px;color:var(--ink)}
.real-world h2{text-align:center;font-size:32px;font-weight:600;letter-spacing:-.5px;margin:0 0 14px}
.flight-intro{text-align:center;margin:0 auto 30px;font-size:17px;line-height:1.7;color:#555}
.flight-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:start;transition:grid-template-columns .5s ease}
.flight-grid[data-active="0"]{grid-template-columns:2.2fr .7fr .7fr}
.flight-grid[data-active="1"]{grid-template-columns:.7fr 2.2fr .7fr}
.flight-grid[data-active="2"]{grid-template-columns:.7fr .7fr 2.2fr}
.flight-example{margin:0;min-width:0;transition:opacity .4s ease}
.flight-example:nth-child(1){--flight-border:#638ff5;--flight-title:#216cae}
.flight-example:nth-child(2){--flight-border:#62d7a8;--flight-title:#217650}
.flight-example:nth-child(3){--flight-border:#ffa34d;--flight-title:#9a650f}
.flight-grid[data-active="0"] .flight-example:not(.is-active),.flight-grid[data-active="1"] .flight-example:not(.is-active),.flight-grid[data-active="2"] .flight-example:not(.is-active){opacity:.4}
.flight-example figcaption{text-align:center;margin:0 0 12px;line-height:1.5}
.flight-example figcaption strong{font-size:21px;font-weight:600;transition:color .8s ease}
.flight-example.has-playback figcaption strong{color:var(--flight-title)}
.flight-example video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111;border-radius:4px}
.flight-player{position:relative;border-radius:4px;box-shadow:0 0 0 0 transparent;transition:box-shadow .5s ease}
.flight-example.has-playback .flight-player{box-shadow:0 0 0 4px var(--flight-border)}
.flight-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.flight-play[hidden]{display:none}
.flight-play span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(35,35,35,.68);color:#fff;font-size:21px;padding-left:3px;box-sizing:border-box;transition:background .2s ease}
.flight-play:hover span{background:rgba(35,35,35,.9)}
.flight-play:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.flight-example video:focus-visible,.flight-caption a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.flight-caption{max-width:1100px;margin:24px auto 0;text-align:center;font-size:16px;color:#626c75;line-height:1.8}
.flight-caption a{color:#526778;text-decoration:underline;text-decoration-color:#bdc8d1;text-underline-offset:4px}
.flight-caption a:hover{color:#287bc1;text-decoration-color:currentColor}
.flight-error{font-size:14px;color:#626c75;line-height:1.5}.flight-error[hidden]{display:none}
@media(max-width:760px){.real-world{width:calc(100% - 24px);margin:54px auto 64px}.real-world h2{font-size:28px}.flight-intro{font-size:16px}.flight-grid,.flight-grid[data-active]{grid-template-columns:1fr;gap:28px;max-width:600px;margin:auto}.flight-caption{font-size:15px}}
@media(prefers-reduced-motion:reduce){.flight-grid,.flight-example,.flight-player,.flight-example figcaption strong{transition:none}}
