/* v4: sign-in gate + looping walkthrough clips */
.clips{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.clip{margin:0;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--ln);border-radius:18px;overflow:hidden}
.clip .screen{position:relative;aspect-ratio:16/10;background:var(--bg);border-bottom:1px solid var(--ln)}
.clip video,.clip .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip .poster{display:none}
.clip .step{position:absolute;left:12px;top:10px;font:800 13px/1 system-ui;background:var(--c);color:var(--on-c);padding:6px 9px;border-radius:99px}
.clip .rec{position:absolute;right:12px;top:10px;font:700 11px/1 system-ui;letter-spacing:.08em;color:var(--tx);background:#000a;padding:6px 9px;border-radius:99px}
.clip figcaption{padding:16px 20px 20px}.clip h3{margin:0 0 6px}.clip p{margin:0;color:var(--tx2)}
#gate{padding:40px 0}
.gatebox{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;border:2px solid var(--c);border-radius:22px;padding:28px;background:radial-gradient(ellipse at top left,rgb(var(--c-rgb)/0.13),transparent 60%),var(--bg2);box-shadow:0 0 40px rgb(var(--c-rgb)/0.20)}
.gatebox h2{margin:6px 0}.gatebox .row{margin-top:14px}.gmasc{height:150px;position:relative}
@media(max-width:760px){.clips{grid-template-columns:1fr}.gatebox{grid-template-columns:1fr;text-align:center}.gatebox .row{justify-content:center}.gmasc{height:120px}}
@media(prefers-reduced-motion:reduce){.clip video{display:none}.clip .poster{display:block}.clip .rec{display:none}}
/* v8: gate layout fix — Patch beside text, no overlay */
#gate{padding:110px 0 60px;margin-top:40px}
.gatebox{display:grid;grid-template-columns:140px minmax(0,1fr);gap:28px;align-items:center;position:relative;isolation:isolate}
.gatebox>*{min-width:0}
.gmasc{position:relative!important;width:140px;height:160px;overflow:visible;z-index:0;pointer-events:none}
.gmasc .patch{position:static!important;width:100%!important;height:100%!important;max-width:140px!important;display:block;pointer-events:auto}
.gmasc .patch-bubble{left:70%;top:-18px;z-index:1}
.gatebox h2,.gatebox .sub{position:relative;z-index:2}
.gatebox .row{position:relative;z-index:3}
@media(max-width:760px){#gate{padding:80px 0 40px}.gatebox{grid-template-columns:1fr;gap:14px}.gmasc{width:96px;height:110px;margin:0 auto}.gmasc .patch{max-width:96px!important}.gmasc .patch-bubble{left:50%;top:-30px;transform:translateX(-50%)}.gmasc{margin-top:22px}}