/* An illustrative preview; the animated diagram adds no scripts or media assets. */
.hero--workflow {
  --type-hero: clamp(2.625rem, 3.65vw, 3.25rem);
  --leading-hero: 1.13;
  overflow: visible;
}
.hero--workflow .hero__inner {
  inline-size: min(1380px, calc(100% - 2 * clamp(24px, 5.4vw, 82px)));
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-block-size: 35rem;
  padding-block: 3rem;
  gap: 2.25rem;
}
.hero--workflow .hero__content { max-inline-size: none; min-inline-size: 0; }
.hero--workflow .hero__visual { display: block; min-inline-size: 0; }
.hero--workflow h1 { max-inline-size: none; margin-block-end: 1.25rem; letter-spacing: -.035em; }
.hero--workflow .hero__lead { max-inline-size: 52ch; margin-block-end: 1.75rem; font-size: 1.25rem; line-height: 1.5; }
.hero--workflow .eyebrow { margin-block-end: 1.25rem; letter-spacing: .12em; }
.hero--workflow .hero__actions { align-items: stretch; flex-wrap: nowrap; gap: 1.25rem; }
.hero--workflow .hero__actions .btn--primary,
.hero__example-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem;
  min-block-size: 3.5rem; padding: .875rem 1.5rem;
  color: var(--color-white); font-size: 1rem; line-height: 1.5rem; font-weight: 700;
  border-radius: 5px; white-space: nowrap; text-decoration: none;
}
.hero--workflow .hero__actions .btn--primary { background: #1749DB; border: 1px solid #285EE9; box-shadow: 0 3px 12px #0002; }
.hero--workflow .hero__actions .btn--primary:hover { background: #265AEA; }
.hero__example-link { border: 1px solid #E7ECF5; background: transparent; }
.hero__example-link:hover { color: var(--color-white); background: #FFFFFF0D; border-color: var(--color-accent); }
.hero__example-link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.workflow-link-arrow { flex-shrink: 0; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.hero__offer { margin-block-start: 1rem; color: #ADB6C9; font-size: .875rem; line-height: 1.5rem; }
.hero__offer a, .hero__visual-caption a { color: #D0EBFF; text-decoration: underline; text-underline-offset: .2em; }
.hero__offer a:hover, .hero__visual-caption a:hover { color: #FFFFFF; }
.hero__visual-caption { margin-block-start: 1rem; color: #CBD5E1; font-size: 1rem; line-height: 1.5; }

.workflow-preview {
  --focus-color: var(--color-action);
  display: block; inline-size: 100%; min-inline-size: 0;
  color: var(--color-text-primary); background: var(--color-white);
  border: 1px solid #DEE3EC; border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,.12); overflow: hidden;
}
.workflow-preview:hover, .workflow-preview:active { color: var(--color-text-primary); border-color: var(--color-accent); }
.workflow-preview:focus-visible { outline: 3px solid var(--color-accent); outline-offset: var(--space-1); }
.workflow-preview__description { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workflow-preview__titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-block-size: 3.25rem; padding: 1rem 1.25rem; border-block-end: 1px solid #F0F2F5;
  border-start-start-radius: inherit; border-start-end-radius: inherit;
  background: #F7F8FA;
}
.workflow-preview__titlebar h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.workflow-preview__dots { color: #8C99AD; flex-shrink: 0; font-size: 1.5rem; line-height: 1; letter-spacing: .08em; }
.workflow-preview__stages {
  position: relative; display: grid; grid-template-columns: .96fr 1.06fr .98fr; gap: 1rem;
  list-style: none; padding: 1.25rem 1rem;
}
.workflow-preview__stage { min-inline-size: 0; display: flex; flex-direction: column; }
.workflow-preview__stage:last-child { position: relative; }
.workflow-preview__stage-heading { position: relative; display: flex; align-items: center; gap: .625rem; min-block-size: 2.5rem; margin-block-end: 1rem; }
.workflow-preview__stage-heading h3 { font-size: .8125rem; line-height: 1.125rem; font-weight: 700; }
.workflow-preview__stage:not(:last-child) .workflow-preview__stage-heading::after { content: "→"; position: absolute; inset-inline-end: -.75rem; color: #69768A; font-size: 1.125rem; }
.workflow-preview__number {
  display: grid; place-items: center; flex-shrink: 0; inline-size: 2.25rem; block-size: 2.25rem;
  color: #1C52CE; background: #DEEBFF; border-radius: 50%; font-size: .875rem; line-height: 1.5rem; font-weight: 700;
}
.workflow-preview__sources, .workflow-preview__checks, .workflow-preview__draft {
  flex: 1; min-block-size: 17.5rem; list-style: none; border: 1px solid #E1E5EB; border-radius: 5px; padding: 1rem .875rem;
  font-size: .8125rem; line-height: 1.125rem; font-weight: 400; background: #FEFEFF;
}
.workflow-preview__sources, .workflow-preview__checks { display: grid; align-content: start; gap: 1.25rem; }
.workflow-preview__checks { gap: 1.5rem; }
.workflow-preview__sources li { display: flex; align-items: flex-start; gap: .625rem; min-inline-size: 0; }
.workflow-preview__source { flex: 1; min-inline-size: 0; }
.workflow-preview__sources small { display: block; color: #64748B; font-size: .6875rem; line-height: 1rem; direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; }
.workflow-preview__source-lines { display: block; block-size: 5px; inline-size: 100%; margin-block-start: .25rem; background: #E9EDF2; border-radius: 2px; }
.workflow-preview__source-lines::after { content: ""; display: block; block-size: 5px; inline-size: 70%; background: #EEF0F4; border-radius: 2px; transform: translateY(10px); }
.workflow-file {
  --file-color: #4283E2;
  display: block; position: relative; flex-shrink: 0; inline-size: 1rem; block-size: 1.375rem;
  margin-block-start: .25rem; background: var(--file-color); border-radius: 2px; clip-path: polygon(0 0,65% 0,100% 27%,100% 100%,0 100%);
}
.workflow-file::after { content: ""; position: absolute; inset-inline: 4px; inset-block-start: 9px; border-block-start: 1px solid #FFFFFF; box-shadow: 0 3px #FFFFFF, 0 6px #FFFFFF; opacity: .85; }
.workflow-file--pdf { --file-color: #CA353A; }
.workflow-file--sheet { --file-color: #23854F; }
.workflow-file--notes { --file-color: #718198; }
.workflow-preview__draft-title { font-weight: 700; }
.workflow-preview__status { color: var(--color-text-secondary); font-size: .75rem; line-height: 1rem; margin-block-start: 1rem; }
.workflow-preview__lines { display: grid; gap: .375rem; margin-block: .875rem; }
.workflow-preview__lines span { block-size: .375rem; border-radius: 2px; background: #DFE4EB; }
.workflow-preview__lines span:last-child { inline-size: 75%; }
.workflow-preview__reference-label { margin-block-end: .5rem; font-size: .75rem; line-height: 1rem; font-weight: 700; }
.workflow-preview__references { display: grid; justify-items: start; gap: .875rem; list-style: none; }
.workflow-preview__references li { color: #1B4F84; background: #DFEEFE; padding: .125rem .25rem; border-radius: 2px; font-size: .6875rem; line-height: 1rem; }
.workflow-preview__checks li { position: relative; padding-inline-start: 1.625rem; }
.workflow-preview__checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1px; inline-size: 1rem; block-size: 1rem; border: 1.25px solid #9BA8BA; border-radius: 3px; background: #FFFFFF; }
.workflow-review-visual { position: absolute; z-index: 3; inset: 57% auto auto 50%; width: min(8rem, 88%); padding: .35rem; border: 1px solid #B8D1F7; border-radius: .6rem; background: #F0F6FF; box-shadow: 0 5px 20px #1749DB22; opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; }
.workflow-review-visual svg { display: block; width: 100%; height: auto; }
html[lang="ar"] .workflow-review-visual svg { transform: scaleX(-1); }
.workflow-preview__approval { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; padding: .625rem 1rem; border-block-start: 1px solid #E1E5EB; background: #F7F9FC; border-end-start-radius: inherit; border-end-end-radius: inherit; }
.workflow-preview__approval strong, .workflow-preview__approval p { font-size: .75rem; line-height: 1.125rem; }
.workflow-preview__approval p { color: var(--color-text-secondary); }

/* The motion is layered inside the original card, so it never changes its size. */
.workflow-preview__draft { position: relative; }
.workflow-effects { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.workflow-effects__fragment, .workflow-effects__report { position: absolute; inset: 0; opacity: 0; }
.workflow-effects__fragment::before { content: ""; position: absolute; left: 18%; top: var(--start-y); width: .65rem; height: .35rem; border-radius: 2px; background: var(--fragment-color); box-shadow: .45rem .5rem 0 -.06rem var(--fragment-color), -.35rem .85rem 0 -.08rem var(--fragment-color); }
.workflow-effects__fragment--one { --start-y: 28%; --fragment-color: #4283E2; --travel-y: 14%; }
.workflow-effects__fragment--two { --start-y: 39%; --fragment-color: #CA353A; --travel-y: 4%; }
.workflow-effects__fragment--three { --start-y: 50%; --fragment-color: #23854F; --travel-y: -6%; }
.workflow-effects__fragment--four { --start-y: 61%; --fragment-color: #718198; --travel-y: -16%; }
.workflow-effects__report::before { content: ""; position: absolute; left: 52%; top: 43%; width: 1.25rem; height: 1.65rem; border: 1px solid #3974C7; border-radius: 2px; background: linear-gradient(#7FA6D9 0 0) 4px 6px / 12px 2px no-repeat, linear-gradient(#7FA6D9 0 0) 4px 11px / 12px 2px no-repeat, #F3F8FF; box-shadow: 0 3px 8px #1749DB33; }
.workflow-preview__engine { position: absolute; z-index: 1; inset: 50% auto auto 50%; display: grid; justify-items: center; gap: .35rem; padding: .7rem .9rem; border: 1px solid #B8D1F7; border-radius: .6rem; color: #1B4F9D; background: #F0F6FF; box-shadow: 0 5px 20px #1749DB22; font-size: .6875rem; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%,-50%) scale(.75); pointer-events: none; }
.workflow-preview__engine-icon { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; }
.workflow-preview__gear { position: absolute; display: block; fill: #8BB3F2; }
.workflow-preview__gear--large { inset: 0; width: 100%; height: 100%; }
.workflow-preview__gear--small { width: 1.2rem; height: 1.2rem; inset-block-start: -.15rem; inset-inline-end: -.25rem; fill: #3473D2; }
.workflow-preview__engine-logo { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #1749DB; box-shadow: 0 0 0 3px #F0F6FF; }
.workflow-preview__engine-logo img { display: block; width: 1.6rem; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .workflow-preview { --flow-x: 31%; }
  .workflow-preview.is-animating .workflow-preview__sources li { animation: workflow-source 5s ease infinite; }
  .workflow-preview.is-animating .workflow-preview__sources li:nth-child(2) { animation-delay: .1s; }
  .workflow-preview.is-animating .workflow-preview__sources li:nth-child(3) { animation-delay: .2s; }
  .workflow-preview.is-animating .workflow-preview__sources li:nth-child(4) { animation-delay: .3s; }
  .workflow-preview.is-animating .workflow-effects__fragment { animation: workflow-pieces 5s ease-in-out infinite; }
  .workflow-preview.is-animating .workflow-effects__fragment--two { animation-delay: .1s; }
  .workflow-preview.is-animating .workflow-effects__fragment--three { animation-delay: .2s; }
  .workflow-preview.is-animating .workflow-effects__fragment--four { animation-delay: .3s; }
  .workflow-preview.is-animating .workflow-preview__engine { animation: workflow-process 5s ease-in-out infinite; }
  .workflow-preview.is-animating .workflow-preview__gear--large { animation: workflow-gear-turn 5s linear infinite; }
  .workflow-preview.is-animating .workflow-preview__gear--small { animation: workflow-gear-turn 5s linear infinite reverse; }
  .workflow-preview.is-animating .workflow-preview__lines span { transform-origin: left center; animation: workflow-write 5s ease infinite; }
  .workflow-preview.is-animating .workflow-preview__references li { animation: workflow-reference 5s ease infinite; }
  .workflow-preview.is-animating .workflow-preview__references li:nth-child(2) { animation-delay: .1s; }
  .workflow-preview.is-animating .workflow-preview__references li:nth-child(3) { animation-delay: .2s; }
  .workflow-preview.is-animating .workflow-effects__report { animation: workflow-send 5s ease-in-out infinite; }
  .workflow-preview.is-animating .workflow-preview__checks li { animation: workflow-check 5s ease infinite; }
  .workflow-preview.is-animating .workflow-preview__checks li:nth-child(2) { animation-delay: .1s; }
  .workflow-preview.is-animating .workflow-preview__checks li:nth-child(3) { animation-delay: .2s; }
  .workflow-preview.is-animating .workflow-preview__checks li:nth-child(4) { animation-delay: .3s; }
  .workflow-preview.is-animating .workflow-review-visual { animation: workflow-human-review 5s ease infinite; }
  .workflow-preview.is-animating .workflow-review-visual__lens { animation: workflow-review-scan 5s ease-in-out infinite; }
  .workflow-preview.is-animating .workflow-preview__number { animation: workflow-stage 5s ease infinite; }
  .workflow-preview.is-animating .workflow-preview__stage:nth-child(2) .workflow-preview__number { animation-delay: 1.5s; }
  .workflow-preview.is-animating .workflow-preview__stage:nth-child(3) .workflow-preview__number { animation-delay: 3.2s; }
  html[lang="ar"] .workflow-preview { --flow-x: -31%; }
  html[lang="ar"] .workflow-effects__fragment::before { left: 82%; }
  html[lang="ar"] .workflow-effects__report::before { left: 48%; }
  html[lang="ar"] .workflow-preview.is-animating .workflow-preview__lines span { transform-origin: right center; }
}
@keyframes workflow-source { 0%, 26%, 100% { transform: translateY(0); opacity: 1; } 10% { transform: translateY(-3px); opacity: .55; } 18% { transform: translateY(0); opacity: .8; } }
@keyframes workflow-pieces { 0%, 5% { opacity: 0; transform: translate(0,0); } 9% { opacity: 1; } 29% { opacity: 1; transform: translate(var(--flow-x),var(--travel-y)); } 34%, 100% { opacity: 0; transform: translate(var(--flow-x),var(--travel-y)); } }
@keyframes workflow-process { 0%, 19%, 62%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.75); } 26%, 53% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 39% { transform: translate(-50%,-50%) scale(1.05); } }
@keyframes workflow-gear-turn { from { transform: rotate(0); } to { transform: rotate(300deg); } }
@keyframes workflow-write { 0%, 38% { transform: scaleX(.15); opacity: .35; } 62%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes workflow-reference { 0%, 42% { opacity: .35; transform: translateY(4px); } 63%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes workflow-send { 0%, 57% { opacity: 0; transform: translate(0,0); } 60% { opacity: 1; } 69% { opacity: 1; transform: translate(var(--flow-x),0); } 73%, 100% { opacity: 0; transform: translate(var(--flow-x),0); } }
@keyframes workflow-check { 0%, 74%, 100% { transform: translateX(0); color: inherit; } 82% { transform: translateX(3px); color: #1749DB; } }
@keyframes workflow-stage { 0%, 100% { box-shadow: 0 0 0 0 #1749DB00; } 12% { box-shadow: 0 0 0 5px #1749DB20; } 24% { box-shadow: 0 0 0 0 #1749DB00; } }
@keyframes workflow-human-review { 0%, 67%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 74%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 96% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes workflow-review-scan { 0%, 70% { transform: translate(0, -7px); } 80% { transform: translate(-4px, 2px); } 91%, 100% { transform: translate(1px, 10px); } }

/* Detail page: the fictional material, draft and still-pending decisions are all HTML. */
.workflow-page {
  --soft-white: var(--color-text-primary); --cool-gray: var(--color-text-secondary);
  --silver: var(--color-text-secondary); --electric-cyan: var(--color-action);
  --neon-cyan: var(--color-action-hover); --focus-color: var(--color-action);
  color: var(--color-text-primary); background: var(--color-light);
}
.workflow-page .page-hero, .workflow-page .section--alt {
  --soft-white: var(--color-white); --cool-gray: var(--color-text-on-dark); --silver: var(--color-text-on-dark);
  --electric-cyan: var(--color-accent); --focus-color: var(--color-accent);
  color: var(--color-white); background: var(--color-navy);
}
.workflow-detail-intro { max-inline-size: 1120px; }
.workflow-disclosure { max-inline-size: 75ch; margin-block-end: var(--space-12); padding-inline-start: var(--space-6); border-inline-start: 3px solid var(--color-action); }
.workflow-disclosure h2 { margin-block-end: var(--space-4); }
.workflow-disclosure p + p { margin-block-start: var(--space-4); }
.workflow-detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,27rem),1fr)); gap: var(--space-6); list-style: none; }
.workflow-step { min-inline-size: 0; padding: var(--space-8); background: var(--color-white); border: 1px solid #CBD5E1; border-radius: var(--radius-md); }
.workflow-step__number { display: block; color: var(--color-action); margin-block-end: var(--space-3); font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.workflow-step h3 { margin-block-end: var(--space-4); }
.workflow-step > p { max-inline-size: 72ch; }
.workflow-step > p + p { margin-block-start: var(--space-4); }
.workflow-status { display: inline-block; color: var(--color-action); background: #E8EEF9; padding: var(--space-2) var(--space-3); margin-block-end: var(--space-4); font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.workflow-source-list { display: grid; gap: var(--space-6); margin-block-start: var(--space-6); }
.workflow-source-list > div { padding-block-start: var(--space-4); border-block-start: 1px solid #CBD5E1; }
.workflow-source-list dt { display: flex; flex-wrap: wrap; gap: var(--space-2); font-weight: 700; }
.workflow-source-list dd { color: var(--color-text-secondary); margin-block-start: var(--space-2); }
.workflow-draft-excerpt { background: var(--color-light); border: 1px solid #CBD5E1; border-radius: var(--radius-sm); padding: var(--space-6); margin-block: var(--space-6); }
.workflow-draft-excerpt h4 { margin-block-end: var(--space-4); }
.workflow-draft-excerpt p + p { margin-block-start: var(--space-4); }
.workflow-draft-excerpt .articlelink { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.workflow-draft-gap { color: var(--color-text-secondary); }
.workflow-checklist { list-style: none; display: grid; gap: var(--space-6); margin-block-start: var(--space-6); }
.workflow-checklist li { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); gap: var(--space-3); }
.workflow-checklist__box { display: block; color: var(--color-text-secondary); font-size: 1.25rem; line-height: 1.5rem; }
.workflow-checklist strong { display: block; margin-block-end: var(--space-2); }
.workflow-approval { border-block-start: 3px solid var(--color-action); }
.workflow-page .library-cta { background: transparent; border-color: #8391A7; }

html[lang="ar"] .hero--workflow { --leading-hero: 1.5; }
html[lang="ar"] .hero__offer { font-size: 1.125rem; line-height: 2rem; }
html[lang="ar"] .workflow-link-arrow { transform: scaleX(-1); }
html[lang="ar"] .workflow-preview :is(h2,h3,p,li,strong),
html[lang="ar"] .workflow-status { line-height: 1.6; }
html[lang="ar"] .workflow-preview__stage:not(:last-child) .workflow-preview__stage-heading::after { transform: scaleX(-1); }

@media (max-width: 78rem) and (min-width: 68.751rem) {
  .hero--workflow .hero__inner { gap: 1.75rem; }
  .hero--workflow .hero__actions { gap: .75rem; }
  .hero--workflow .hero__actions .btn--primary, .hero__example-link { padding-inline: 1rem; gap: .75rem; font-size: .875rem; }
  .workflow-preview__stages { gap: .75rem; padding-inline: .75rem; }
  .workflow-preview__sources, .workflow-preview__checks, .workflow-preview__draft { padding-inline: .625rem; }
  .workflow-preview__stage-heading { gap: .375rem; }
  .workflow-preview__number { inline-size: 1.875rem; block-size: 1.875rem; }
}
@media (max-width: 68.75rem) {
  .hero--workflow .hero__inner { inline-size: calc(100% - 40px); grid-template-columns: minmax(0,1fr); gap: var(--space-8); min-block-size: auto; }
  .hero--workflow .hero__content { max-inline-size: 72ch; }
  .hero--workflow h1 { max-inline-size: 25ch; }
  .hero--workflow .hero__visual { order: 0; inline-size: 100%; max-inline-size: 42rem; }
  .hero--workflow .hero__actions { flex-wrap: wrap; }
}
@media (max-width: 48rem) {
  .hero--workflow { --type-hero: 2.25rem; --leading-hero: 1.2; }
  .hero--workflow .hero__inner { inline-size: calc(100% - var(--space-8)); padding-block: 2.5rem; }
  .hero--workflow .hero__lead { font-size: 1rem; line-height: 1.6; }
  .hero--workflow .eyebrow { font-size: .75rem; line-height: 1.5; letter-spacing: .1em; }
  .hero--workflow .hero__actions { gap: .75rem; }
  .hero--workflow .hero__actions .btn--primary, .hero__example-link { min-block-size: 3.25rem; padding-inline: 1.25rem; }
  .workflow-step { padding: var(--space-6); }
  .workflow-draft-excerpt { padding: var(--space-4); }
}
@media (max-width: 36rem) {
  .workflow-preview__stages { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .workflow-preview__stage-heading { margin-block-end: var(--space-3); }
  .workflow-preview__stage-heading h3 { font-size: 1rem; line-height: 1.5rem; }
  .workflow-preview__stage:not(:last-child) .workflow-preview__stage-heading::after { content: none; }
  .workflow-preview__sources, .workflow-preview__checks, .workflow-preview__draft { min-block-size: auto; font-size: 1rem; line-height: 1.5rem; padding: 1rem; }
  .workflow-preview__sources { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
  .workflow-preview__sources small, .workflow-preview__references li, .workflow-preview__reference-label, .workflow-preview__status, .workflow-preview__approval strong, .workflow-preview__approval p { font-size: .875rem; line-height: 1.5rem; }
  .workflow-preview__sources { padding-block-end: 1.5rem; }
  .workflow-preview__checks { gap: 1rem; }
  .workflow-preview__checks li { padding-inline-start: 1.75rem; }
  .workflow-preview__checks li::before { inset-block-start: .25rem; }
  .workflow-preview__approval { padding: .75rem 1rem; }
  .workflow-effects__fragment::before, html[lang="ar"] .workflow-effects__fragment::before { left: 50%; }
  .workflow-effects__fragment--one { --start-y: 15%; --travel-y: 32%; }
  .workflow-effects__fragment--two { --start-y: 18%; --travel-y: 29%; }
  .workflow-effects__fragment--three { --start-y: 21%; --travel-y: 26%; }
  .workflow-effects__fragment--four { --start-y: 24%; --travel-y: 23%; }
  .workflow-effects__report::before, html[lang="ar"] .workflow-effects__report::before { left: 50%; top: 47%; }
  @media (prefers-reduced-motion: no-preference) {
    .workflow-preview, html[lang="ar"] .workflow-preview { --flow-x: 0%; }
    .workflow-preview.is-animating .workflow-effects__report { animation-name: workflow-send-down; }
  }
  .hero--workflow .hero__actions { flex-direction: column; align-items: stretch; }
  .hero--workflow .hero__actions .btn--primary, .hero__example-link {
    justify-content: space-between; gap: .75rem; white-space: normal; text-align: start;
  }
  .hero--workflow .hero__actions .btn--primary > span:first-child { min-inline-size: 0; }
}
@keyframes workflow-send-down { 0%, 57% { opacity: 0; transform: translateY(0); } 60% { opacity: 1; } 69% { opacity: 1; transform: translateY(31%); } 73%, 100% { opacity: 0; transform: translateY(31%); } }