/* One persistent process monitor over the original photographic background. */
.automation-scene{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size;color:#252c29;font-family:var(--sans),Arial,sans-serif;text-align:left;background:#83927c}
.automation-scene *{box-sizing:border-box}
.automation-photo{position:absolute;inset:-4%;background:url('./zendesk/assets/story-green.webp') center/cover no-repeat;transform:translateX(-1%) scale(1.025);animation:monitor-photo-drift 28s cubic-bezier(.45,0,.55,1) infinite alternate paused}
.automation-scene.is-running .automation-photo{animation-play-state:running}
.automation-monitor{--monitor-unit:clamp(.88px,.112cqw,1.2px);--monitor-height:148;position:absolute;left:50%;top:50%;width:clamp(270px,49cqw,460px);height:calc(var(--monitor-height)*var(--monitor-unit));transform:translate(-50%,-50%) scale(1.1);padding:calc(17*var(--monitor-unit));border:1px solid rgba(225,224,219,.85);border-radius:clamp(13px,1.65cqw,18px);background:#fefdfc;box-shadow:0 7px 23px rgba(35,45,31,.085),0 1px 3px rgba(35,45,31,.025);font-size:clamp(10px,1.12cqw,12.5px);line-height:1.4;transition:height .52s cubic-bezier(.22,.7,.2,1),width .52s cubic-bezier(.22,.7,.2,1),opacity .28s ease,transform .4s cubic-bezier(.22,.7,.2,1);will-change:height}
.monitor-brand{display:flex;align-items:center;gap:7px;height:16px;margin-bottom:calc(13*var(--monitor-unit));color:#626d65;font-size:.83em;font-weight:550;white-space:nowrap}
.automation-scene .monitor-brand img{display:block;width:20px;height:20px;object-fit:contain;filter:none;transform:none;border-radius:0}
.monitor-live{width:4px;height:4px;border-radius:50%;margin-left:auto;background:#7caa85;opacity:.8}
.monitor-content{opacity:1;transform:translateY(0);transition:opacity .14s ease,transform .23s cubic-bezier(.22,.7,.2,1)}
.monitor-content.is-changing{opacity:0;transform:translateY(-4px)}
.monitor-content.is-entering{animation:monitor-content-in .32s cubic-bezier(.22,.7,.2,1) both}
.monitor-title{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-size:1em;font-weight:650;line-height:1.35;letter-spacing:-.015em}
.monitor-copy{margin:0 0 2px;color:#6c756f;font-size:.88em;line-height:1.55}
.monitor-detail{margin:1px 0 0;color:#939a94;font-size:.82em}
.monitor-tool{flex:none;display:inline-grid;place-items:center;width:19px;height:19px;overflow:hidden;background:#fff;border-radius:4px;vertical-align:middle}
.automation-scene .monitor-tool img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:none;transform:none}
.automation-scene .monitor-tool--shopify img{transform:scale(2.05)}
.automation-scene .monitor-tool--stripe img{transform:scale(1.75)}
.automation-scene .monitor-tool--airtable img{transform:scale(1.75)}
.monitor-customer{padding-left:27px}
.monitor-status{display:flex;align-items:center;gap:7px;margin-top:calc(13*var(--monitor-unit));color:#8c958e;font-size:.83em;min-height:15px}
.monitor-indicator{display:inline-block;position:relative;flex:none;width:10px;height:10px;border:1px solid #d9dfd9;border-radius:50%}
.monitor-indicator.is-loading{border-color:#d6ded7;border-top-color:#87a38c;animation:monitor-spin .9s linear infinite}
.monitor-indicator.is-done{background:none;border:0}
.monitor-indicator.is-done:after{content:'';position:absolute;left:2px;top:0;width:5px;height:8px;border:solid #171a18;border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}
.monitor-status.is-done{color:#737b75}
.monitor-rows{display:grid;gap:5px;margin-top:10px}
.monitor-row{display:flex;align-items:center;gap:7px;min-height:25px;padding:4px 7px;border-radius:4px;background:#f7f7f4;color:#919a93;font-size:.82em;animation:monitor-row-in .36s cubic-bezier(.22,.7,.2,1) both}
.monitor-row:nth-child(2){animation-delay:.06s}.monitor-row:nth-child(3){animation-delay:.12s}
.monitor-row small{margin-left:auto;font-size:.9em;color:#a5aca6}
.monitor-progress{position:absolute;left:calc(17*var(--monitor-unit));right:calc(17*var(--monitor-unit));bottom:calc(13*var(--monitor-unit));height:2px;border-radius:3px;background:#ecece6;overflow:hidden;transition:opacity .25s ease}
.monitor-progress span{display:block;width:100%;height:100%;background:#70b4d0;transform:scaleX(.05);transform-origin:left;transition:transform .7s cubic-bezier(.22,.7,.2,1)}
.monitor-preview{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .48s cubic-bezier(.22,.7,.2,1),opacity .35s ease;margin-top:0}
.monitor-preview.is-visible{grid-template-rows:1fr;opacity:1;margin-top:10px}
.monitor-preview>div{overflow:hidden}
.monitor-preview p{margin:0;border:1px solid #edece6;border-radius:5px;background:#f7f7f3;padding:9px 10px;color:#727c73;font-size:.86em;line-height:1.55;clip-path:inset(0 100% 0 0)}
.monitor-preview.is-visible p{animation:monitor-write .65s ease-out forwards}
.monitor-impact{padding-top:2px}
.monitor-impact h3{margin:6px 0 0;color:#25372e;font:500 clamp(23px,3.05cqw,34px)/1.13 var(--sans),Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap}
.monitor-impact .monitor-period{margin:3px 0 0;font-size:.9em;color:#8b958c}
.monitor-impact .monitor-saved-label{font-size:.9em}
.monitor-impact .monitor-status{margin-top:0;font-size:.84em}
.monitor-chart{display:block;width:100%;height:39px;margin:13px 0 7px;overflow:visible}
.monitor-chart path{fill:none;stroke:#8bab8e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:monitor-chart-draw .85s .08s ease-out forwards}
.monitor-chart .monitor-chart-base{stroke:#eeeae3;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.monitor-impact .monitor-detail{font-size:.83em;color:#89938a}
.automation-monitor[data-state='result'] .monitor-progress,.automation-monitor[data-state='complete'] .monitor-progress{opacity:0}
.automation-monitor[data-state='result'] .monitor-live,.automation-monitor[data-state='complete'] .monitor-live{opacity:0}
.automation-monitor.is-resetting{opacity:0;transform:translate(-50%,-48%) scale(1.0835)}
.automation-monitor.is-resetting .monitor-progress span{transition:none}
@keyframes monitor-content-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes monitor-row-in{from{transform:translateY(4px)}to{transform:translateY(0)}}
@keyframes monitor-spin{to{transform:rotate(360deg)}}
@keyframes monitor-write{to{clip-path:inset(0 0 0 0)}}
@keyframes monitor-chart-draw{to{stroke-dashoffset:0}}
@keyframes monitor-photo-drift{from{transform:translateX(-1.2%) scale(1.025)}to{transform:translateX(1.2%) scale(1.055)}}
@media(max-width:650px){.automation-monitor{width:min(79cqw,330px);--monitor-unit:.88px;padding:14px;font-size:10px;border-radius:13px}.monitor-brand{font-size:8px;margin-bottom:10px;gap:6px}.monitor-title{font-size:10.5px;gap:7px}.monitor-tool{width:17px;height:17px}.monitor-customer{padding-left:24px}.monitor-row{min-height:23px}.monitor-preview p{padding:7px 8px;font-size:9px}.monitor-impact h3{font-size:25px}.monitor-chart{height:31px;margin:9px 0 6px}}
@media(prefers-reduced-motion:reduce){.automation-scene *{animation:none!important;transition:none!important}.automation-photo{transform:none}.monitor-chart path{stroke-dashoffset:0}.monitor-preview p{clip-path:none}.automation-monitor{will-change:auto}.story__deck{height:140svh;min-height:900px}.story__deck-card--back{display:none}.story__deck-card--front{top:25%;z-index:2}.story__deck-card--middle{top:75%;z-index:3}}

/* Otisa's mark signals active processing; the intro mark grows gently on scroll. */
.automation-scene.is-running .automation-monitor:not([data-state="result"]):not([data-state="complete"]) .monitor-brand img{animation:monitor-mark-breathe 2s cubic-bezier(.45,0,.55,1) infinite}
.monitor-row{opacity:.5;transition:opacity .24s ease}
.monitor-row.is-active{opacity:1}
.monitor-row.is-done{opacity:.82}
.intro__logo{width:clamp(100px,11vw,142px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 35px;transform:scale(var(--intro-logo-scale,1));transform-origin:center;will-change:transform}
@keyframes monitor-mark-breathe{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.intro__logo{transform:none;will-change:auto}}

/* Subscription hero with a lighter serif treatment. */
.hero__content{width:100%;max-width:1240px;padding-inline:24px}
.hero h1{max-width:1200px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(44px,5.6vw,86px);line-height:1.13;letter-spacing:-.05em;white-space:nowrap}
.hero__services-intro{margin:34px 0 0;color:#fff;font:400 clamp(15px,1.6vw,21px)/1.4 var(--sans);text-shadow:0 1px 10px rgba(0,0,0,.25)}
.hero__rotating{width:min(620px,calc(100vw - 36px));height:29px;line-height:29px;margin-top:10px;font-size:clamp(14px,1.6vw,21px);color:rgba(255,255,255,.85)}
.hero__rotating-track{height:29px}
.hero__rotating-item svg{width:20px;height:20px}
@media(max-width:650px){.hero__content{padding:0 16px 35px}.hero h1{font-size:clamp(21px,6.7vw,43px);line-height:1.2;white-space:nowrap}.hero__services-intro{margin-top:28px;font-size:15px}.hero__rotating{font-size:13px;margin-top:9px}.hero__rotating-item svg{width:15px;height:15px}}

.hero__rotating{margin-top:34px}
@media(max-width:650px){.hero__rotating{margin-top:28px}}

.hero__rotating{font-size:clamp(12px,1.15vw,15px)}
.hero__rotating-item svg{width:15px;height:15px}
@media(max-width:650px){.hero__rotating{font-size:12px}.hero__rotating-item svg{width:13px;height:13px}}

/* One service clears the line before the next enters from below. */
.hero__rotating{--ticker-row-height:29px;height:var(--ticker-row-height);line-height:var(--ticker-row-height)}
.hero__rotating-track{position:relative;height:var(--ticker-row-height);will-change:transform}
.hero__rotating-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;height:var(--ticker-row-height);transform:translate3d(0,0,0);transition:transform .3s linear}
.hero__rotating-track.is-resetting .hero__rotating-item{transition:none!important}
@media(max-width:650px){.hero__rotating{--ticker-row-height:22px}.hero__rotating-item{gap:6px}}

/* Scroll targets at each fully composed card position. */
.story__snap-stop{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.story__snap-stop--one{top:0}
.story__snap-stop--two{top:calc(32% - 32vh)}
.story__snap-stop--three{top:calc(57% - 57vh)}
@media(prefers-reduced-motion:reduce){.story__snap-stop{display:none}}