:root { --node-fill: #101010; --popover-fill: #101010; --flow-scrim: #000000; }
/* Colour and continuous motion are scoped to the automation surfaces. */
[data-palette="trade-fair-leads"] { --flow-base: #05070f; --flow-a: #2b59ff; --flow-b: #00d4ff; --flow-c: #7a2bff; }
[data-palette="ticket-sender"] { --flow-base: #0f0505; --flow-a: #ff4d1c; --flow-b: #ffb800; --flow-c: #ff1f6b; }
[data-palette="invoice-intake"] { --flow-base: #03100a; --flow-a: #00c96b; --flow-b: #c6ff3d; --flow-c: #007a7a; }
[data-palette="blog-system"] { --flow-base: #0d0412; --flow-a: #b14bff; --flow-b: #ff4fd8; --flow-c: #3a2bff; }
[data-palette="marketing-team"] { --flow-base: #120604; --flow-a: #ff6a00; --flow-b: #ff2f2f; --flow-c: #ffd23f; }
[data-palette="video-agent"] { --flow-base: #020b12; --flow-a: #00e0ff; --flow-b: #1f6bff; --flow-c: #00ffa3; }
[data-palette="support-bot"] { --flow-base: #0a0a12; --flow-a: #6b7bff; --flow-b: #c0c8ff; --flow-c: #2b2bff; }
[data-palette="competitor-dna"] { --flow-base: #0b0410; --flow-a: #ff3d6e; --flow-b: #ffb3c7; --flow-c: #7a1fff; }
.automation-surface { position: relative; isolation: isolate; overflow: hidden; background: var(--flow-base); }
.automation-surface::before, .automation-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.automation-surface::before {
  background-image: radial-gradient(ellipse at center, var(--flow-a) 0%, transparent 65%), radial-gradient(ellipse at center, var(--flow-b) 0%, transparent 62%), radial-gradient(ellipse at center, var(--flow-c) 0%, transparent 68%);
  background-size: 140% 150%, 115% 135%, 130% 140%;
  background-repeat: no-repeat;
  background-position: -120% 30%, 230% 190%, 100% -130%;
  animation: automation-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.automation-surface::after {
  z-index: 1; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.automation-surface.is-running::before { animation-play-state: running; }
.work-item:nth-child(3n + 1) .automation-surface::before { animation-duration: 21s; animation-delay: -6s; }
.work-item:nth-child(3n + 2) .automation-surface::before { animation-duration: 28s; animation-delay: -13s; }
@keyframes automation-drift { to { background-position: 60% 130%, -110% -80%, 170% 130%; } }
.automation-diagram { display: block; width: 100%; }
.work-item[data-automation-page] { container-type: inline-size; }
/* Keep the 55/45 split, allowing small tiles to grow for the full outcome. */
.project-media.automation-surface { display: grid; grid-template-rows: 1.22fr 1fr; min-height: 100cqw; aspect-ratio: auto; background-color: var(--flow-base); }
.project-media .automation-diagram { position: relative; min-height: 0; }
.project-media .workflow-svg { position: absolute; height: 100%; }
.workflow-svg { display: block; width: 100%; overflow: hidden; }
.workflow-edge { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.workflow-edge.is-ai { stroke-dasharray: 5 5; }
.workflow-node-box { fill: var(--node-fill); stroke: rgba(255, 255, 255, .55); stroke-width: 1;  }
.workflow-node-label, .workflow-node-type { fill: #fff;  }
.workflow-node-label { font: 400 14px "Host Grotesk", sans-serif; }
.workflow-node-type { font: 12px "Fragment Mono", monospace; fill: #b8b8b8; }
.workflow-svg [role="button"] { cursor: pointer; outline: none; }
.workflow-svg [role="button"]:focus-visible .workflow-node-box { stroke-width: 3; stroke: #fff; }
.workflow-node.is-ai .workflow-node-box { stroke-dasharray: 5 4; }
.workflow-node:is(.is-trigger, .is-lit, .is-highlighted) .workflow-node-box { fill: #fff; stroke: #fff; }
.workflow-node:is(.is-trigger, .is-lit, .is-highlighted) :is(.workflow-node-label, .workflow-node-type) { fill: #000; }
.workflow-executing { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0; animation: workflow-executing 300ms ease infinite alternate paused; }
.workflow-node.is-executing .workflow-executing { opacity: 1; }
.workflow-svg [role="button"]:focus-visible .workflow-executing { opacity: 1; stroke-dasharray: none; animation: none; }
[data-running="true"] .is-executing .workflow-executing { animation-play-state: running; }
@keyframes workflow-executing { from { opacity: .45; } to { opacity: 1; } }
.workflow-popover { position: absolute; z-index: 4; width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: var(--popover-fill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 400 15px/1.45 "Host Grotesk", sans-serif; color: #b8b8b8; }
.workflow-popover strong { display: block; margin-bottom: 4px; color: #fff; font-weight: 400; }
.workflow-branch { pointer-events: none; }
.workflow-branch rect { fill: rgba(0, 0, 0, .8); stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.workflow-branch text { fill: #fff; font: 12px "Fragment Mono", monospace; }
.workflow-pulse { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .65)); pointer-events: none; }
.automation-page { background: var(--flow-base); isolation: isolate; }
.automation-backdrop { position: fixed; inset: 0; z-index: -1; }
.automation-backdrop::before { opacity: .85; }
.automation-page .navigation a:focus-visible { background: var(--hover); border-radius: 7rem; }
@media (hover: hover) and (pointer: fine) {
  .automation-page .navigation a:hover { background: var(--hover); border-radius: 7rem; }
}

.automation-page .navigation .nav-mark { color: #fff; }
.automation-main { padding: 132rem var(--margin) 32rem; }
.automation-stage { display: flex; flex-direction: column; padding-bottom: 54rem; }
.automation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24rem; text-transform: uppercase; letter-spacing: .02em; }
.automation-heading > .serial { flex-shrink: 0; }
.automation-outcome { max-width: 28ch; margin-block: 40rem 36rem; font-size: clamp(22px, 2vw, 26px); line-height: 1.3; text-wrap: pretty; color: #fff; }
.automation-run { display: flex; align-items: center; gap: 24px; margin-bottom: 8rem; }
.automation-run[hidden] { display: none; }
.run-counter { flex-shrink: 0; font: 12px "Fragment Mono", monospace; white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-segments { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.run-segment { position: relative; flex: 1 0 24px; height: 32px; padding: 0; }
.run-segment::before, .run-segment::after { content: ""; position: absolute; top: 14px; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.run-segment::after { background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.run-segment.is-reached::after { transform: scaleX(1); }
.run-segment.is-current::after { transform: scale(1, 1.6667); }
@media (hover: hover) and (pointer: fine) {
  .run-segment:hover::before { background: rgba(255, 255, 255, .6); }
}

.run-segment:focus-visible { outline: 1px solid #fff; outline-offset: -1px; }
.run-segment:active { transform: scaleY(.9); }
.diagram-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.diagram-scroll::-webkit-scrollbar { display: none; }
.diagram-scroll:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }
.diagram-scroll.is-scrollable { cursor: grab; }
.diagram-scroll.is-dragging { cursor: grabbing; user-select: none; }
.diagram-scroll .automation-diagram { padding-block: 24rem; }
.diagram-progress { height: 1px; background: rgba(255, 255, 255, .25); width: 100%; margin-top: 20rem; }
.diagram-progress > span { display: block; height: 1px; background: #fff; transform-origin: left; width: 100%; }
.diagram-hint { font-size: 12px; margin-top: 12rem; color: #b8b8b8; }
.diagram-touch-hint { display: none; }
@media (hover: none) {
  .diagram-touch-hint { display: inline; }
  .diagram-pointer-hint { display: none; }
}
.diagram-note-hint { font-size: 12px; margin-top: 12rem; color: #b8b8b8; }
.diagram-error { margin-top: 12rem; }
.automation-information { padding-block: 48rem 88rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.automation-facts { grid-column: 1 / 4; text-transform: uppercase; letter-spacing: .02em; }
.automation-facts > div { display: grid; grid-template-columns: 90rem 1fr; margin-bottom: 6rem; }
.automation-facts dt { color: #b8b8b8; }
.automation-description { grid-column: 5 / 9; max-width: 480rem; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.automation-snapshot { padding-bottom: 80rem; }
.snapshot-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40rem; }
.snapshot-grid > div { border-top: 1px solid rgba(255, 255, 255, .3); padding-block: 24rem 36rem; }
.snapshot-grid dt, .automation-rules h2, .automation-nodes h2 { text-transform: uppercase; letter-spacing: .02em; font-size: 12px; color: #b8b8b8; }
.snapshot-grid dd { margin-top: 20rem; font-size: 16px; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.snapshot-grid ul, .automation-rules ol, .automation-nodes ol { list-style: none; padding: 0; }
.snapshot-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.snapshot-apps li { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .4); font-size: 12px; }
.snapshot-checklist li { position: relative; padding-left: 24px; margin-bottom: 12px; }
.snapshot-check { position: absolute; left: 0; top: 0; }
.automation-rules { padding-bottom: 80rem; }
.automation-rules h2, .automation-nodes h2 { grid-column: 1 / 4; }
.rule-stack { grid-column: 5 / 9; border-left: 1px solid rgba(255, 255, 255, .35); }
.rule-stack li { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 0 0 32px 24px; font-size: 16px; line-height: 1.5; }
.rule-stack li:last-child { padding-bottom: 0; }
.rule-stack li::before { content: ""; position: absolute; width: 5px; height: 5px; background: #fff; left: -3px; top: 8px; }
.rule-keyword { font: 12px/24px "Fragment Mono", monospace; }
.will-reveal .snapshot-check { opacity: 0; }
.is-revealed .snapshot-check { opacity: 1; transition: opacity 200ms ease; transition-delay: calc(var(--reveal-order) * 50ms); }
.automation-nodes { padding-bottom: 64rem; }
.automation-nodes ol { grid-column: 5 / 9; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.automation-nodes button { display: flex; gap: 8px; align-items: baseline; padding: 7px 8px; border: 1px solid rgba(255, 255, 255, .25); color: #b8b8b8; text-transform: uppercase; font-size: 12px; line-height: 1.4; }
.automation-nodes .serial { font-size: 12px; }
.automation-nodes button { transition: color 150ms ease, transform 160ms var(--ease-out); }
.automation-nodes button:focus-visible { color: #fff; border-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .automation-nodes button:hover { color: #fff; border-color: #fff; }
}

.automation-nodes button:active { transform: scale(.97); }
.automation-tile-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 14px 14px; background: rgba(0, 0, 0, .88); color: #fff; font-family: "Host Grotesk", sans-serif; text-transform: none; letter-spacing: normal; white-space: normal; }
.automation-tile-outcome { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3; text-wrap: pretty; }
.automation-tile-link { font-size: 12px; color: #b8b8b8; }
.automation-pagination { display: flex; justify-content: space-between; gap: 20rem; padding-top: 24rem; border-top: 1px solid rgba(255, 255, 255, .3); text-transform: uppercase; letter-spacing: .02em; }
.automation-pagination a { padding-block: 12rem; }
@media (hover: hover) and (pointer: fine) {
  .automation-pagination a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

.automation-cta { padding-block: 48rem 64rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.automation-cta h2 { font: 400 28px/1.2 "Host Grotesk", sans-serif; color: #fff; text-wrap: balance; }
.automation-cta p { margin-top: 16px; max-width: 60ch; font-size: 16px; line-height: 1.5; color: #b8b8b8; }
.automation-setup { display: inline-block; margin-top: 24px; padding: 18px 24px; border-radius: 8rem; background: var(--bar); color: #fff; font-size: 16px; transition: color 150ms ease, transform 160ms var(--ease-out); }
.automation-setup:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.automation-setup:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .automation-setup:hover { background: var(--hover); }
}
@media (max-width: 479px) {
  .automation-tile-copy { padding: 12px 10px 10px; gap: 6px; }
  .automation-main { padding-top: 158rem; }
  .automation-stage { padding-bottom: 36rem; }
  .automation-outcome { margin-block: 32rem; }
  .automation-run { gap: 12px; }
  .automation-information { gap: 36rem; padding-block: 32rem 64rem; }
  .automation-facts, .automation-description, .automation-nodes h2, .automation-nodes ol, .automation-rules h2, .rule-stack { grid-column: 1 / -1; }
  .snapshot-grid { grid-template-columns: 1fr; }
  .snapshot-grid > div { padding-block: 24rem; }
  .automation-snapshot, .automation-rules, .automation-nodes { padding-bottom: 48rem; }
  .automation-rules, .automation-nodes { gap: 24rem; }
  .rule-stack li { grid-template-columns: 78px 1fr; gap: 10px; padding-left: 18px; font-size: 15px; }
  .automation-pagination { font-size: 12px; gap: 10rem; }
  .diagram-hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .automation-surface::before { animation: none; }
  .workflow-node rect, .workflow-node text, .is-revealed .snapshot-check { transition: opacity 200ms ease, color 150ms ease; }
  .workflow-executing { animation: none; }
  .will-reveal .snapshot-check,   .workflow-pulse { display: none; }
}
/* Keep automation tiles square like every other tile; long outcomes get a slightly smaller size. */
.project-media.automation-surface { aspect-ratio: 1; min-height: 0; grid-template-rows: 1fr auto; }
.work-grid[data-layout="small"] .automation-tile-outcome { font-size: clamp(15px, 1.05vw, 16px); }
/* Connecting lines: clearly visible, same thickness on screen at any diagram scale. */
.workflow-edge { stroke: rgba(255, 255, 255, .85); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.workflow-edge.is-ai { stroke: rgba(255, 255, 255, .6); stroke-dasharray: 4 4; }

/* The moving colours remain behind a stable, contrast-safe reading surface. */
.automation-backdrop { background: var(--flow-base); }
.automation-backdrop::before { opacity: .85; }
.automation-surface::after { z-index: -1; }
.workflow-node-box { stroke: var(--boundary); }
.workflow-popover { color: #b8b8b8; border-color: var(--boundary); }
.run-segment::before, .diagram-progress { background: var(--boundary); }
.automation-nodes button, .snapshot-apps li { border-color: var(--boundary); }
.diagram-scroll { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.diagram-scroll::-webkit-scrollbar { display: block; height: 8px; }
.diagram-scroll::-webkit-scrollbar-thumb { background: var(--muted); }
.diagram-note-hint { font-size: 12px; }
/* Text determines the minimum tile height at narrow grid widths. */
.project-media.automation-surface { aspect-ratio: auto; min-height: 100cqw; grid-template-rows: minmax(90px, 1fr) auto; }
/* Gradient strength per palette: the strongest level at which white text over the brightest colour still meets 4.5:1 (WCAG 1.4.3). */
[data-palette="trade-fair-leads"] { --flow-strength: .59; }
[data-palette="ticket-sender"] { --flow-strength: .58; }
[data-palette="invoice-intake"] { --flow-strength: .47; }
[data-palette="blog-system"] { --flow-strength: .76; }
[data-palette="marketing-team"] { --flow-strength: .53; }
[data-palette="video-agent"] { --flow-strength: .51; }
[data-palette="support-bot"] { --flow-strength: .56; }
[data-palette="competitor-dna"] { --flow-strength: .57; }
.automation-backdrop::before { opacity: var(--flow-strength, .5); }
/* Small text on the gradient is solid white so it passes on every colour. */
.automation-page { --muted: #fff; }
.automation-page p, .automation-page li, .automation-page dd { text-transform: none; letter-spacing: normal; }

.workflow-popover { transform-origin: top center; }
@media (prefers-reduced-motion: reduce) {
  .automation-setup:active, .run-segment:active, .automation-nodes button:active { transform: none; }
  .run-segment::after { transition: opacity 200ms ease !important; }
}