/* Alternate layout: quiet operation demos punctuated by a large photo story. */
.reveal-ready{opacity:0;transition:opacity 1.15s ease,translate 1.2s cubic-bezier(.2,.65,.25,1)}
.reveal-ready.is-visible{opacity:1}
.results-gallery.reveal-ready{translate:none}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transition:none}}
.demo-section{padding:32px 0}
.demo-card,.demo-card.layout-card{max-width:900px;border:0;border-radius:0;box-shadow:none;background:#fff;padding:28px 24px;column-gap:32px;row-gap:0}
.demo-card .demo-media,.demo-card.layout-card .demo-media{width:160px;transform:none;animation:none;translate:none;filter:drop-shadow(0 10px 12px #11131518)}
.demo-card .demo-copy .feature-title{background:transparent;color:#111315;border:0;padding:0;font-size:clamp(1.5rem,5vw,2rem);gap:12px;justify-content:flex-start}
.demo-card .demo-copy .feature-title::before{display:none}
.demo-card .feature-number,.demo-card .feature-icon{color:#087e79}
.demo-card .demo-copy,.layout-card .demo-copy{text-align:left}
.demo-card .demo-copy .lead{margin:16px 0 24px;color:#505255}
.demo-card .video-note{font-size:.75rem;text-align:center;margin:16px 0 0}
.sec.demo-section:has(.layout-card){background:#f2f5f4;padding:40px 0}
.demo-card.layout-card{background:transparent}
.results-gallery{background:#101817;color:#fff;padding:48px 0;margin:24px 0;overflow:hidden}
.results-heading{max-width:1000px;margin:0 auto 28px;padding:0 24px}
.results-eyebrow{color:#69ded7;font-size:.875rem;font-weight:600;margin:0 0 16px;letter-spacing:.05em}
.results-heading h2{font-size:clamp(1.75rem,5vw,3rem);line-height:1.4;letter-spacing:-.04em;margin:0;font-weight:750}
.results-heading>p:last-child{font-size:1rem;line-height:1.8;color:#c2d9d6;margin:20px 0 0}
.results-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;padding:12px 24px 16px;scrollbar-width:thin;scrollbar-color:#69ded7 #101817}
.result-pair{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.2fr);gap:10px;align-items:center;flex:0 0 100%;max-width:920px;margin:0 auto;scroll-snap-align:center}
.result-pair figure{position:relative;margin:0;min-width:0}
.result-pair figure img{display:block;width:100%;height:auto;border-radius:4px;aspect-ratio:3/4;object-fit:cover}
.result-pair figcaption{position:static;display:block;text-align:left;background:transparent;color:#e6eeec;font-size:.8125rem;line-height:1.5;padding:12px 0 0;white-space:normal}
.pair-arrow{color:#69ded7;font-size:1.5rem;text-align:center}
.gallery-controls{justify-content:center;gap:12px;margin:20px auto 0}
.gallery-controls:not([hidden]){display:flex}
.gallery-controls button{background:transparent;color:#fff;border:1px solid #ffffff55;border-radius:24px;min-height:44px;min-width:44px;padding:8px 16px;cursor:pointer;font:inherit}
@media(min-width:760px){
 .demo-section{padding:44px 0}
 .demo-card{grid-template-columns:minmax(0,1fr) 180px;padding:32px 48px}
 .demo-card.layout-card{grid-template-columns:180px minmax(0,1fr)}
 .demo-card .demo-media,.demo-card.layout-card .demo-media{width:180px}
 .demo-card .demo-copy{align-self:end}
 .demo-card .video-note{text-align:left;align-self:start;margin-top:24px}
 .layout-card .demo-copy{padding-left:40px}
 .layout-card .video-note{padding-left:40px}
 .results-gallery{padding:72px 0}
 .results-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end;margin-bottom:36px}
 .results-eyebrow{grid-column:1/-1}
 .results-heading>p:last-child{max-width:24ch;justify-self:end}
 .result-pair{gap:24px;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.2fr)}
 .pair-arrow{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){.results-track{scroll-behavior:auto}}
/* Compact image strip: half-scale photos and a single short heading. */
.results-gallery{padding:24px 0;margin:16px 0}
.results-heading{display:block;margin:0 auto 12px;padding:0 24px;text-align:center}
.results-heading h2{font-size:clamp(.875rem,3.5vw,1.125rem);line-height:1.5;letter-spacing:0;font-weight:600}
.results-track{padding:0 24px 4px}
.result-pair{flex:0 0 min(100%,460px);max-width:460px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.2fr);gap:12px}
.result-pair figure img{max-height:220px;object-fit:contain;aspect-ratio:3/4}
.result-pair figcaption{text-align:center;font-size:.75rem;padding-top:6px}
.pair-arrow{font-size:1.25rem}
.results-gallery{background:radial-gradient(ellipse at 50% 88%,#d9eae7 0%,#edf5f3 42%,#fafcfb 76%);color:#111315}
.results-heading h2{color:#173b38}
.results-track{scrollbar-color:#9acac4 #edf5f3;padding-bottom:12px}
.result-pair figure{isolation:isolate}
.result-pair figure::before{content:"";position:absolute;left:9%;right:9%;bottom:27px;height:14px;background:radial-gradient(ellipse,#163f3c55 0%,#163f3c20 42%,transparent 72%);filter:blur(5px);transform:translateY(50%) scaleX(1.18);z-index:-1;pointer-events:none}
.result-pair figure img{filter:drop-shadow(0 7px 7px #173b3820)}
.result-pair figcaption{position:relative;color:#42605c;margin-top:8px}
.pair-arrow{color:#087e79}
.gallery-controls button{color:#173b38;border-color:#173b3840}
/* Upright image panels on an X/Z ground plane, not floating drop shadows. */
.results-gallery{background:linear-gradient(180deg,#fcfdfc 0%,#f5f9f7 62%,#e2eeea 63%,#f7faf8 100%)}
.results-track{padding-top:8px;padding-bottom:30px;perspective:900px;perspective-origin:50% 40%}
.result-pair{align-items:end;padding-bottom:22px;transform-style:preserve-3d}
.result-pair figure{transform-style:preserve-3d;perspective:700px;perspective-origin:50% 45%}
.result-pair .pair-source{transform:rotateY(9deg)}
.result-pair .pair-output{transform:rotateY(-9deg)}
.result-pair figure img{position:relative;z-index:1;filter:none;border-radius:1px;border:1px solid #fff;box-shadow:2px 0 0 #a6b7b1,0 2px 2px #183d3840}
.result-pair figure::before{left:1%;right:1%;top:auto;bottom:0;height:48px;background:linear-gradient(0deg,#244a4560 0%,#244a4526 40%,transparent 100%);filter:blur(4px);transform-origin:50% 100%;transform:rotateX(68deg) skewX(-18deg);z-index:0}
.result-pair figure::after{content:"";position:absolute;left:-2%;right:-2%;height:6px;bottom:-3px;background:radial-gradient(ellipse,#23413c70,transparent 72%);filter:blur(2px);pointer-events:none}
.result-pair figcaption{position:absolute;top:100%;left:0;right:0;bottom:auto;margin-top:9px;padding:0;background:none;transform:none}
.pair-arrow{align-self:center}
@media(max-width:759px){.result-pair{flex-basis:min(100%,250px);max-width:250px;gap:8px;grid-template-columns:minmax(0,1fr) 16px minmax(0,1.2fr)}.result-pair figure img{max-height:145px}}
/* Fit the panel to the photo itself, without contain-generated side gutters. */
.result-pair{flex:0 0 min(100%,378px);max-width:378px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
.result-pair figure img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:initial}
.result-pair figure::before{left:0;right:0}
.result-pair figure::after{left:0;right:0}
@media(max-width:759px){.result-pair{flex-basis:min(100%,250px);max-width:250px;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}}
/* Recessed teal cards, cut across by an independent full-bleed photo strip. */
.demo-card,.demo-card.layout-card{
 border-radius:28px;
 background:radial-gradient(ellipse at 50% 42%,#ffffff 0%,#f6fdfc 38%,#e5f5f3 75%,#cfe9e6 100%);
 box-shadow:inset 0 1px 2px #087e7914;
}
.sec.demo-section:has(.light-card){padding-bottom:0}
.demo-card.light-card{padding-bottom:60px}
.results-gallery{
 position:relative;
 z-index:2;
 width:100%;
 max-width:none;
 margin:-28px 0 0;
 border-radius:0;
 border-top:1px solid #0abab5;
 background:radial-gradient(ellipse at 50% 20%,#ffffff 0%,#f4fbfa 52%,#e3f2f0 100%);
}
.sec.demo-section:has(.layout-card){background:#fff}
@media(min-width:760px){
 .demo-card,.demo-card.layout-card{border-radius:36px}
 .demo-card.light-card{padding-bottom:68px}
 .results-gallery{margin-top:-36px}
}
/* Compact, borderless source-to-result animation. */
.merge-viewport{position:relative;overflow:hidden;height:124px}
.merge-viewport .merge-stage{position:absolute;inset:0;max-width:none;visibility:hidden}
.merge-viewport .merge-stage.is-active{visibility:visible}
@media(min-width:760px){.merge-viewport{height:152px}}
.results-gallery{padding:12px 0 14px}
.results-heading{margin-bottom:8px}
.results-heading h2{font-size:.875rem}
.merge-stage{position:relative;height:124px;max-width:420px;margin:auto;--merge-shift:62px}
.merge-panel{position:absolute;top:0;left:50%;width:74px;margin:0;transform:translateX(-50%)}
.merge-panel img{display:block;width:100%;height:100px;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.merge-panel figcaption{position:static;display:block;margin:5px -24px 0;padding:0;background:none;color:#42605c;transform:none;font-size:.75rem;line-height:1.4;text-align:center;white-space:nowrap}
.merge-panel::after{content:"";position:absolute;top:97px;left:0;width:100%;height:8px;background:radial-gradient(ellipse,#134c4338,transparent 72%);filter:blur(3px);z-index:-1}
.merge-salon{animation:merge-salon 7s ease-in-out infinite}
.merge-style{animation:merge-style 7s ease-in-out infinite}
.merge-result{animation:merge-result 7s ease-in-out infinite}
.merge-plus{position:absolute;left:50%;top:36px;transform:translateX(-50%);color:#087e79;animation:merge-plus 7s ease-in-out infinite}
.merge-toggle{position:absolute;right:12px;bottom:4px;width:44px;height:44px;border:0;background:transparent;color:#087e79;cursor:pointer;font-size:14px}
.results-gallery.is-paused .merge-stage>*{animation-play-state:paused}
@keyframes merge-salon{0%,22%,100%{transform:translateX(calc(-50% - var(--merge-shift)));opacity:1}42%{transform:translateX(-50%);opacity:.65}50%,82%{transform:translateX(-50%);opacity:0}}
@keyframes merge-style{0%,22%,100%{transform:translateX(calc(-50% + var(--merge-shift)));opacity:1}42%{transform:translateX(-50%);opacity:.65}50%,82%{transform:translateX(-50%);opacity:0}}
@keyframes merge-result{0%,38%,94%,100%{opacity:0;transform:translateX(-50%) scale(.96)}52%,78%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes merge-plus{0%,20%,100%{opacity:1}32%,88%{opacity:0}}
@media(min-width:760px){.merge-stage{height:152px;--merge-shift:78px}.merge-panel{width:94px}.merge-panel img{height:126px}.merge-panel::after{top:123px}.merge-plus{top:48px}}
@media(prefers-reduced-motion:reduce){
 .merge-stage{display:flex;justify-content:center;gap:20px;height:auto;padding-bottom:4px}
 .merge-stage .merge-panel{position:relative;left:auto;top:auto;transform:none;animation:none;opacity:1}
 .merge-plus,.merge-toggle{display:none}
}

.merge-stage>*{animation:none}
.merge-stage .merge-salon{transform:translateX(calc(-50% - var(--merge-shift)))}
.merge-stage .merge-style{transform:translateX(calc(-50% + var(--merge-shift)))}
.merge-stage .merge-result{opacity:0}
.merge-stage.is-running .merge-salon{animation:generate-salon 7s ease-in-out both}
.merge-stage.is-running .merge-style{animation:generate-style 7s ease-in-out both}
.merge-stage.is-running .merge-result{animation:generate-result 7s ease-in-out both}
.merge-stage.is-running .merge-plus{animation:generate-plus 7s ease-in-out both}
@keyframes generate-salon{0%,22%{transform:translateX(calc(-50% - var(--merge-shift)));opacity:1}42%{transform:translateX(-50%);opacity:.65}50%,100%{transform:translateX(-50%);opacity:0}}
@keyframes generate-style{0%,22%{transform:translateX(calc(-50% + var(--merge-shift)));opacity:1}42%{transform:translateX(-50%);opacity:.65}50%,100%{transform:translateX(-50%);opacity:0}}
@keyframes generate-result{0%,38%{opacity:0;transform:translateX(-50%) scale(.96)}52%,100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes generate-plus{0%,20%{opacity:1}32%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.merge-viewport{height:auto;display:grid;gap:16px}
.merge-viewport .merge-stage{position:relative;inset:auto;visibility:visible;width:100%}
.merge-viewport .merge-stage .merge-panel{animation:none;transform:none;opacity:1}
}