/* cr-motion.css: layout + motion styles for cr-motion.js (spec ops/brand/MOTION_SPEC.md). Hidden states only under html.crm (set by JS). */
:root{--m-fast:160ms;--m-base:420ms;--m-slow:700ms;--m-ease:cubic-bezier(.2,.7,.2,1)}
html.crm:not(.crm-rm) .crm-r{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease)}
@media (max-width:640px){html.crm:not(.crm-rm) .crm-r{transform:translate3d(0,10px,0)}}
html.crm .crm-r.crm-vis{opacity:1;transform:none}
.card,.svc,.dp-card,.ta-card,.h3t li,.crm-panel .btn,.crm-lb a{transition:transform var(--m-fast) ease,box-shadow var(--m-fast) ease,border-color var(--m-fast) ease}
.card .ph img,.svc img,.dp-card img,.h3t img{transition:transform var(--m-slow) var(--m-ease)}
@media (hover:hover) and (pointer:fine){html.crm:not(.crm-rm) .card:hover,html.crm:not(.crm-rm) .svc:hover,html.crm:not(.crm-rm) .dp-card:hover,html.crm:not(.crm-rm) a.ta-card:hover,html.crm:not(.crm-rm) .h3t li:hover{transform:translate3d(0,-3px,0);box-shadow:0 10px 30px rgba(31,42,54,.12)}
html.crm:not(.crm-rm) .card:hover .ph img,html.crm:not(.crm-rm) .svc:hover img,html.crm:not(.crm-rm) .dp-card:hover img,html.crm:not(.crm-rm) .h3t li:hover img{transform:scale(1.03)}}
html.crm .card:focus-within,html.crm .dp-card:focus-within,html.crm .svc:focus-within{box-shadow:0 0 0 3px #b8322a}
html.crm:not(.crm-rm) .card:active,html.crm:not(.crm-rm) .dp-card:active,html.crm:not(.crm-rm) .svc:active,html.crm:not(.crm-rm) a.ta-card:active,html.crm:not(.crm-rm) .btn:active{transform:scale(.98)}
.crm-tick{position:relative;background:#1f2a36;color:#f4efe6;border-block:1px solid rgba(244,239,230,.12);overflow:hidden;font:600 .95rem/1 Montserrat,system-ui,sans-serif}
.crm-tick a.crm-tl{display:flex;align-items:center;min-height:52px;color:inherit;text-decoration:none;overflow:hidden}
.crm-tick .crm-tr{display:flex;flex:none;white-space:nowrap;will-change:transform}
.crm-tick .crm-seg{display:inline-flex;align-items:center;gap:1.1rem;padding-right:1.1rem}
.crm-tick .crm-seg i{display:inline-block;width:9px;height:9px;background:#b8322a;transform:rotate(45deg);flex:none}
.crm-tick .crm-cd{color:#ef8a7c;font-variant-numeric:tabular-nums}
.crm-tick .crm-go{text-decoration:underline;text-decoration-color:#ef8a7c;text-underline-offset:3px}
html.crm:not(.crm-rm) .crm-tick.crm-run .crm-tr{animation:crmMarq var(--crm-dur,48s) linear infinite}
.crm-tick:hover .crm-tr,.crm-tick:focus-within .crm-tr,.crm-tick.crm-paused .crm-tr{animation-play-state:paused!important}
@keyframes crmMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.crm-tick .crm-pz{position:absolute;right:0;top:0;bottom:0;z-index:2;min-width:84px;padding:0 1rem;border:0;border-left:1px solid rgba(244,239,230,.18);background:#1f2a36;color:#f4efe6;font:600 .85rem/1 Montserrat,system-ui,sans-serif;cursor:pointer}
.crm-tick .crm-pz:focus-visible,.crm-tick a.crm-tl:focus-visible{outline:3px solid #ef8a7c;outline-offset:-3px}
html:not(.crm) .crm-tick .crm-pz,html.crm-rm .crm-tick .crm-pz{display:none}
html.crm-rm .crm-tick .crm-tr [aria-hidden=true]{display:none}
.crm-tick[data-state=closed] .crm-hide-closed{display:none}
.crm-pulse{animation:crmPulse .9s ease}@keyframes crmPulse{40%{color:#fff;text-shadow:0 0 12px rgba(239,138,124,.7)}}
.crm-show{padding:3.5rem 0 1rem;background:#f4efe6}
.crm-show .crm-in{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
.crm-stage{position:sticky;top:120px;aspect-ratio:1/1;border-radius:18px;background:#fff;border:1px solid rgba(31,42,54,.1);perspective:1400px;overflow:hidden}
.crm-fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--m-base) var(--m-ease)}
.crm-fig.on{opacity:1}
.crm-turn{position:absolute;inset:6%;transform-style:preserve-3d;will-change:transform}
.crm-turn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.crm-turn img.bk{transform:rotateY(180deg)}
html.crm-rm .crm-turn img.bk{display:none}html.crm-rm .crm-fig.back .crm-turn img.bk{display:block;transform:none}html.crm-rm .crm-fig.back .crm-turn img.fr{display:none}
.crm-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:600 .78rem/1 Montserrat,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5a6470}
html.crm-rm .crm-cap{display:none}
.crm-dots{position:absolute;top:16px;left:16px;display:flex;gap:6px}.crm-dots b{width:22px;height:3px;background:rgba(31,42,54,.18);border-radius:2px;transition:background var(--m-fast)}.crm-dots b.on{background:#b8322a}
.crm-panels{display:flex;flex-direction:column}
.crm-panel{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:2rem 0}
.crm-panel .k{font:600 .78rem/1 Montserrat,system-ui,sans-serif;letter-spacing:.22em;color:#b8322a}
.crm-panel h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;margin:0}
.crm-panel .pr{font-weight:700;font-size:1.15rem;margin:0}
.crm-panel p{max-width:34ch;margin:0}
.crm-panel .btn{align-self:flex-start;margin-top:.6rem;min-height:48px}
.crm-mfig{display:none}
@media (max-width:820px){.crm-show{padding-top:2rem}.crm-show .crm-in{grid-template-columns:1fr;gap:0}.crm-stage{display:none}.crm-panel{min-height:0;justify-content:flex-start;padding:0 0 2.6rem}
.crm-mfig{display:block;position:relative;margin:0 0 1rem;aspect-ratio:1/1;border-radius:18px;background:#fff;border:1px solid rgba(31,42,54,.1);perspective:1200px;overflow:hidden}
.crm-mfig .crm-cap{bottom:12px}}
html.crm-rm .crm-mfig.back .crm-turn img.bk{display:block;transform:none}html.crm-rm .crm-mfig.back .crm-turn img.fr{display:none}
/* one top strip on phones: the drop line rotates inside the deals bar instead (cr-deals.js window.crBarExtra) */
@media (max-width:640px){html:not(.crd-c) body:has(.crd-bar) .crm-tick,html:not(.crd-c) body:has(.crd-bar) .crl10{display:none!important}}
/* keep the chat bubble (56px, bottom-right) clear of the last buttons and prices on phones */
@media (max-width:820px){body>footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}.crm-panel .btn{margin-right:72px}}
.crm-lb{padding:3rem 0 3.5rem;background:#f4efe6;overflow:hidden}
.crm-lb .crm-lbg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.crm-lb a{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#ebe4d7}
.crm-lb a:nth-child(even){margin-top:48px}
.crm-lb img{width:100%;height:calc(100% + 60px);object-fit:cover;display:block;will-change:transform}
@media (max-width:820px){.crm-lb .crm-lbg{grid-template-columns:repeat(2,1fr)}.crm-lb a:nth-child(n+5){display:none}}
html.crm .steps.crm-steps{position:relative}
html.crm .steps.crm-steps::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:#b8322a;transform-origin:0 50%;transform:scaleX(var(--crm-p,0))}
html.crm-rm .steps.crm-steps::after{transform:none}
html.crm .steps.crm-steps li::before{transition:color var(--m-base),transform var(--m-base) var(--m-ease)}
html.crm:not(.crm-rm) .steps.crm-steps li:not(.crm-on)::before{color:rgba(255,255,255,.28)}
html.crm .steps.crm-steps li.crm-on::before{color:#ef8a7c}
html.crm .steps.crm-steps .crm-x{position:absolute;top:-9px;left:0;width:20px;height:20px;margin-left:-10px;transform:translate3d(var(--crm-px,0),0,0);pointer-events:none}
@media (max-width:900px){html.crm .steps.crm-steps::after,html.crm .steps.crm-steps .crm-x{display:none}}
.crm-lbl{display:inline-block;font:700 .72rem/1 Montserrat,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ef8a7c;margin-bottom:.5rem}
.crm-prog{position:fixed;left:0;top:0;height:3px;width:100%;background:#b8322a;transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
html.crm-rm .crm-prog{display:none}
.crm-help{padding:1.25rem 1rem;background:#ebe4d7;color:#1f2a36;font-family:Montserrat,'Montserrat Fallback',system-ui,sans-serif}
.crm-help .crm-hw{position:relative;max-width:1100px;margin:0 auto;background:#fffdf8;border:1px solid rgba(31,42,54,.14);border-radius:16px;padding:1.2rem 1.2rem 1.1rem}
.crm-help h2{font-size:1.15rem;margin:0 3rem .9rem 0;line-height:1.2}
.crm-help ol{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.7rem;counter-reset:h}
.crm-help li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;font-size:.95rem;line-height:1.4;counter-increment:h}
.crm-help li::before{content:counter(h);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#1f2a36;color:#f4efe6;font-weight:800}
.crm-help .crm-hb{display:flex;gap:.6rem;flex-wrap:wrap}
.crm-help .crm-hb a,.crm-help .crm-hb button{white-space:nowrap;padding:0 1.2rem;display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:10px;font:700 .95rem/1 Montserrat,system-ui,sans-serif;text-decoration:none;cursor:pointer;background:transparent;color:#1f2a36;border:1.5px solid #1f2a36}
.crm-help .crm-hb a{background:#1f2a36;color:#fffdf8}
.crm-help .crm-hx{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;font-size:1.6rem;line-height:1;color:#1f2a36;cursor:pointer;border-radius:50%}
.crm-help :focus-visible{outline:3px solid #b8322a;outline-offset:2px}
@media (min-width:821px){.crm-help ol{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
@media (max-width:640px){.crm-help{padding:1rem .75rem}.crm-help .crm-hw{padding:1rem}.crm-help li{font-size:.92rem}.crm-help .crm-hb>*{flex:1}}
.crm-reopen{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.more-grid>a{transition:transform var(--m-fast) ease,box-shadow var(--m-fast) ease}
.more-grid>a img{transition:transform var(--m-slow) var(--m-ease)}
@media (hover:hover) and (pointer:fine){html.crm:not(.crm-rm) .more-grid>a:hover{transform:translate3d(0,-3px,0)}html.crm:not(.crm-rm) .more-grid>a:hover img{transform:scale(1.03)}}
html.crm:not(.crm-rm) .more-grid>a:active{transform:scale(.98)}
/* S2 builders: compact "how it works": the check marks tick in one by one on the entry screen */
html.crm:not(.crm-rm) .ob-hero .tstrip li::before{animation:crmTick .42s cubic-bezier(.2,.7,.2,1.4) both}
html.crm:not(.crm-rm) .ob-hero .tstrip li:nth-child(2)::before{animation-delay:.18s}
html.crm:not(.crm-rm) .ob-hero .tstrip li:nth-child(3)::before{animation-delay:.36s}
html.crm:not(.crm-rm) .ob-hero .tstrip li:nth-child(4)::before{animation-delay:.54s}
@keyframes crmTick{from{transform:scale(0)}to{transform:scale(1)}}