/* Compact, illustrative Frame.io workflow. MotaMedia owns the surrounding identity. */
.review-studio{border-block:1px solid var(--line);background:linear-gradient(125deg,#101523,#0b0f19 75%)}
.fio-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center}
.fio-intro{min-width:0}.fio-intro h2{font-size:clamp(34px,3.7vw,53px);line-height:1.08}.fio-description{color:var(--muted);max-width:42ch;margin-top:25px;font-size:15px;line-height:1.8}.fio-included{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:23px;color:#efefef}.fio-included svg{width:19px;height:19px;color:var(--gold);flex-shrink:0}
.fio-tool-link{display:flex;align-items:center;gap:10px;margin-top:27px;width:max-content;max-width:100%;min-height:44px}.fio-tool-link>span:first-child{font-size:11px;color:var(--muted);margin-right:8px}.fio-tool-link strong{font-size:16px;letter-spacing:-.04em}.fio-tool-link>span:last-child{color:var(--gold);margin-left:4px}.fio-tool-link img{width:22px;height:25px;object-fit:contain}.fio-tool-link:hover strong{color:var(--gold)}
.fio-demo{min-width:0;--fio-accent:#ad9cff}.fio-window{border:1px solid #3e404c;background:#17181e;border-radius:12px;overflow:hidden;box-shadow:0 22px 52px #0003}.fio-toolbar{display:flex;align-items:center;min-height:53px;gap:10px;padding:0 12px 0 17px;border-bottom:1px solid #303139;background:#212228}.fio-brand{display:flex;align-items:center;gap:8px;white-space:nowrap}.fio-brand img{object-fit:contain}.fio-brand strong{font-size:14px;letter-spacing:-.04em;color:#fcfcfc}.fio-demo-label{margin-left:auto;color:#a6a6b2;font-size:8px;letter-spacing:.13em}.fio-pause{height:44px;min-width:44px;padding:12px;background:transparent;border-radius:6px}.fio-pause:hover{background:#ffffff12}.fio-pause svg{width:17px;height:17px;display:block}.fio-file{height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;border-bottom:1px solid #303139}.fio-file>span:first-child{display:flex;align-items:center;gap:7px;font-size:11px}.fio-file b{font-weight:500;font-size:9px;line-height:1.4;padding:2px 4px;background:#363740;border-radius:3px;color:#c8c8d0}.fio-status{font-size:9px;font-weight:500;padding:3px 7px;border:1px solid #665881;border-radius:4px;color:#d0bcff;white-space:nowrap}.fio-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.fio-player{position:relative;background:#090a0d;min-width:0;height:295px;overflow:hidden}.fio-player>img{width:100%;height:100%;object-fit:contain}.fio-anchor{position:absolute;top:55%;left:60%;width:23px;height:23px;background:#7961da;border:2px solid white;border-radius:50%;font-size:10px;display:grid;place-items:center;box-shadow:0 2px 12px #0007;transition:opacity .25s,transform .25s}.fio-player-bar{display:flex;align-items:center;gap:6px;position:absolute;inset:auto 0 0;height:38px;padding:0 9px;background:#111216e8;font:9px/1.4 ui-monospace,monospace;color:#ddd}.fio-player-bar>svg{width:12px;height:12px;flex-shrink:0}.fio-timeline{position:relative;flex:1;height:3px;background:#5b5d67}.fio-timeline i{position:absolute;left:0;top:0;height:100%;width:100%;transform:scaleX(.15);transform-origin:left;background:var(--fio-accent);transition:transform .65s ease}.fio-timeline b{position:absolute;left:15%;top:50%;height:7px;width:7px;border-radius:50%;transform:translate(-50%,-50%);background:#e7e3ff;transition:left .65s ease}
.fio-discussion{border-left:1px solid #303139;padding:18px 18px 12px;min-width:0}.fio-discussion-label{font-size:10px;color:#b9b9c4;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #35353f;padding-bottom:13px;margin-bottom:21px}.fio-discussion-label>span{font-size:9px;border:1px solid #42434c;border-radius:4px;padding:1px 5px}.fio-comment-author{display:block;font-weight:600;font-size:12px;color:#f5f5f9}.fio-timecode{display:block;width:max-content;color:#c2b0ff;background:#8d71e31a;font:10px/1.4 ui-monospace,monospace;padding:3px 5px;border-radius:3px;margin-top:8px}.fio-comment-text{font-size:12px;color:#dfdfe7;line-height:1.7;margin:12px 0 20px}.fio-comment-tag{display:flex;align-items:flex-start;gap:6px;font-size:9px;line-height:1.5;color:#b9b5c8}.fio-comment-tag svg{width:13px;height:13px;flex-shrink:0;color:var(--fio-accent)}
.fio-steps{display:flex;gap:4px;margin-top:14px}.fio-steps>button{display:flex;justify-content:center;align-items:center;gap:8px;flex:1;padding:9px 5px;min-height:46px;border-radius:5px;background:transparent;color:#9da4b5;font-size:11px;white-space:nowrap;position:relative;transition:color .2s,background .2s}.fio-steps>button>span{font-size:9px;opacity:.7}.fio-steps>button:before{content:'';position:absolute;inset:0 0 auto;height:1px;background:#3b4050}.fio-steps>button[aria-pressed=true]{color:var(--gold);background:#dfbd7b08}.fio-steps>button[aria-pressed=true]:before{background:var(--gold)}.fio-steps>button:hover{color:#fff;background:#ffffff08}.fio-caption{min-height:34px;text-align:center;margin-top:9px;color:#d3d5dd;font-size:11px;line-height:1.6;padding-inline:6px}.fio-illustration-note{text-align:center;color:#949aab;font-size:9px;line-height:1.5;margin-top:2px}
.fio-demo[data-step="1"] .fio-timeline i{transform:scaleX(.43)}.fio-demo[data-step="1"] .fio-timeline b{left:43%}.fio-demo[data-step="1"] .fio-anchor{opacity:0;transform:scale(.65)}.fio-demo[data-step="2"] .fio-timeline i{transform:scaleX(1)}.fio-demo[data-step="2"] .fio-timeline b{left:100%}.fio-demo[data-step="2"] .fio-anchor{opacity:0;transform:scale(.65)}.fio-demo[data-step="2"] .fio-status{color:#abe4c4;border-color:#426454;background:#73c3970a}.fio-demo[data-step="2"] .fio-comment-tag{color:#abe4c4}.fio-demo[data-step="2"] .fio-comment-tag svg{color:#abe4c4}.fio-demo.is-enhanced [data-fio-scene]:not([hidden]){animation:fio-scene-enter .42s cubic-bezier(.2,.7,.3,1) both}@keyframes fio-scene-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.fio-layout{gap:34px;grid-template-columns:.95fr 1.1fr}.fio-discussion{padding:14px 12px}.fio-description{font-size:14px}.fio-comment-text{font-size:11px}.fio-player{height:282px}.fio-caption{font-size:10px}.fio-included{font-size:12px}}
@media(max-width:780px){.fio-layout{grid-template-columns:1fr;gap:35px}.fio-intro{max-width:580px}.fio-intro h2{font-size:clamp(34px,6.3vw,46px)}.fio-description{max-width:52ch;margin-top:20px}.fio-included{margin-top:19px}.fio-tool-link{margin-top:18px}.fio-demo{width:100%;max-width:610px;margin-inline:auto}.fio-player{height:310px}.fio-comment-text{font-size:13px}.fio-discussion{padding:18px 20px}.fio-caption{font-size:12px}.fio-steps>button{font-size:12px}}
@media(max-width:440px){.fio-toolbar{padding-left:12px}.fio-demo-label{font-size:7px;letter-spacing:.1em}.fio-file{padding-inline:11px}.fio-file>span:first-child{font-size:10px}.fio-status{font-size:8px}.fio-player{height:264px}.fio-workspace{grid-template-columns:1.15fr 1fr}.fio-discussion{padding:13px 11px}.fio-discussion-label{font-size:9px;margin-bottom:16px}.fio-comment-author{font-size:11px}.fio-comment-text{font-size:11px;line-height:1.65}.fio-comment-tag{font-size:8px}.fio-steps>button{font-size:10px;gap:6px;min-height:46px}.fio-caption{font-size:10px;min-height:33px}.fio-illustration-note{font-size:8px}.fio-tool-link{gap:8px}.fio-tool-link>span:first-child{font-size:10px}.fio-player-bar{font-size:8px;padding-inline:6px;gap:5px}}
@media(prefers-reduced-motion:reduce){.fio-demo.is-enhanced [data-fio-scene]:not([hidden]){animation:none}.fio-demo *{transition:none!important}}

/* The PC Jolicoeur example is genuine 16:9 footage: preserve its full frame. */
.fio-workspace{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:stretch}
.fio-player{height:auto;aspect-ratio:16/9;align-self:center}
.fio-player>video,.fio-player>.fio-poster-fallback{display:block;width:100%;height:100%;object-fit:contain}
.fio-player-bar{height:27px;background:#111216cf}
.fio-discussion{padding:15px 14px;min-height:210px}
.fio-discussion-label{margin-bottom:14px;padding-bottom:10px}
.fio-comment-text{margin:10px 0 14px}
@media(max-width:1050px){.fio-discussion{padding:12px 10px;min-height:205px}.fio-comment-text{font-size:11px}.fio-player{height:auto}}
@media(max-width:780px){.fio-workspace{grid-template-columns:1.6fr 1fr}.fio-discussion{min-height:218px;padding:16px}.fio-comment-text{font-size:12px}.fio-player{height:auto}}
@media(max-width:540px){.fio-workspace{grid-template-columns:1fr}.fio-player{height:auto;aspect-ratio:16/9}.fio-discussion{border-left:0;border-top:1px solid #303139;display:grid;grid-template-columns:88px minmax(0,1fr);gap:15px;padding:14px;min-height:147px}.fio-discussion-label{border-bottom:0;align-items:flex-start;justify-content:flex-start;gap:7px;margin:0;padding:1px 0}.fio-comment-author{font-size:11px}.fio-timecode{display:inline-block;margin-top:5px}.fio-comment-text{font-size:11px;line-height:1.55;margin:7px 0 9px}.fio-comment-tag{font-size:9px}.fio-caption{min-height:33px}.fio-player-bar{height:29px}}