/* Shared Satorai UI on top of v2.css, loaded by every public page: sticky header, pill CTAs, the 3D cream display type,
   tilt and the reveal system driven by motion.js. */
:root{--rise:cubic-bezier(.16,1,.3,1)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
/* Header: sits on the hero field, sticky once the page moves, out of the way while scrolling down. */
.v2 .site-header{position:sticky;top:0;z-index:40;transition:transform .6s var(--rise),box-shadow .4s ease,background-color .4s ease}
.v2 .site-header:not(.is-stuck){background:transparent}
.v2 .site-header.is-stuck{box-shadow:0 14px 34px -24px rgba(22,19,13,.55)}
.v2 .site-header.is-hidden{transform:translateY(-100%);box-shadow:none}
/* The main action: a fat pill with a hard vermilion shadow, an arrow coin and a light sweep. */
.cta-pop{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:18px;height:66px;padding:0 9px 0 32px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--bone);font:700 18px/1 Archivo,sans-serif;text-decoration:none;box-shadow:5px 5px 0 var(--vermilion);transition:transform .35s var(--rise),box-shadow .35s var(--rise)}
.cta-pop i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--ink);transition:transform .6s var(--rise)}
.cta-pop svg{width:22px;height:22px;stroke-width:2.2}
.cta-pop::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));transform:skewX(-20deg) translateX(0);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.cta-pop::after{animation:cta-shine 3.6s ease-in-out 2s infinite}@keyframes cta-shine{0%,70%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(560%)}}}
@media(hover:hover){
  .cta-pop:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--vermilion)}
  .cta-pop:hover i{transform:rotate(-45deg) scale(1.06)}
}
.cta-pop:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--vermilion)}
.cta-pop:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.pop{display:inline-block;color:var(--white);-webkit-text-stroke:.034em var(--ink);paint-order:stroke fill;text-shadow:.006em .008em 0 var(--ink),.012em .016em 0 var(--ink),.018em .024em 0 var(--ink),.024em .032em 0 var(--ink),.03em .04em 0 var(--ink),.036em .048em 0 var(--ink),.042em .056em 0 var(--ink),.048em .064em 0 var(--ink),.1em .16em .2em rgba(22,19,13,.18)}
/* Tilt base: elements lean toward the pointer (home.js sets --rx/--ry). */
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
/* Reveal system. Hidden states exist only while motion.js runs, so the page is complete without it. */
.js:not(.still) [data-reveal]{--rd:calc(var(--i,0) * 80ms + var(--d,0s));opacity:0;translate:0 40px;transition:transform .6s var(--rise),opacity .8s var(--rise) var(--rd),translate 1s var(--rise) var(--rd),rotate 1.1s var(--rise) var(--rd)}
.js:not(.still) [data-stagger]>[data-reveal],.js:not(.still) .mega-lite[data-reveal],.js:not(.still) .offer-title[data-reveal]{rotate:x 18deg;transform-origin:50% 100%}
.js:not(.still) [data-reveal].is-in{opacity:1;translate:none;rotate:none}
[data-stagger]{perspective:1600px}
.home.v2 .quote-main mark{background-size:var(--mark,100%) 100%;background-repeat:no-repeat;transition:background-size 1.2s var(--rise) .4s}
.js:not(.still) .quote-main:not(.is-in) mark{--mark:0%}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .03em .1em;margin:-.14em -.03em -.1em}
[data-split] .w>span{display:inline-block}
.js:not(.still) [data-split] .w>span{transform:translateY(112%);transition:transform 1s var(--rise);transition-delay:calc(var(--i,0) * 60ms + var(--d,0s))}
.js:not(.still) [data-split].is-in .w>span{transform:none}
/* CTA variants: compact for the navigation, yellow on dark panels. */
.cta-pop-sm{height:48px;padding:0 6px 0 22px;gap:12px;font-size:14px;box-shadow:3px 3px 0 var(--vermilion)}
.cta-pop-sm i{width:36px;height:36px}
.cta-pop-sm svg{width:18px;height:18px}
.cta-pop-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:5px 5px 0 var(--vermilion)}
.cta-pop-yellow i{background:var(--ink);color:var(--yellow)}
.dusk .cta-pop-yellow:focus-visible{outline-color:var(--yellow)}
@media(max-width:760px){.cta-pop-sm{height:44px;padding:0 5px 0 16px;font-size:13px;gap:10px}.cta-pop-sm i{width:34px;height:34px}}
@media(max-width:760px){.cta-pop{height:60px;font-size:16px;padding-left:24px;gap:14px}.cta-pop i{width:44px;height:44px}}
.cta-pop span{white-space:nowrap}
@media(max-width:400px){.cta-pop-sm{font-size:12.5px;padding-left:14px;gap:8px}}