/* GALOK Home — MixMatter feature · v4 · 2026-10-08
   Mirrors the product page: a live source/result comparison instead of static plates. */
.home-mm-feature{
  --mm-blue:#1769ff;--mm-ink:#0a0d0c;--mm-muted:#56615c;--mm-line:#d3dbd7;--mm-paper:#eef2f0;
  --mm-mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,"Roboto Mono","Liberation Mono",Menlo,monospace;
  width:min(1440px,calc(100% - 56px));margin-inline:auto;color:var(--mm-ink)
}
.home-mm-feature__rail{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;min-height:52px;border-top:1px solid var(--mm-line);border-bottom:1px solid var(--mm-line);font:700 10px/1.2 var(--mm-mono);letter-spacing:.11em;text-transform:uppercase}
.home-mm-feature__rail p{margin:0;color:var(--mm-blue)}
.home-mm-feature__rail span{color:var(--mm-muted)}
.home-mm-feature__rail a{justify-self:end;color:var(--mm-ink);text-decoration:none}
.home-mm-feature__body{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);border-bottom:1px solid var(--mm-line)}

/* copy */
.home-mm-feature__copy{display:flex;flex-direction:column;justify-content:space-between;gap:44px;padding:clamp(50px,7vw,92px) clamp(36px,5vw,72px) clamp(46px,6vw,76px) 0}
.home-mm-feature__copy>div:first-child>small{font:700 10px/1.2 var(--mm-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mm-muted)}
.home-mm-feature__copy h2{display:grid;margin:26px 0 0;font-family:Inter,MiSans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(72px,8.3vw,126px);font-weight:900;line-height:.78;letter-spacing:-.075em}
.home-mm-feature__copy h2 span{color:var(--mm-ink)}
.home-mm-feature__copy h2 b{padding-left:.11em;color:var(--mm-blue);font-weight:900}
.home-mm-feature__copy>div:first-child>p{max-width:510px;margin:34px 0 0;color:var(--mm-muted);font-size:17px;line-height:1.62}
.home-mm-feature__meta{display:grid;border-top:1px solid var(--mm-line)}
.home-mm-feature__meta span{padding:12px 0;border-bottom:1px solid var(--mm-line);color:var(--mm-muted);font:700 10px/1.2 var(--mm-mono);letter-spacing:.1em}
.home-mm-feature__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.home-mm-feature__primary{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:0 18px;background:var(--mm-blue);color:#fff!important;text-decoration:none;font:700 11px/1 var(--mm-mono);letter-spacing:.08em;text-transform:uppercase}
.home-mm-feature__badge{min-height:52px;display:inline-flex;align-items:center;gap:11px;padding:7px 14px 7px 10px;border:1px solid var(--mm-line);background:#fff;color:var(--mm-ink)!important;text-decoration:none}
.home-mm-feature__badge img{width:30px;height:30px}
.home-mm-feature__badge span{display:grid;gap:2px}
.home-mm-feature__badge small,.home-mm-feature__badge strong{font-family:var(--mm-mono);color:var(--mm-ink)!important}
.home-mm-feature__badge small{font-size:10px;letter-spacing:.08em;color:var(--mm-muted)!important}
.home-mm-feature__badge strong{font-size:12px;letter-spacing:.06em}

/* stage: one live comparison on a cobalt field */
.home-mm-feature__stage{position:relative;display:grid;place-items:center;padding:clamp(56px,6vw,96px) clamp(40px,5vw,84px) clamp(48px,5vw,80px);border-left:1px solid var(--mm-line);background:var(--mm-paper);isolation:isolate}
.home-mm-feature__live{position:relative;width:100%;margin:0}
.home-mm-feature__live::before{content:"";position:absolute;z-index:-1;inset:20px -18px 40px 20px;background:var(--mm-blue)}
.home-mm-feature__live figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:30px;font:700 10px/1.4 var(--mm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mm-muted)}
.home-mm-feature__live figcaption a{color:var(--mm-ink);text-decoration:none;white-space:nowrap}
.home-mm-feature__live figcaption a:hover{color:var(--mm-blue)}

.home-mm-compare{--pos:50%;position:relative;overflow:hidden;aspect-ratio:4/3;background:#e3e9e6;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.home-mm-compare.is-dragging{cursor:grabbing}
.home-mm-feature .home-mm-compare__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.home-mm-compare__img--source{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.home-mm-compare__tag{position:absolute;z-index:3;top:12px;padding:7px 9px;background:#fff;color:var(--mm-ink);font:700 10px/1 var(--mm-mono);letter-spacing:.14em;pointer-events:none}
.home-mm-compare__tag--source{left:12px}
.home-mm-compare__tag--result{right:12px;background:var(--mm-blue);color:#fff}
.home-mm-compare__handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(10,13,12,.2);pointer-events:none}
.home-mm-compare__handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;background:#fff;border:2px solid var(--mm-ink)}
.home-mm-compare__handle i::before{content:"\2039\00a0\203A";font:800 17px/1 Inter,"Helvetica Neue",Arial,sans-serif;color:var(--mm-ink)}
.home-mm-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.home-mm-compare:has(.home-mm-compare__range:focus-visible) .home-mm-compare__handle i{outline:3px solid var(--mm-blue);outline-offset:3px}

/* vector stickers, pinned to the frame corners */
.home-mm-feature .home-mm-feature__fruit,.home-mm-feature .home-mm-feature__sticker{position:absolute;z-index:6;display:block;height:auto;max-width:none;pointer-events:none;will-change:transform}
.home-mm-feature__sticker--airplane{right:18%;top:0;width:clamp(84px,8.5vw,136px);transform:rotate(36deg);animation:mm-fly 7.5s ease-in-out infinite}
.home-mm-feature__fruit--pineapple{left:1%;top:4%;width:clamp(70px,7.5vw,118px);transform:rotate(-10deg);animation:mm-fruit-pineapple 6.8s ease-in-out infinite}
.home-mm-feature__fruit--orange{right:1%;bottom:14%;width:clamp(64px,6.5vw,104px);transform:rotate(9deg);animation:mm-fruit-orange 5.6s ease-in-out infinite}
.home-mm-feature__fruit--grapes{left:1%;bottom:34%;width:clamp(64px,6.5vw,104px);transform:rotate(-7deg);animation:mm-fruit-grapes 7.2s ease-in-out infinite}
@keyframes mm-fly{0%,100%{transform:translate3d(0,0,0) rotate(36deg)}50%{transform:translate3d(-14px,-10px,0) rotate(40deg)}}
@keyframes mm-fruit-pineapple{0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}50%{transform:translate3d(5px,-10px,0) rotate(-7deg)}}
@keyframes mm-fruit-orange{0%,100%{transform:translate3d(0,0,0) rotate(9deg)}50%{transform:translate3d(-7px,8px,0) rotate(14deg)}}
@keyframes mm-fruit-grapes{0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(10px,-7px,0) rotate(-3deg)}}

@media(max-width:960px){
  .home-mm-feature{width:min(100% - 32px,1440px)}
  .home-mm-feature__body{grid-template-columns:1fr}
  .home-mm-feature__copy{padding-right:0}
  .home-mm-feature__stage{border-left:0;border-top:1px solid var(--mm-line);padding:56px 28px 48px}
}
@media(max-width:620px){
  .home-mm-feature{width:min(100% - 24px,1440px)}
  .home-mm-feature__rail{grid-template-columns:1fr auto}
  .home-mm-feature__rail span{display:none}
  .home-mm-feature__copy h2{font-size:clamp(70px,23vw,104px)}
  .home-mm-feature__copy h2 b{padding-left:0}
  .home-mm-feature__stage{padding:48px 14px 40px}
  .home-mm-feature__live::before{inset:12px -8px 46px 12px}
  .home-mm-feature__live figcaption{flex-direction:column;gap:8px}
  .home-mm-compare__handle i{width:38px;height:38px;margin:-19px 0 0 -19px}
  .home-mm-feature__sticker--airplane{right:14%;top:0}
  .home-mm-feature__fruit--pineapple{left:-2%;top:2%}
  .home-mm-feature__fruit--orange{right:-2%;bottom:20%}
  .home-mm-feature .home-mm-feature__fruit--grapes{display:none}
}
@media(prefers-reduced-motion:reduce){.home-mm-feature__fruit,.home-mm-feature__sticker{animation:none!important}}