:root {--lead-paper:var(--lemon)}
body:has(.why-lead){--lead-paper:#d6e8fc}
body>header {background:color-mix(in srgb,var(--lead-paper),white var(--header-mix,0%))}
.hero,.why-lead {position:relative;isolation:isolate;background:transparent;--draw:0;--side:clamp(16px,6vw,100px)}
.hero::before,.why-lead::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--lead-paper);clip-path:inset(0 calc(var(--side) * var(--draw)) 0 round 0 0 calc(44px * var(--draw)) calc(44px * var(--draw)))}
.trust .partner-intro{display:grid;grid-template-columns:1fr;justify-items:start;gap:10px}
.partner-intro>span{font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.partner-control{border:1px solid #aca8a1;border-radius:20px;padding:7px 12px;background:#faf9f6;font-size:12px;font-weight:600}
.trust .partner-window{display:block;container-type:inline-size;min-width:0;overflow:hidden;padding:5px 0}
.partner-belt{display:flex;width:max-content}
.partner-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-right:12px;width:max(100cqw,570px)}
.partner-mark{position:relative;isolation:isolate;overflow:hidden}
.trust .mark-rc{background:radial-gradient(ellipse at 10% 0,#53342f,transparent 70%),#302529}
.trust .mark-uj{background:radial-gradient(ellipse at 93% 0,#4a412b,transparent 70%),#26251f}
.trust .mark-ibc{background:radial-gradient(ellipse at 93% 0,#3c435c,transparent 70%),#252837}
.partner-mark::before{content:"";position:absolute;z-index:-1;right:-30px;top:-28px;width:74px;height:74px;border:1px solid #ffffff12;border-radius:50%;box-shadow:0 0 0 12px #ffffff06}
.partner-belt.is-running{animation:partner-travel 29s linear infinite}
@keyframes partner-travel{to{transform:translateX(-50%)}}
.partner-window:not(.in-view) .partner-belt,.partner-belt:hover{animation-play-state:paused}
.partner-window:has(:focus-visible) .partner-belt,.partner-window.is-static .partner-belt{animation:none;transform:none}
.partner-window:has(:focus-visible) .partner-set,.partner-window.is-static .partner-set{width:100cqw;padding-right:0}
.partner-window:has(:focus-visible) .partner-repeat,.partner-window.is-static .partner-repeat{display:none}
.partner-mark:focus-visible{outline:3px solid #fff08e;outline-offset:-5px}
@media(max-width:740px){.hero,.why-lead{--side:12px}.trust .partner-intro{display:flex;align-items:center;justify-content:space-between}.partner-set{gap:9px;padding-right:9px;width:max(100cqw,480px)}.trust .partner-mark img{height:57px}.trust .partner-mark{grid-template-rows:57px auto}}
@media(prefers-reduced-motion:reduce){.hero::before,.why-lead::before{clip-path:none}.partner-belt.is-running{animation:none}.partner-repeat{display:none}.partner-set{width:100cqw;padding-right:0}}

.partner-belt:not(.is-running) .partner-set{width:100cqw;padding-right:0}
@media(max-width:740px){body:has(.why-lead) .nav nav{background:var(--lead-paper)}}

/* Reserve the final footprint. Only the device scales, leaving the controls and scroll position stable. */
.hero .demo-stage{max-width:1120px;height:auto;padding-bottom:clamp(12px,2vw,28px)}
.hero .demo-stage .desk{width:100%;max-width:none;border-radius:20px}
.hero .demo-stage .device{transform-origin:50% 0%;transform:scale(calc(.74 + .26 * var(--screen-progress,1)))}
.hero .demo-stage .desk img{aspect-ratio:auto 16/9}
.hero .demo-stage .phone{width:min(345px,100%)}
.hero .demo-stage .sticker{opacity:clamp(0,calc(1.6 - 1.6 * var(--screen-progress,1)),1)}
@media(max-width:740px){.hero .demo-stage .desk{border-radius:13px}.hero .demo-stage .device{transform:scale(calc(.85 + .15 * var(--screen-progress,1)))}}
@media(prefers-reduced-motion:reduce){.hero .demo-stage .device{transform:none}}
@media(min-width:741px){.hero{--side:max(20px,calc((100% - 1180px) / 2))}}
