/* Homepage only: preserve the green brand around a cooler product workspace. */
.product-first #workflow-showcase .demo-style-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; grid-column:1/-1; }
.product-first #workflow-showcase .demo-style-sample { padding:8px 3px; min-width:0; min-height:68px; border:1px solid #aecdbb; border-radius:6px; background:#fafffc; color:#214e3b; cursor:pointer; font-size:10px; line-height:1.4; }
.product-first #workflow-showcase .demo-style-sample[aria-pressed=true] { outline:2px solid #247259; outline-offset:1px; background:#efffcf; }
.product-first #workflow-showcase .demo-style-sample:focus-visible { outline:3px solid #247259; outline-offset:2px; }
.product-first #workflow-showcase .style-sample-ink { display:block; padding:10px 2px; margin-bottom:5px; border-radius:3px; background:#17352d; color:white; font-size:13px; font-weight:900; text-shadow:1px 2px #000,0 0 7px #00baff; }
.product-first #workflow-showcase .still-editor .interactive-caption canvas + canvas { margin-top:-25px; }
.product-first #workflow-showcase [data-style=electric_gold] .style-sample-ink { color:#ffcf19; }
.product-first #workflow-showcase [data-style=comic] .style-sample-ink { color:#ffbc19; text-shadow:2px 2px #000,3px 3px #b86016; }
.product-first #workflow-showcase .style-sample-ink { height:48px; padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-first #workflow-showcase .style-sample-ink canvas { width:100%; height:48px; object-fit:contain; }
.product-first #workflow-showcase .style-sample-ink .comic-word { font-size:21px; }
.product-first #workflow-showcase .result-account-link { display:block; max-width:244px; margin:14px auto 0; text-align:center; font-size:14px; padding:12px 10px; box-sizing:border-box; }
@media(max-width:760px){.product-first #workflow-showcase .result-account-link { display:none; }}
@media(min-width:761px){.product-first #workflow-showcase .hero-trial { display:none !important; }}
@media(min-width:1000px) {
 .product-first #workflow-showcase[data-interactive-language] .workflow-steps { grid-template-columns:minmax(0,.65fr) minmax(0,1.55fr) minmax(0,.85fr); gap:28px; }
 .product-first #workflow-showcase[data-interactive-language] .workflow-step:nth-child(2) { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(128px,1fr); column-gap:14px; align-items:start; }
 .product-first #workflow-showcase[data-interactive-language] .workflow-step:nth-child(2) > :is(.workflow-number,h3,.workflow-description,.workflow-settings) { grid-column:1/-1; }
 .product-first #workflow-showcase[data-interactive-language] .workflow-step:nth-child(2) .workflow-style { grid-column:1; grid-row:3; }
 .product-first #workflow-showcase[data-interactive-language] .homepage-settings { grid-column:2; grid-row:3; display:flex; flex-direction:column; max-width:none; width:100%; padding:0; margin:0; gap:12px; }
 .product-first #workflow-showcase .homepage-settings .demo-style-samples { grid-template-columns:1fr; gap:8px; }
 .product-first #workflow-showcase .homepage-settings .demo-style-sample { min-height:65px; font-size:11px; }
}
.product-first #ozavio-motion-preview .oz-stage { opacity:1 !important; }
.product-first #workflow-showcase :is(.workflow-note,.demo-evidence) { display: none; }
.product-first .hero-copy .demo-entry-hint {
  display: block; flex-basis: 100%; order: 1;
  font-size: 13px; line-height: 1.5; color: #3d5359;
  margin-top: 8px;
}
.product-first .hero-copy .actions { row-gap: 8px; }
.product-first .hero-copy .actions .mobile-account-entry { order: 2; }
.product-first #workflow-showcase .saved-clip-proposals { margin:16px 0; padding:12px 0; border-block:1px solid #cedee7; max-width:560px; font-size:14px; }
.product-first #workflow-showcase .saved-clip-proposals h3 { color:#176653; font-size:14px; font-weight:600; line-height:1.5; margin:0; }
.product-first #workflow-showcase .saved-clip-proposals p { font-size:13px; margin:10px 0; }
.product-first #workflow-showcase .saved-clip-proposals ol { margin:10px 0; padding-left:26px; font-variant-numeric:tabular-nums; }
.product-first #workflow-showcase .saved-clip-proposals li { padding:5px 0; }
.product-first #workflow-showcase .account-three-lines span { display:block; margin-bottom:5px; }
.product-first #workflow-showcase .clip-selection-path {
  display:flex; flex-wrap:wrap; gap:10px 24px; padding:0; margin:12px 0 24px;
  list-style:none; font-size:14px; line-height:1.5; color:#176653;
}
.product-first #workflow-showcase .clip-selection-path li:not(:last-child)::after { content:' \2192'; margin-left:14px; }
.product-first #workflow-showcase .source-excerpt { max-width:240px; border-left:3px solid #176653; padding:8px 12px; margin-top:16px; }
.product-first #workflow-showcase .source-excerpt > * { display:block; }
.product-first #workflow-showcase .source-excerpt strong { font-size:13px; }
.product-first #workflow-showcase .source-excerpt span { font-size:14px; margin:6px 0; font-variant-numeric:tabular-nums; }
.product-first #workflow-showcase .source-excerpt small { font-size:12px; line-height:1.5; color:#3d5359; }
.product-first .intro #workflow-showcase {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 28px 0 0;
  padding: 32px max(24px, calc((100% - 1120px) / 2));
  background: #e7f2eb;
  border-top: 1px solid #e7f2eb;
  border-bottom: 1px solid #d0e3d7;
  border-radius: 0;
}
.product-first #workflow-showcase .saved-clip-proposals ol { padding:0; list-style:none; }
.product-first #workflow-showcase .saved-clip-proposals li { display:flex; align-items:center; gap:12px; border-bottom:1px solid #d8e5df; padding:6px 0; }
.product-first #workflow-showcase .saved-clip-proposals li img { width:48px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.product-first #workflow-showcase .saved-clip-proposals li strong { display:block; margin-bottom:5px; font-size:14px; }
.product-first #workflow-showcase .saved-clip-proposals li span { font-size:12px; }
.product-first #workflow-showcase .workflow-steps { gap: 28px; align-items: start; }
.product-first #workflow-showcase[data-interactive-language] .workflow-number::after { background: #d3dfe7; }
.product-first #workflow-showcase[data-interactive-language] .workflow-media {
  border: 1px solid #c6d5df;
  box-shadow: 0 4px 14px #193a5010;
}
.product-first #workflow-showcase[data-interactive-language] :is(.workflow-style,.workflow-result) {
  width: 100%; max-width: 244px;
  border: 4px solid #fafffc;
  outline: 1px solid #aac9b8;
  border-radius: 8px;
  box-shadow: 0 12px 28px #153d2820, 0 2px 5px #153d2814;
}
.product-first #workflow-showcase .workflow-style { margin-bottom: 0; }
.product-first #workflow-showcase .homepage-settings {
  width: 100%; max-width: 244px;
  margin: 0 auto 12px;
  padding: 10px 4px 0;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  gap: 6px;
}
.product-first #workflow-showcase .homepage-settings select {
  border-color: #aac9b8; background: #fafffc; font-size: 13px;
}
.product-first #workflow-showcase .homepage-settings .demo-more-options { border-color: #cedee7; }
.product-first #workflow-showcase .homepage-settings .demo-swatch { width: 40px; height: 40px; }
.product-first #workflow-showcase .workflow-description { color: #3d5359; }
.product-first #workflow-showcase .workflow-details { border-color: #cedee7; }
@media (min-width:761px) {
  .product-first #workflow-showcase .workflow-step { position:relative; }
  .product-first #workflow-showcase .workflow-step:not(:last-child)::after {
    content:'\2192'; position:absolute; top:170px; right:-26px;
    width:24px; text-align:center; color:#247259; font-size:24px;
    pointer-events:none; animation:demo-step-flow 3s ease-in-out 3;
  }
  .product-first #workflow-showcase .workflow-step:nth-child(2)::after { animation-delay:.5s; }
  .product-first #workflow-showcase .workflow-steps {
    grid-template-columns: minmax(0,.72fr) minmax(0,1fr) minmax(0,1fr);
    gap: 32px;
  }
  .product-first #workflow-showcase .workflow-step:first-child .workflow-media {
    max-width: 240px;
  }
  .product-first #workflow-showcase .workflow-step:first-child .workflow-description {
    max-width: 240px;
  }
  .product-first #workflow-showcase .homepage-settings {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 10px;
  }
  .product-first #workflow-showcase .homepage-settings > * { min-width: 0; }
  .product-first #workflow-showcase .homepage-settings > :is(label,fieldset) { grid-column: auto; }
  .product-first #workflow-showcase .homepage-settings .demo-swatch { width: 28px; height: 28px; }
  .product-first #workflow-showcase .homepage-settings select { padding-left: 6px; font-size: 12px; }
  .product-first #workflow-showcase .homepage-settings .demo-more-options {
    grid-column: 1 / -1;
  }
}
@keyframes demo-step-flow {
  0%,100% { transform:translateX(-2px); opacity:.45; }
  50% { transform:translateX(3px); opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .product-first #workflow-showcase .workflow-step::after { animation:none !important; }
}
@media (max-width:760px) {
  .product-first .intro .hero-copy { padding-top:16px; padding-bottom:12px; }
  .product-first .intro .hero-copy .eyebrow { display:none; }
  .product-first .intro .hero-copy .actions { margin-top:8px; }
  .product-first .intro .hero-copy h1 { margin-block:8px; }
  .product-first #workflow-showcase .clip-selection-path { gap:6px; font-size:12px; margin:10px 0 16px; }
  .product-first #workflow-showcase .clip-selection-path li { flex:1; }
  .product-first #workflow-showcase .clip-selection-path li:not(:last-child)::after { margin-left:4px; }
  .product-first .intro #workflow-showcase {
    width: 100%; margin: 12px 0 0; padding: 20px 16px;
  }
  .product-first #workflow-showcase .product-steps { margin-bottom: 20px; }
  .product-first #workflow-showcase[data-interactive-language] .workflow-number { display: none; }
  .product-first #workflow-showcase .product-steps button { border-bottom-color: #cadbe5; }
  .product-first #workflow-showcase .product-steps button[aria-pressed=true] { border-bottom-color: #176653; }
  .product-first #workflow-showcase .homepage-settings .demo-swatch { width: 44px; height: 44px; }
}
