/* Scoped About component only. No global selectors or existing tracking modifications. */
.fourk-workflow { color: #151515; background: #FFFFFF; padding-block: 32px; }
.fourk-workflow h2 { margin: 0 0 20px; padding-left: 16px; border-left: 5px solid #E31E24; font-size: clamp(24px,2.5vw,32px); line-height: 1.4; }
.fourk-workflow-viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #E31E24 #eee; scrollbar-width: auto; }
.fourk-workflow-image { display: block; width: 100%; height: auto; max-width: none; }
.fourk-workflow-help { display: none; margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.fourk-workflow-controls { display: none; gap: 12px; margin-top: 16px; }
.fourk-workflow-controls button { min-height: 44px; padding: 10px 20px; color: #FFFFFF; background: #E31E24; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.fourk-workflow-controls button:disabled { color: #555; background: #eee; cursor: default; }
.fourk-workflow :focus-visible { outline: 3px solid #151515; outline-offset: 3px; }
.fourk-workflow-viewport:focus-visible { outline-offset: -3px; }
.fourk-workflow [hidden] { display: none !important; }
@media (max-width: 1024px) {
  .fourk-workflow-image { min-width: 1440px; }
  .fourk-workflow-help { display: block; }
  .fourk-workflow-controls:not([hidden]) { display: flex; }
}

/* Same original artwork: overview plus existing readable scroll region. */
.fourk-workflow-overview { display:none; width:100%; height:auto; }
@media(max-width:1024px) { .fourk-workflow-overview { display:block; margin-bottom:20px; } }