/* Validus Clips motion layer. Progressive: everything works without it. */
.navr{display:flex;align-items:center;gap:6px;position:relative}
/* Oct 20 motion pass: nav = the homepage's quiet hover (colour + faint tint, 150ms, no movement); the morphing pill is gone.
   Token fallbacks keep this working on pages whose inline CSS predates the shared tokens (legal pages are frozen). */
.navr .t{position:relative;z-index:1;padding:8px 12px;border-radius:999px;color:var(--mute);font-size:14px;font-weight:600;transition:color var(--t-hover,150ms) ease,background-color var(--t-hover,150ms) ease}
.navr .t:focus-visible{color:var(--text)}
@media(hover:hover) and (pointer:fine){.navr .t:hover{color:var(--text);background:rgba(63,166,122,.12)}}
/* press feedback on every button/CTA (inner + legal pages), named transitions, no tap flash */
html{-webkit-tap-highlight-color:transparent}
.btn{transition:transform var(--t-press,160ms) var(--ease-out,cubic-bezier(.23,1,.32,1)),background-color var(--t-hover,150ms) ease,border-color var(--t-hover,150ms) ease,color var(--t-hover,150ms) ease}
.btn:active{transform:scale(.97)}
/* touch: neutralise ungated .btn:hover left in older inline CSS (the frozen legal pages), so a tap never leaves it "stuck" */
@media not ((hover:hover) and (pointer:fine)){.btn:hover{background-color:var(--accent)}.btn.ghost:hover{background-color:transparent}}
@media(max-width:720px){.navr .t.opt{display:none}}
/* (cursor-following glow border and 3D card tilt removed Oct 20: no decoration on reading content) */
/* hero 3D glass logo; webp shows until WebGL is ready */
.logo3d{position:relative;width:140px;height:140px;margin:0 auto 4px;touch-action:pan-y}
.logo3d img,.logo3d canvas{position:absolute;inset:0;width:100%;height:100%}
.logo3d canvas{opacity:0;transition:opacity .6s;border-radius:0}
.logo3d.live canvas{opacity:1}.logo3d.live img{opacity:0;transition:opacity .6s}
/* bento how-it-works + animated line */
.bento{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px;position:relative;padding-top:22px!important}
.bento>li:nth-child(1),.bento>li:nth-child(4){grid-column:span 2}
.bento::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left}
@media(max-width:760px){.bento{grid-template-columns:minmax(0,1fr)!important}.bento>li:nth-child(n){grid-column:auto}}
/* scroll reveal: only when JS opted in and motion allowed */
.fx [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fx [data-reveal].in{opacity:1;transform:none}
.fx .bento::before{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
.fx .bento.in::before{transform:scaleX(1)}
.fx .bento .step:before{transition:background .4s,color .4s,box-shadow .4s}
.fx .bento.in .step:before{background:var(--accent);color:#04120b;box-shadow:0 0 0 6px rgba(63,166,122,.15)}
.fx .bento.in .step:nth-child(2):before{transition-delay:.35s}.fx .bento.in .step:nth-child(3):before{transition-delay:.7s}.fx .bento.in .step:nth-child(4):before{transition-delay:1.05s}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none;background-color:#36906a}.btn.ghost:active{background-color:rgba(63,166,122,.18)}.fx [data-reveal]{opacity:1;transform:none;transition:none}.fx .bento::before{transform:none;transition:none}}

.navr .btn{white-space:nowrap}@media(max-width:420px){.navr .t{display:none}}
footer{flex-wrap:wrap}footer span,footer a{overflow-wrap:anywhere;min-width:0}
@media(max-width:600px){footer .flogo{display:block}footer .flogo img{display:inline-block;vertical-align:middle;margin-right:6px}footer span a{overflow-wrap:normal}}