/* Purposeful, local-only motion. Artwork remains intact; controls stay native. */
.art-banner>.process-cta,.art-banner>.team-cta{position:absolute;z-index:4;max-width:42%;box-shadow:0 7px 24px #001c4266;min-height:44px}
.process-cta{left:79%;top:17%}
.team-cta{left:4.2%;top:73%}

/* Four benefits: turn a key, save an edit, scan, and reply. */
.benefits{padding-block:calc(36 * var(--u)) calc(38 * var(--u))}
.benefits>h2{margin-bottom:calc(18 * var(--u))}
.benefit-grid article{position:relative;padding-inline:calc(10 * var(--u))}
.benefit-scene{height:calc(169 * var(--u));max-width:calc(216 * var(--u));position:relative;margin:0 auto calc(13 * var(--u));isolation:isolate}
.benefit-scene:before{content:'';position:absolute;inset:12% 8% 18%;border-radius:50%;background:radial-gradient(ellipse,#e6f5ff,transparent 72%);z-index:-1}
.benefit-scene .benefit-art{position:absolute;left:calc(50% - 67.5 * var(--u));top:calc(-19 * var(--u));width:calc(135 * var(--u));margin:0;animation:none}
.benefit-signal{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;font-size:calc(10 * var(--u));font-weight:600;color:#2c6498;background:#f2f9ff;border:1px solid #dceeff;border-radius:30px;padding:calc(4 * var(--u)) calc(11 * var(--u))}
.benefit-signal .icon{height:1.2em;width:1.2em;color:#00ad7a}
.ownership-seal{position:absolute;right:13%;bottom:24%;display:grid;place-items:center;width:calc(30 * var(--u));height:calc(30 * var(--u));background:#00b97b;border:3px solid white;color:white;border-radius:50%;box-shadow:0 4px 12px #0ea67830}
.ownership-seal .icon{width:65%;height:65%;stroke-width:3}
.edit-trace{position:absolute;right:8%;top:19%;display:grid;gap:5px;width:calc(38 * var(--u));padding:7px;background:#fff;border:1px solid #c5e6ff;border-radius:8px;box-shadow:0 5px 12px #007aff13}
.edit-trace i{display:block;height:4px;background:#43b5ff;border-radius:5px;transform-origin:left}.edit-trace i:nth-child(2){width:70%;background:#82d9cc}.edit-trace i:nth-child(3){width:85%;background:#bca4fd}
.search-orbit{position:absolute;width:53%;aspect-ratio:1;border:1px dashed #aad7ff;border-radius:50%;left:17%;top:12%}.search-orbit:after{content:'';position:absolute;inset:0;border:2px solid transparent;border-top-color:#239bff;border-radius:50%}
.chat-typing{position:absolute;right:8%;top:18%;padding:9px 10px;display:flex;gap:4px;background:#fff;border:1px solid #cbebdb;border-radius:13px 13px 13px 3px;box-shadow:0 5px 12px #07974e17}.chat-typing i{width:4px;height:4px;border-radius:50%;background:#08b86a}
.owner-story .benefit-art{animation:benefit-key 7s ease-in-out infinite!important}
.ownership-seal{animation:benefit-check 7s ease infinite}
.edit-trace i{animation:benefit-edit 6s ease infinite}.edit-trace i:nth-child(2){animation-delay:.22s}.edit-trace i:nth-child(3){animation-delay:.44s}
.edit-story .benefit-signal{animation:benefit-saved 6s ease infinite}
.search-story .benefit-art{animation:benefit-search 7s ease-in-out infinite!important}
.search-orbit:after{animation:studio-orbit 7s linear infinite}
.chat-typing i{animation:benefit-typing 1.5s ease infinite}.chat-typing i:nth-child(2){animation-delay:.18s}.chat-typing i:nth-child(3){animation-delay:.36s}
.chat-story .benefit-signal{animation:benefit-reply 7s ease infinite}
.benefit-scene *,.benefit-scene *:after{animation-play-state:paused!important}
.motion-enabled .benefits.story-running .benefit-scene *,.motion-enabled .benefits.story-running .benefit-scene *:after{animation-play-state:running!important}
@keyframes benefit-key{0%,20%,80%,100%{transform:rotate(0)}35%,52%{transform:rotate(-13deg)}65%{transform:rotate(3deg)}}
@keyframes benefit-check{0%,25%{opacity:0;transform:scale(.6)}40%,85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
@keyframes benefit-edit{0%,12%,100%{transform:scaleX(.18);opacity:.35}35%,85%{transform:scaleX(1);opacity:1}}
@keyframes benefit-saved{0%,30%,100%{opacity:.3}45%,85%{opacity:1}}
@keyframes benefit-search{0%,15%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(-7px,3px) rotate(-6deg)}65%{transform:translate(5px,-3px) rotate(5deg)}85%{transform:translate(0,0) rotate(0)}}
@keyframes benefit-typing{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
@keyframes benefit-reply{0%,30%,100%{opacity:.25;translate:0 3px}45%,88%{opacity:1;translate:0 0}}

/* Before/after focus tour: keep both supplied image halves, do not fake a resizer. */
.comparison{grid-template-columns:minmax(0,28fr) minmax(0,50fr) minmax(0,22fr);gap:calc(16 * var(--u));padding:calc(30 * var(--u)) calc(35 * var(--u))}
.compare-intro{padding-right:0}.compare-after{padding-left:0}
.comparison-image{align-self:center;background:#0c2035;border-color:#526e8d;box-shadow:0 12px 40px #0003}
.comparison-captions{grid-template-columns:42% 58%;background:#132942}
.comparison-captions button{position:relative;overflow:hidden;text-align:left;min-height:64px;border:0;border-bottom:1px solid #36516f;padding:calc(11 * var(--u));background:#1b2d42;color:#adbed5;font-size:calc(12 * var(--u));line-height:1.4;transition:color .4s,background .4s}
.comparison-captions button:last-child{text-align:right;background:#233b57}
.comparison-captions button[aria-pressed=true]{background:#d8ecff;color:#103768}
.comparison-captions button b{display:block}.comparison-captions button small{display:block;font-size:calc(9 * var(--u));margin-top:4px}
.comparison-captions button>i{position:absolute;bottom:0;left:0;right:0;height:3px;background:#2cb6ff;transform:scaleX(0);transform-origin:left}
.comparison-captions button[aria-pressed=true]>i{transform:scaleX(var(--compare-progress,1))}
.compare-art-stage{position:relative;overflow:hidden;isolation:isolate}
.compare-art-stage img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.compare-shade{position:absolute;top:0;bottom:0;background:#061729;opacity:0;transition:opacity .8s;pointer-events:none}
.shade-before{left:0;width:42%}.shade-after{right:0;width:58%}
[data-compare-view=after] .shade-before,[data-compare-view=before] .shade-after{opacity:.38}
.compare-focus{position:absolute;inset:0 0 0 42%;border:2px solid #70cfff;box-shadow:inset 0 0 16px #2daaff35;pointer-events:none;transition:inset .8s cubic-bezier(.25,.7,.2,1),border-color .8s}
[data-compare-view=before] .compare-focus{inset:0 58% 0 0;border-color:#a3c2e3}
.compare-pin{position:absolute;bottom:6%;padding:calc(5 * var(--u)) calc(8 * var(--u));border:1px solid #92d5ff66;border-radius:6px;background:#061d32ee;color:#eef9ff;font-size:calc(8 * var(--u));display:flex;align-items:center;gap:4px;box-shadow:0 3px 12px #0003;opacity:0;transform:translateY(8px);transition:opacity .5s .3s,transform .5s .3s;pointer-events:none}
.pin-before{left:3%}.pin-after{right:4%}.pin-after .icon{color:#63e9ac;width:14px;height:14px}
[data-compare-view=before] .pin-before,[data-compare-view=after] .pin-after{opacity:1;transform:none}
.compare-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:47px;padding:7px 12px;font-size:clamp(10px,.8vw,13px);color:#afc9e4}
.compare-controls button{display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid #456787;border-radius:7px;color:#c5e2ff;background:#142d46;font-size:11px;white-space:nowrap}
.compare-controls button svg{width:12px;height:12px}.compare-controls button:disabled{opacity:.5}
.compare-after .button{min-height:44px;line-height:1.5}

/* Code-to-interface illustration, synchronized with the existing technology rail. */
.technology{padding-block:calc(36 * var(--u)) calc(30 * var(--u))}
.technology-top{grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:calc(25 * var(--u));align-items:center;margin-bottom:calc(24 * var(--u))}
.technology-intro{position:relative;padding-bottom:calc(36 * var(--u))}
.technology h2{font-size:calc(35 * var(--u));line-height:1.17}
.technology .technology-intro>p{font-size:calc(13 * var(--u));line-height:1.65;margin-top:calc(15 * var(--u));max-width:94%}
.technology-intro .handnote{position:absolute;right:0;bottom:calc(-8 * var(--u));top:auto;width:calc(88 * var(--u));margin:0;opacity:.8}
.tech-lab{font-size:clamp(11px,1.05vw,16px);border-radius:13px;overflow:hidden;border:1px solid #234667;background:#0c1c32;box-shadow:0 14px 34px #174a8620;color:#e8f5ff}
.tech-lab-header{display:flex;align-items:center;gap:12px;padding:.85em 1em;background:#13263e;border-bottom:1px solid #31425c;font:inherit}
.tech-lab-header>span{display:flex;gap:4px}.tech-lab-header i{display:block;width:6px;height:6px;border-radius:50%;background:#ff736b}.tech-lab-header i:nth-child(2){background:#f4c54e}.tech-lab-header i:nth-child(3){background:#35c896}
.tech-lab-header b{font:400 .8em ui-monospace,SFMono-Regular,Consolas,monospace;color:#a6c7e8}.tech-lab-header small{margin-left:auto;font:400 .52em Arial,sans-serif;letter-spacing:.13em;color:#85a2c3}
.tech-lab-body{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);min-height:15em}
.tech-code{padding:1.5em .7em 1.3em .6em;overflow:hidden;align-self:center}
.tech-code>div{display:flex;gap:.7em;min-height:2.25em;align-items:center;white-space:pre}
.tech-code em{font:400 .7em ui-monospace,monospace;color:#496080;width:1.2em;text-align:right;flex:none}
.tech-code code{font:.76em/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;color:#79d6f5;white-space:pre}
.tech-code>div:nth-child(3) code{color:#c4b0ff}.tech-code>div:nth-child(4) code{color:#8fdfb2}
.tech-code .code-writing:after{content:'';display:inline-block;vertical-align:-2px;margin-left:2px;width:1px;height:1em;background:#72daff;animation:system-cursor .7s steps(1) infinite}
.tech-result{background:#112941;padding:1.5em 1em;display:flex;flex-direction:column;justify-content:center;gap:1em;overflow:hidden}
.tech-mini-window{background:#f5faff;border:1px solid #bfdef7;border-radius:6px;overflow:hidden;box-shadow:0 4px 12px #0002}
.tech-mini-nav{display:flex;align-items:center;gap:5px;padding:.8em .65em;border-bottom:1px solid #e0edf7;transition:opacity .5s,transform .5s}
.tech-mini-nav b{font:700 .4em Arial,sans-serif;color:#183c64;margin-right:auto}.tech-mini-nav i{height:2px;width:11px;background:#7a96b4;border-radius:2px}
.tech-mini-hero{padding:1.1em .7em;background:linear-gradient(140deg,#e7f6ff,#bcddff);color:#123b67;min-height:7.5em;transition:opacity .5s,transform .5s}
.tech-mini-hero small{font:.3em Arial,sans-serif;letter-spacing:.1em;color:#4f83b6;display:block}.tech-mini-hero strong{font-size:.95em;line-height:1.35;display:block;margin:.6em 0}.tech-mini-hero>span{display:block;width:44%;height:.6em;border-radius:5px;background:#1682ff}
.tech-mini-content{display:flex;gap:.45em;padding:.7em;transition:opacity .5s,transform .5s}.tech-mini-content i{width:33%;height:1.8em;background:#e3edf5;border-radius:3px}.tech-mini-content i:nth-child(2){background:#d8e7f4}.tech-mini-content i:nth-child(3){background:#c9e0f4}
.tech-result>small{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.6em;color:#9cbeda}.tech-result>small>i{width:4px;height:4px;border-radius:50%;background:#49d5a8}
.tech-lab-footer{display:flex;align-items:center;justify-content:space-between;padding:.75em 1.1em;background:#0a1b2e;border-top:1px solid #233952;font-size:.68em;color:#99bfe5}
.tech-lab-dots{display:flex;gap:5px}.tech-lab-dots i{height:3px;width:16px;border-radius:3px;background:#254565}.tech-lab-dots i.is-active{background:#42bcff}
.technology-proof .wordpress-note{margin-top:14px;border:0;padding:0;background:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;max-width:none}
.technology-proof .wordpress-note>div{border:0;padding:0;gap:9px}.technology-proof .wordpress-note strong{font-size:calc(10 * var(--u));line-height:1.55}.technology-proof .wordpress-note .icon{width:24px;height:24px;filter:none;stroke-width:2}.technology-proof .wordpress-note p{font-size:calc(9 * var(--u));line-height:1.55;margin:0;padding-left:12px;border-left:1px solid #d8e7f5}
.technology-grid{position:relative;gap:calc(10 * var(--u))}
.technology-grid:before{content:'';position:absolute;left:4%;right:4%;top:calc(33 * var(--u));height:1px;background:#c4def7}
.technology-grid article{position:relative;background:#fff;overflow:hidden}
.technology-grid article:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6ed8ff,#1d71ff);opacity:0;transition:opacity .3s}
.technology-grid article.is-working{border-color:#65b7ff;box-shadow:0 5px 20px #297adb15}.technology-grid article.is-working:after{opacity:1}
.technology-grid .is-working .icon{filter:drop-shadow(0 0 8px #56bfff50)}

@media(min-width:761px) and (max-width:1000px){.art-banner>.process-cta,.art-banner>.team-cta{min-height:34px;font-size:10px}.technology h2{font-size:30px}.comparison{grid-template-columns:minmax(0,30fr) minmax(0,48fr) minmax(0,22fr);gap:12px}.comparison-captions button{font-size:11px}.comparison-captions button small{font-size:8px}.compare-controls{font-size:9px}.tech-lab{font-size:11px}.tech-code code{font-size:.7em}.benefit-grid h3{font-size:12px}.benefit-grid p{font-size:11px}}
@media(max-width:760px){
 .art-banner>.process-cta,.art-banner>.team-cta{min-height:42px;max-width:65%;font-size:12px;padding:10px 20px}
 .art-banner>.process-cta{top:auto;bottom:5%;left:10%}
 .art-banner>.team-cta{top:30.5%;left:9.5%}
 .benefits{padding:30px 18px}.benefits>h2{font-size:24px;line-height:1.35;margin-bottom:12px}.benefit-grid{gap:24px 10px}.benefit-grid article{padding:0 3px;border:0}.benefit-scene{height:148px;max-width:175px;margin-bottom:13px}.benefit-scene .benefit-art{width:117px;left:calc(50% - 58.5px);top:-19px}.benefit-signal{font-size:9px;padding:4px 8px}.ownership-seal{width:27px;height:27px;right:8%;bottom:25%;border-width:2px}.edit-trace{width:33px;padding:6px;gap:4px;right:2%;top:20%}.chat-typing{right:0;top:18%;padding:8px}.benefit-grid h3{font-size:13px;line-height:1.45}.benefit-grid p{font-size:11px;line-height:1.65}.search-orbit{left:12%;top:12%}
 .comparison{grid-template-columns:1fr;padding:30px 20px;gap:23px}.comparison-captions button{min-height:63px;font-size:12px;padding:10px}.comparison-captions button small{font-size:9px}.compare-pin{font-size:8px;padding:4px 6px;bottom:5%}.pin-after{right:3%}.pin-after .icon{height:11px;width:11px}.compare-controls{font-size:10px;padding:7px 10px}.compare-controls button{min-height:42px;font-size:11px}.compare-after .button{min-height:46px;font-size:12px}.compare-art-stage img{aspect-ratio:auto}
 .technology{padding:32px 20px}.technology-top{grid-template-columns:1fr;gap:22px;margin-bottom:22px}.technology-intro{padding:0}.technology h2{font-size:29px;line-height:1.23}.technology .technology-intro>p{font-size:13px;line-height:1.65;max-width:100%;margin-top:14px}.technology-intro .handnote{display:none}.tech-lab{font-size:11px;border-radius:11px}.tech-lab-body{grid-template-columns:minmax(0,55fr) minmax(0,45fr);min-height:180px}.tech-code{padding:15px 5px}.tech-code code{font-size:8.8px}.tech-code>div{gap:6px;min-height:25px}.tech-code em{font-size:8px}.tech-result{padding:15px 9px}.tech-mini-hero strong{font-size:11px}.tech-lab-header{padding:11px}.tech-lab-header b{font-size:10px}.tech-lab-header small{font-size:6px}.tech-lab-footer{font-size:9px;padding:10px 12px}.tech-result>small{font-size:8px}.technology-proof .wordpress-note{gap:9px;margin-top:15px}.technology-proof .wordpress-note strong{font-size:10px}.technology-proof .wordpress-note p{font-size:9px;padding-left:9px}.technology-proof .wordpress-note .icon{height:22px;width:22px;flex:none}.technology-grid:before{display:none}.technology-grid article{padding:16px 5px 13px}
}
@media(max-width:360px){.art-banner>.process-cta,.art-banner>.team-cta{min-height:36px;font-size:10px;padding:8px 15px}.benefits{padding-inline:14px}.benefit-grid{gap:22px 7px}.benefit-grid h3{font-size:12px}.benefit-grid p{font-size:10px}.benefit-signal{font-size:8px}.technology{padding-inline:15px}.tech-code code{font-size:7.5px}.tech-code>div{gap:4px}.tech-mini-hero strong{font-size:10px}.tech-result>small{font-size:7px}.technology h2{font-size:27px}.comparison{padding-inline:15px}.compare-pin{font-size:7px}.pin-after .icon{width:9px;height:9px}.comparison-captions button{font-size:11px}}
html:not(.motion-enabled) .benefit-scene *{animation:none!important}
html:not(.motion-enabled) .benefit-signal,html:not(.motion-enabled) .ownership-seal{opacity:1;translate:none}
.motion-tab-hidden .benefit-scene *,.motion-tab-hidden .benefit-scene *:after{animation-play-state:paused!important}
.tech-code .code-writing:after{animation-play-state:paused}.motion-enabled .technology.story-running .tech-code .code-writing:after{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.benefit-scene *,.benefit-scene *:after{animation:none!important}.benefit-signal,.ownership-seal{opacity:1}.comparison-image *,.tech-lab *{transition:none!important}}