/* An editorial source-to-formats diagram inside the existing expanding reel. */
#ov-direct .content-flow{height:max(660px,calc(100svh - 32px))}
#ov-direct .content-flow .reel{background:#111622;cursor:default;border-radius:6px}
#ov-direct .flow-composition{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,64px);color:#f1f0ed}
#ov-direct .flow-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}
#ov-direct .flow-heading h2{font-size:clamp(34px,4.2vw,62px);line-height:1.04;letter-spacing:-.035em;font-weight:500;margin:0;max-width:none}
#ov-direct .flow-heading h2 span{color:#b7accd}
#ov-direct .flow-heading>p{font-size:clamp(16px,1.7vw,23px);line-height:1.3;margin:0 0 3px;color:#c5c1d1}
#ov-direct .flow-diagram{display:grid;grid-template-columns:21% 7% 12% 7% 53%;align-items:center;position:relative;margin:32px 0}
#ov-direct .flow-piece{min-width:0;position:relative;z-index:1}
#ov-direct .flow-diagram h3{font-size:clamp(14px,1.45vw,21px);font-weight:500;line-height:1.2;margin:18px 0 6px;letter-spacing:-.015em}
#ov-direct .flow-diagram p{font-size:clamp(12px,1.08vw,15px);line-height:1.35;color:#c5c1d1;margin:0}
#ov-direct .flow-document{width:100%;aspect-ratio:4/5;background:#f1f0ed;color:#111622;padding:clamp(14px,1.7vw,26px);display:flex;flex-direction:column;border-radius:3px;transform:rotate(-4deg);box-shadow:8px 12px 24px #070b1140}
#ov-direct .flow-document-type,#ov-direct .flow-document-note{font-size:clamp(8px,.8vw,11px);letter-spacing:.025em}
#ov-direct .flow-document strong{font-size:clamp(20px,2.5vw,35px);line-height:1.05;letter-spacing:-.035em;font-weight:500;margin:22px 0}
#ov-direct .flow-document i{width:100%;height:2px;background:#c7c5c2;display:block;margin:0 0 8px}
#ov-direct .flow-document i:nth-of-type(3){width:60%}
#ov-direct .flow-document-note{margin-top:auto;padding-top:16px}
#ov-direct .flow-link{height:1px;background:#70627f;position:relative;margin-bottom:65px}
#ov-direct .flow-link i{display:block;position:absolute;inset:-1px 0;background:#04c5e4;transform-origin:left;opacity:.75}
#ov-direct .flow-hub{text-align:center;margin-bottom:26px}
#ov-direct .flow-hub>div{width:80px;height:80px;max-width:100%;margin:auto;border:1px solid #8a43f6;border-radius:50%;display:grid;place-items:center;background:#24163d}
#ov-direct .flow-hub img{width:35px;height:42px;object-fit:contain}
#ov-direct .flow-hub>span{display:block;margin-top:12px;font-size:clamp(11px,1.02vw,14px);line-height:1.3;color:#c5c1d1}
#ov-direct .flow-outputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative}
#ov-direct .flow-branches{position:absolute;top:-42px;left:-1px;width:100%;height:55px;overflow:visible;fill:none;stroke:#70627f;stroke-width:1;vector-effect:non-scaling-stroke}
#ov-direct .flow-preview-area{height:225px;display:flex;align-items:center;position:relative}
#ov-direct .flow-film{background:#5421d0;aspect-ratio:16/10;width:100%;padding:14px 12px;display:flex;flex-direction:column;border-radius:5px}
#ov-direct .flow-film>span,#ov-direct .flow-phone>span,#ov-direct .flow-post>span{font-size:clamp(7px,.65vw,10px);letter-spacing:.025em}
#ov-direct .flow-film strong{font-size:clamp(16px,1.8vw,26px);font-weight:500;line-height:1.04;letter-spacing:-.02em;display:block;margin:14px 0}
#ov-direct .flow-film-bottom{display:flex;align-items:center;gap:8px;margin-top:auto}
#ov-direct .flow-film-bottom svg{width:16px;height:16px;fill:#f1f0ed}
#ov-direct .flow-film-bottom i{height:2px;flex:1;background:#bfb0e2}
#ov-direct .flow-film-bottom span{font-size:8px}
#ov-direct .flow-phone{background:#8a43f6;color:#111622;aspect-ratio:9/16;height:100%;max-width:100%;padding:16px 12px;border-radius:12px;display:flex;flex-direction:column;position:relative;margin:auto}
#ov-direct .flow-phone strong{font-size:clamp(23px,2.45vw,36px);line-height:.96;font-weight:500;letter-spacing:-.035em;margin:auto 0}
#ov-direct .flow-phone em{font-style:normal;color:#f1f0ed}
#ov-direct .flow-phone small{font-size:9px;align-self:end;margin-top:12px}
#ov-direct .flow-short-bottom{display:flex;align-items:center;gap:3px;height:17px}
#ov-direct .flow-short-bottom i{width:3px;background:#111622;height:40%}
#ov-direct .flow-short-bottom i:nth-child(2n){height:80%}
#ov-direct .flow-short-bottom i:nth-child(3n){height:100%}
#ov-direct .flow-post{aspect-ratio:1;width:100%;padding:15px 12px;background:#04c5e4;color:#111622;display:flex;flex-direction:column;position:relative;border-radius:3px;box-shadow:6px 7px 0 -1px #111622,7px 8px 0 0 #70627f}
#ov-direct .flow-post strong{font-size:clamp(17px,1.9vw,27px);line-height:1.02;font-weight:500;letter-spacing:-.035em;margin:18px 0 auto}
#ov-direct .flow-post svg{height:28px;width:80px;max-width:80%;stroke:#111622;stroke-width:2;fill:none;margin-top:10px}
#ov-direct .flow-post small{font-size:9px;align-self:end}
#ov-direct .flow-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;border-top:1px solid #454050;font-size:15px;color:#c5c1d1}
#ov-direct .flow-replay{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;color:#f1f0ed;background:transparent;border:1px solid #70627f;border-radius:24px;padding:10px 16px;min-height:44px;white-space:nowrap;cursor:pointer;transition:background 180ms ease}
#ov-direct .flow-replay svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none}
#ov-direct .flow-replay:focus-visible{outline:2px solid #04c5e4;outline-offset:4px}
@media(hover:hover) and (pointer:fine){#ov-direct .flow-replay:hover{background:#38234e}}
#ov-direct .content-flow.flow-playing .flow-piece{animation:flow-arrive 800ms var(--ease-out) both}
#ov-direct .content-flow.flow-playing .flow-hub{animation-delay:350ms}
#ov-direct .content-flow.flow-playing .flow-long{animation-delay:850ms}
#ov-direct .content-flow.flow-playing .flow-short{animation-delay:1100ms}
#ov-direct .content-flow.flow-playing .flow-social{animation-delay:1350ms}
#ov-direct .content-flow.flow-playing .flow-link i{animation:flow-connect 700ms var(--ease-out) both;animation-delay:250ms}
#ov-direct .content-flow.flow-playing .flow-link-out i{animation-delay:650ms}
#ov-direct .content-flow.flow-playing .flow-branches{animation:flow-arrive 650ms var(--ease-out) both;animation-delay:700ms}
@keyframes flow-arrive{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes flow-connect{from{transform:scaleX(.05);opacity:.2}to{transform:scaleX(1);opacity:.75}}
#ov-direct[data-motion=false] .content-flow .flow-piece,#ov-direct[data-motion=false] .content-flow .flow-branches,#ov-direct[data-motion=false] .content-flow .flow-link i,.motion-off #ov-direct .content-flow .flow-piece,.motion-off #ov-direct .content-flow .flow-branches,.motion-off #ov-direct .content-flow .flow-link i{animation:none!important}
@media(prefers-reduced-motion:reduce){#ov-direct .content-flow .flow-piece,#ov-direct .content-flow .flow-branches,#ov-direct .content-flow .flow-link i{animation:none!important}}
@media(min-width:760px) and (max-height:700px){#ov-direct .flow-composition{padding:28px 4vw}#ov-direct .flow-preview-area{height:180px}#ov-direct .flow-diagram{margin:18px 0}#ov-direct .flow-heading h2{font-size:38px}#ov-direct .flow-document{aspect-ratio:1}#ov-direct .flow-document strong{margin:15px 0}}
@media(max-width:759px){
 #ov-direct .content-flow{height:760px;margin-top:55px;margin-bottom:65px}
 #ov-direct .flow-composition{padding:28px 22px}
 #ov-direct .flow-heading{display:block}
 #ov-direct .flow-heading h2{font-size:36px}
 #ov-direct .flow-heading>p{font-size:16px;margin-top:14px}
 #ov-direct .flow-heading>p br{display:none}
 #ov-direct .flow-diagram{grid-template-columns:1fr 62px 1fr;gap:0;margin:24px 0 16px}
 #ov-direct .flow-source{grid-column:1;grid-row:1}
 #ov-direct .flow-document{max-width:145px;aspect-ratio:4/4.5;padding:13px}
 #ov-direct .flow-document strong{font-size:23px;margin:16px 0}
 #ov-direct .flow-document-type,#ov-direct .flow-document-note{font-size:8px}
 #ov-direct .flow-document i{margin-bottom:6px}
 #ov-direct .flow-document-note{padding-top:8px}
 #ov-direct .flow-link-in{grid-column:2;grid-row:1;margin-bottom:55px}
 #ov-direct .flow-hub{grid-column:3;grid-row:1;margin-bottom:34px}
 #ov-direct .flow-hub>div{width:64px;height:64px}
 #ov-direct .flow-hub>span{font-size:12px}
 #ov-direct .flow-link-out{display:none}
 #ov-direct .flow-outputs{grid-column:1/-1;grid-row:2;gap:12px;margin-top:40px}
 #ov-direct .flow-branches{top:-26px;height:30px}
 #ov-direct .flow-diagram h3{font-size:14px;margin-top:12px}
 #ov-direct .flow-diagram p{font-size:12px}
 #ov-direct .flow-source p{max-width:150px}
 #ov-direct .flow-preview-area{height:145px}
 #ov-direct .flow-film{padding:9px 7px}
 #ov-direct .flow-film strong{font-size:16px;margin:10px 0}
 #ov-direct .flow-film-bottom{gap:4px}
 #ov-direct .flow-film-bottom svg{width:12px;height:12px}
 #ov-direct .flow-phone{padding:11px 8px;border-radius:8px}
 #ov-direct .flow-phone strong{font-size:23px}
 #ov-direct .flow-phone>span,#ov-direct .flow-post>span,#ov-direct .flow-film>span{font-size:6px}
 #ov-direct .flow-short-bottom{height:12px}
 #ov-direct .flow-post{padding:9px 8px}
 #ov-direct .flow-post strong{font-size:17px;margin-top:12px}
 #ov-direct .flow-caption{font-size:12px;padding-top:16px;align-items:center}
 #ov-direct .flow-caption>span{max-width:160px}
 #ov-direct .flow-replay{font-size:12px;padding:9px 12px}
}

/* Continuous connectors measured against the actual format previews. */
#ov-direct .flow-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#847593;stroke-width:1;pointer-events:none}
#ov-direct .flow-wires path{vector-effect:non-scaling-stroke}
#ov-direct .flow-wire-input{stroke:#04c5e4}
#ov-direct .flow-link,#ov-direct .flow-branches{visibility:hidden}
#ov-direct .content-flow.flow-playing .flow-wires{animation:flow-arrive 900ms var(--ease-out) both;animation-delay:300ms}
#ov-direct[data-motion=false] .content-flow .flow-wires,.motion-off #ov-direct .content-flow .flow-wires{animation:none!important}
@media(prefers-reduced-motion:reduce){#ov-direct .content-flow .flow-wires{animation:none!important}}