/* Shared photographic bands. Text, video, and interactions stay above the decorative layers. */
/* Keep the original page lines; opaque photo bands cover them only where assigned. */
body.has-section-backgrounds,
body.has-section-backgrounds::after,
body.has-section-backgrounds #header::before,
body.has-section-backgrounds #daw-strip,
body.has-section-backgrounds .cro-quote,
body.has-section-backgrounds .container-component.style-4 > .wrapper {
  background-color: var(--plain-background-color, #171a1c);
}
body.has-section-backgrounds #home-section { position: relative; isolation: isolate; }
.texture-bands { position: absolute; inset: 0; z-index: -1; margin: 0 !important; pointer-events: none; }
.texture-band { position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; background: #111416; }
.texture-art { position: absolute; inset: -32px; background-image: var(--texture-photo); background-size: cover; background-position: var(--texture-position-x,50%) var(--texture-position,66%); transform:scale(var(--texture-zoom,1));transform-origin:var(--texture-position-x,50%) var(--texture-position,66%); opacity: var(--texture-image,0); filter: contrast(var(--texture-contrast,1.12)) blur(var(--texture-blur,0px)); }
.texture-halftone { position: absolute; inset: -32px; background-image: var(--texture-halftone-image); background-size: cover; background-position: var(--texture-position-x,50%) var(--texture-position,66%); transform:scale(var(--texture-zoom,1));transform-origin:var(--texture-position-x,50%) var(--texture-position,66%); opacity: var(--texture-dots,0); }
.texture-grain { position: absolute; inset: 0; background-image: var(--texture-grain-image); opacity: calc(var(--texture-grain,0) * .35); mix-blend-mode: screen; }
.texture-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 10%, rgba(0,0,0,var(--texture-vignette,0)) 100%); }
body.has-section-backgrounds .process-flow__steps { background: rgba(17,20,22,.77); backdrop-filter: blur(8px); }
body.has-section-backgrounds .faq-item { background-color: rgba(17,20,22,.50); }
body.has-section-backgrounds .faq-container { backdrop-filter: blur(5px); }
body.has-section-backgrounds #container12 { background-image: none; background-color: transparent; }

/* Tunable download fills; text stays readable on charcoal and orange. */
#container06 .buttons-component.style-4 > li > a.download-platform--other,
#container06 .buttons-component.style-4 > li > a.download-platform--unknown {
  background-color: rgba(23,26,28,var(--download-secondary-opacity,.85));
  color: #fff;
}
#container06 .buttons-component.style-4 > li > a.download-platform--current {
  background-color: rgba(255,153,51,var(--download-primary-opacity,.85));
  color: var(--download-primary-text,#000);
}
#container06 .buttons-component.style-4 > li > a.download-platform--current:hover {
  background-color: #ff9933;
  color: #000;
}
/* One shared box: steps on the left, a full-height cover on the right. */
body.has-section-backgrounds .process-flow .process-flow__grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0; align-items: stretch; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(17,20,22,.90);
}
body.has-section-backgrounds .process-flow__steps {
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none;
}
.process-flow__media {display:flex;flex-direction:column;justify-content:center;min-width:0;background:#101315;border-left:1px solid #ffffff18}
.process-flow__media #video03 {width:100%;margin:0}
.process-flow__media #video03:not(.is-active) {height:100%;flex:1}
.process-flow__media #video03:not(.is-active) > .frame {height:100%;min-height:350px;aspect-ratio:auto}
.process-flow__media #video03.is-active > .frame {height:auto;min-height:0;aspect-ratio:var(--video-aspect,16 / 9)}
body.has-section-backgrounds .faq-item {background-image:none}
body.has-section-backgrounds .faq-container {backdrop-filter:none}
/* The empty space below the questions absorbs the longest answer without moving the photo. */
#home-section .faq-container {
  display:flow-root;box-sizing:border-box;
  min-height:var(--faq-min-height,0px);padding-bottom:20px;margin-top:24px;
}
/* Compact the trimmed FAQ without changing typography or its expansion reserve. */
#home-section .faq-item { margin-bottom:10px; }
#home-section .faq-question { padding-top:16px;padding-bottom:16px; }
#home-section .faq-item[open] .faq-question { padding-bottom:12px; }
#home-section #embed01 { margin-bottom:24px; }
@media(max-width:768px) {
  #home-section .faq-question { padding-top:14px;padding-bottom:14px; }
}
@media(max-width:620px) {
  body.has-section-backgrounds .process-flow__steps {margin-top:0}
  .process-flow__media {border-left:0;border-bottom:1px solid #ffffff18}
  .process-flow__media #video03:not(.is-active) {height:auto;flex:initial}
  .process-flow__media #video03:not(.is-active) > .frame {height:auto;min-height:0;aspect-ratio:16 / 10}
}

#daw-strip .daw-fl-wordmark {color:#fff;font:700 18px/1 Inter,Arial,sans-serif;letter-spacing:-.03em;white-space:nowrap;opacity:.85}

/* The box is decorative: original column widths, text styles, and spacing stay intact. */
#container12.export-options-card > .wrapper > .inner { position: relative; isolation: isolate; }
#container12.export-options-card > .wrapper > .inner::before {
  content: ''; position: absolute; inset: -28px -24px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(17,20,22,var(--export-card-opacity,.57));
}
#container12.export-options-card > .wrapper > .inner::after {
  content: ''; position: absolute; top: -28px; bottom: -28px; left: 33.333333%; width: 33.333333%;
  z-index: -1; pointer-events: none; border-left: 1px solid rgba(255,255,255,.14); border-right: 1px solid rgba(255,255,255,.14);
}
@media(max-width:736px) {
  #container12.export-options-card > .wrapper { width: calc(100% - 48px); }
  #container12.export-options-card > .wrapper > .inner::before { inset: -20px -12px; }
  #container12.export-options-card > .wrapper > .inner::after { display: none; }
}

.process-flow__steps { min-height: var(--process-steps-min-height,0px); }

/* Leave more of the photo visible between the export box and its section divider. */
#container12.export-options-card:not(:last-child) { margin-bottom: 58px !important; }

/* A real tutorial frame, fitted without cropping. The fill matches its edges. */
.process-flow__media #video03:not(.is-active) > .frame,
.process-flow__media #video03 .animated-video__preview { background: #0e1213; }
.process-flow__media #video03 .animated-video__preview img { object-fit: contain; }