/* Kept outside article prose: typography and action states belong to this component. */
.wf-showcase{max-width:calc(var(--read) + 14rem + 3.5rem);margin:3.5rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.25rem 3rem;align-items:center;color:#f4f4f5}
.wf-intro{min-width:0}.wf-eyebrow{font-size:.65rem;font-weight:750;letter-spacing:.16em;color:#68cbc4;margin:0 0 1.25rem}
.wf-intro h2{font-size:clamp(1.65rem,2.65vw,2.35rem);font-weight:750;letter-spacing:-.04em;line-height:1.12;margin:0 0 1.15rem;color:#f5f5f7}
.wf-description{font-size:.95rem;line-height:1.65;color:#b7b7c1;margin:0 0 1.5rem;max-width:31rem}
.wf-steps{list-style:none;counter-reset:workflow;margin:0 0 1.75rem;padding:0;display:grid;gap:.8rem}
.wf-steps li{counter-increment:workflow;display:flex;align-items:baseline;gap:.75rem;font-size:.8rem;color:#c7c7cf;line-height:1.45}
.wf-steps li::before{content:'0' counter(workflow);font:600 .65rem ui-monospace,monospace;color:#68cbc4;flex-shrink:0}
.wf-showcase .wf-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;background:#3db8b0;color:#092b28;border:1px solid transparent;border-radius:.55rem;padding:.85rem 1rem;text-decoration:none;font-size:.83rem;font-weight:750;line-height:1.3;min-height:44px;transition:background .15s}
.wf-showcase .wf-primary:hover{background:#70d1ca;color:#092b28}.wf-access{color:#a4a4b0;font-size:.69rem;margin:.65rem 0 0;line-height:1.5}
.wf-film{min-width:0;margin:0;width:100%;max-width:330px;justify-self:center}
.wf-film-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:0 0 .8rem;font-size:.57rem;letter-spacing:.12em;color:#92929e}
.wf-film-label{font-size:.75rem;font-weight:600;color:#e4e4e9;letter-spacing:0}
.wf-film video{display:block;width:100%;height:auto;aspect-ratio:390/780;object-fit:contain;background:#121214}
.wf-film video::cue{font:500 15px/1.35 Arial,sans-serif;color:#fff;background:rgba(10,10,12,.9)}
.wf-film figcaption{padding:.65rem 0;color:#a8a8b2;font-size:.65rem;line-height:1.5;border-top:1px solid #303035}.wf-film figcaption span{padding:0 .35rem}
.wf-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid #343439;padding-top:1.25rem}
.wf-footer p{margin:0;font-size:.8rem;line-height:1.6;color:#a9a9b5}.wf-footer a{color:#d6eeeb;text-underline-offset:4px;text-decoration-color:#547671}.wf-footer .wf-start{font-weight:650;font-size:.8rem;text-decoration:none;display:inline-flex;gap:1.25rem;min-height:44px;align-items:center}
.wf-showcase a:focus-visible,.wf-details summary:focus-visible{outline:2px solid #8eebe3;outline-offset:5px;border-radius:4px}
.wf-details{grid-column:1/-1;margin-top:-1.5rem;color:#b4b4bf;font-size:.78rem;line-height:1.65;border-bottom:1px solid #343439;padding-bottom:1rem}
.wf-details summary{cursor:pointer;color:#aaaab6;width:fit-content;padding:.5rem 0;min-height:40px}.wf-details p{max-width:65rem;margin:.75rem 0}
@media(max-width:1100px){.wf-showcase{max-width:48rem;gap:1.75rem;grid-template-columns:minmax(0,1fr)}.wf-intro h2{font-size:2rem}.wf-intro h2 br{display:none}}
@media(max-width:760px){.wf-showcase{grid-template-columns:minmax(0,1fr);max-width:48rem;margin-top:2.25rem;gap:1.5rem}.wf-intro h2{font-size:2rem}.wf-intro h2 br{display:none}.wf-description{margin-bottom:1.25rem}.wf-steps{gap:.6rem;margin-bottom:1.25rem}.wf-film{grid-row:2}.wf-details{margin-top:-.5rem}.wf-film video::cue{font-size:12px}.wf-footer{gap:.35rem}}

/* A quiet device outline on desktop; full usable width on phones. */
.wf-device{padding:7px;border:1px solid #505057;border-radius:32px;background:#080809;box-shadow:0 20px 45px -22px #000;overflow:hidden}
.wf-device video{border-radius:24px}
.wf-caption-panel{padding:.8rem 0 0}
.wf-caption-panel[hidden]{display:none}
.wf-caption-language{display:flex;justify-content:space-between;align-items:center;color:#a8a8b2;font-size:.7rem}
.wf-caption-language select{font:inherit;color:#e4e4e9;background:#242427;border:1px solid #45454e;border-radius:6px;min-height:44px;padding:0 .65rem}
.wf-caption-language select:focus-visible{outline:2px solid #8eebe3;outline-offset:3px}
.wf-caption{font-size:.85rem;line-height:1.55;color:#e4e4e9;min-height:3.1em;margin:.45rem 0 .65rem}
@media(max-width:600px){.wf-film{max-width:none}.wf-device{padding:0;border:0;border-radius:8px;box-shadow:none}.wf-device video{border-radius:8px}}