/* Shared by every Ripic demo site. Each site defines its own look; this is only the frame. */
[hidden]{display:none!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.k-skip{position:absolute;left:-999px;top:8px;z-index:200;padding:8px 12px;border-radius:8px;background:#000;color:#fff}
.k-skip:focus{left:8px}

/* the ribbon: says plainly that this is a demo of a fictional business */
.k-ribbon{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:999px;background:rgba(15,30,46,.92);color:#fff;font:600 12.5px/1.2 system-ui,sans-serif;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);backdrop-filter:blur(8px);white-space:nowrap}
.k-ribbon svg{width:12px;height:15px;flex:none}
.k-ribbon a{padding:6px 11px;border-radius:999px;background:#14a36a;color:#fff;font-weight:700;text-decoration:none}
@media (max-width:640px){.k-ribbon{left:12px;right:12px;transform:none;justify-content:space-between;white-space:normal;bottom:12px}}

/* demo form feedback */
.k-msg{min-height:1.3em;margin-top:10px;font-size:14px}
.k-msg.ok{color:inherit;opacity:.85}

[data-reveal]{will-change:transform}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}