/* Lisette Colon brand layer (corporate, light). Loaded after site.css on every page except the home page,
   which carries its own styles. Overrides the old tokens and type, adds the shared header and footer,
   and the x- components used by the redesigned pages. */
:root{
  --paper:#ffffff; --paper-2:#faf7f8; --white:#ffffff; --ink:#1f171c; --ink-2:#4a3d45; --soft:#75666f;
  --blush:#f4cedb; --blush-2:#fbeef3; --plum:#8c2f55; --plum-2:#6f2143; --line:#ebe3e8; --line-2:#dcd0d7;
  --tint:#faf7f8; --surface-2:#f4eff2; --butter:#f3d98a; --sage:#a9c6a8;
  --display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--display);
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --max:1160px;
  --shadow:0 1px 2px rgba(31,23,28,.05),0 14px 34px -14px rgba(31,23,28,.18);
  color-scheme:light;
}
[hidden]{display:none!important}
html{background:#fff}
body{background:#fff;color:var(--ink)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* type */
.d1,.d2,.d3,h1,h2{font-family:var(--display);letter-spacing:-.025em}
.d1{font-weight:800;font-size:clamp(42px,6.4vw,76px);line-height:1}
.d2{font-weight:700;font-size:clamp(32px,4.4vw,52px);line-height:1.06}
.d3{font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.1}
.h4{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.label{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.label::before{content:"[";color:var(--plum);font-size:1.25em}
.label::after{content:"]";color:var(--plum);font-size:1.25em}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);background:none;padding:0}

/* bands: no blush or dark blocks, just a soft tint */
.band,.band-soft,.cta-band{background:var(--tint);border-block:1px solid var(--line)}
.band-ink{background:var(--tint);color:var(--ink)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:10px;border:1px solid transparent;background:var(--plum);color:#fff;font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;box-shadow:none}
.btn:hover{background:var(--plum-2)}
.btn.ghost,.btn.light{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover,.btn.light:hover{border-color:var(--plum);background:#fff}
.btn.sm{min-height:42px;padding:0 18px;font-size:15px}
.link{color:var(--plum);text-decoration-color:rgba(140,47,85,.35);text-underline-offset:3px}
.link:hover{text-decoration-color:var(--plum)}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;font-family:var(--sans)}
.chip[aria-selected="true"]{background:var(--blush-2);border-color:var(--plum);color:var(--plum)}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.input,.textarea,.select{background:#fff;border-color:var(--line-2);border-radius:10px}
.input:focus,.textarea:focus,.select:focus{border-color:var(--plum);outline:2px solid rgba(140,47,85,.18);outline-offset:0}
.shot.has-browser,.work-card .shot{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.page-hero{padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px)}
.page-hero .lede{margin-top:4px}
.facts li{border-color:var(--line)}
.facts b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}

/* ---------- shared header ---------- */
.lc-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.lc-head .lc-bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.lc-head .lc-bar{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.lc-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:700 18px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.lc-mark{display:grid;place-items:center;width:38px;height:38px;font:500 14px/1 var(--mono);color:var(--plum);position:relative}
.lc-mark::before,.lc-mark::after{content:"";position:absolute;top:0;bottom:0;width:8px;border:1.5px solid var(--plum)}
.lc-mark::before{left:0;border-right:0}
.lc-mark::after{right:0;border-left:0}
.lc-links{display:flex;gap:28px;font:500 15px/1 var(--sans)}
.lc-links a{text-decoration:none;color:var(--ink-2);transition:color .2s;padding-block:6px;border-bottom:2px solid transparent}
.lc-links a:hover{color:var(--plum)}
.lc-links a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--plum)}
.lc-actions{display:flex;align-items:center;gap:10px}
.lc-head .menu-btn{display:none;align-items:center;min-height:42px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
.lc-mobile{position:fixed;inset:68px 0 0;z-index:49;background:#fff;padding:24px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:4px;overflow:auto;border-top:1px solid var(--line)}
.lc-mobile a{font:700 26px/1.2 var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line)}
.lc-mobile a.btn{font:600 16px/1 var(--sans);margin-top:20px;border-bottom:0;color:#fff;padding:0 22px}
@media (max-width:900px){.lc-links{display:none}.lc-head .menu-btn{display:inline-flex}}
@media (max-width:440px){.lc-actions .btn{display:none}}

/* ---------- shared footer ---------- */
.lc-foot{border-top:1px solid var(--line);background:var(--tint);padding-block:56px 32px;font-size:15px;color:var(--ink-2)}
.lc-foot .lc-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.lc-foot h2{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.lc-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lc-foot a{text-decoration:none;color:var(--ink-2)}
.lc-foot a:hover{color:var(--plum)}
.lc-foot .lc-about{display:grid;gap:14px;align-content:start}
.lc-foot .lc-about p{max-width:34ch}
.lc-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lc-copy button{font:500 12px/1 var(--mono);color:var(--plum);background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;cursor:pointer}
.lc-copy button:hover{border-color:var(--plum)}
.lc-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
@media (max-width:860px){.lc-foot .lc-grid{grid-template-columns:1fr 1fr}.lc-foot .lc-about{grid-column:1/-1}}
@media (max-width:440px){.lc-foot .lc-grid{grid-template-columns:1fr}}

/* ---------- x- components for redesigned pages ---------- */
.x-hero{position:relative;padding-block:clamp(64px,9vw,120px) clamp(48px,7vw,88px);overflow:hidden;border-bottom:1px solid var(--line)}
.x-hero .x-hero-in{position:relative;z-index:1;display:grid;gap:24px;max-width:720px}
.x-hero h1{font:800 clamp(44px,6.6vw,80px)/1 var(--display);letter-spacing:-.035em}
.x-hero h1 em{font-style:normal;color:var(--plum)}
.x-hero .lede{font-size:clamp(18px,1.8vw,20px);color:var(--ink-2);max-width:60ch}
.x-hero .x-glow{position:absolute;right:-12%;top:-30%;width:min(720px,80vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 40%,rgba(244,206,219,.75),rgba(244,206,219,0) 60%),radial-gradient(circle at 70% 65%,rgba(243,217,138,.45),rgba(243,217,138,0) 55%),radial-gradient(circle at 45% 80%,rgba(169,198,168,.35),rgba(169,198,168,0) 55%);pointer-events:none;max-width:100%}
.x-jump{display:flex;flex-wrap:wrap;gap:8px}
.x-jump a{font:500 14px/1 var(--sans);padding:10px 14px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;color:var(--ink-2);background:#fff;transition:border-color .2s,color .2s}
.x-jump a:hover{border-color:var(--plum);color:var(--plum)}
.x-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.x-sec{padding-block:clamp(64px,8vw,112px)}
.x-sec.tint{background:var(--tint);border-block:1px solid var(--line)}
.x-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4.5vw,52px)}
.x-head h2{font:700 clamp(30px,4.2vw,48px)/1.06 var(--display);letter-spacing:-.025em}
.x-head p{color:var(--ink-2);font-size:18px;max-width:62ch}
.x-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.x-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.x-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,box-shadow .3s,transform .3s}
.x-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.x-card h3{font:700 22px/1.2 var(--display);letter-spacing:-.015em}
.x-card p{color:var(--ink-2);font-size:16px}
.x-card .x-eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.x-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.x-card ul li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:15px;color:var(--ink-2)}
.x-card ul li::before{content:"";width:8px;height:8px;margin-top:8px;border:1.5px solid var(--plum);border-radius:2px;transform:rotate(45deg)}
.x-card .x-foot{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.x-amt{font:700 26px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.x-amt small{display:block;margin-top:6px;font:400 13px/1.3 var(--mono);color:var(--soft);letter-spacing:0}
.x-card.feat{border-color:var(--plum);box-shadow:0 0 0 3px var(--blush-2)}
.x-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--blush-2);color:var(--plum);font:500 15px/1 var(--mono)}
.x-list{display:grid;border-top:1px solid var(--line)}
.x-list > div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:16px 28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.x-list h3{font:700 19px/1.3 var(--display);letter-spacing:-.01em}
.x-list p{color:var(--ink-2);font-size:16px}
.x-list .x-amt{font-size:20px;text-align:right;white-space:nowrap}
.x-list .x-amt small{font-size:12px}
.x-list .x-amt a{display:inline-block;margin-top:10px;font:600 14px/1 var(--sans);color:var(--plum);text-decoration:none}
@media (max-width:760px){.x-list > div{grid-template-columns:1fr}.x-list .x-amt{text-align:left}}
.x-note{font-size:15px;color:var(--soft);max-width:80ch;margin-top:20px}
.x-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.x-split{grid-template-columns:1fr}}
.x-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.x-steps > div{padding:24px 22px;display:grid;gap:10px;align-content:start;border-left:1px solid var(--line);position:relative}
.x-steps > div:first-child{border-left:0}
.x-steps b{font:500 12px/1 var(--mono);color:var(--plum);letter-spacing:.06em}
.x-steps h3{font:700 19px/1.2 var(--display)}
.x-steps p{font-size:15px;color:var(--ink-2)}
.x-steps > div::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--plum);transform-origin:left;transform:scaleX(1);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .x-steps:not(.seen) > div::after{transform:scaleX(0)}
.x-steps > div:nth-child(2)::after{transition-delay:.15s}.x-steps > div:nth-child(3)::after{transition-delay:.3s}.x-steps > div:nth-child(4)::after{transition-delay:.45s}.x-steps > div:nth-child(5)::after{transition-delay:.6s}
@media (max-width:980px){.x-steps{grid-template-columns:1fr 1fr}.x-steps > div{border-left:0;border-top:1px solid var(--line)}.x-steps > div:nth-child(-n+2){border-top:0}.x-steps > div:nth-child(even){border-left:1px solid var(--line)}}
@media (max-width:520px){.x-steps{grid-template-columns:1fr}.x-steps > div:nth-child(even){border-left:0}.x-steps > div:nth-child(2){border-top:1px solid var(--line)}}
.x-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(28px,5vw,56px);border-radius:22px;background:linear-gradient(135deg,#fbeef3 0%,#fff 55%,#fdf6e3 100%);border:1px solid var(--line)}
.x-cta h2{font:700 clamp(30px,4vw,46px)/1.06 var(--display);letter-spacing:-.025em}
.x-cta p{color:var(--ink-2);font-size:18px;margin-top:14px;max-width:52ch}
.x-cta .x-actions{justify-content:flex-end}
@media (max-width:820px){.x-cta{grid-template-columns:1fr}.x-cta .x-actions{justify-content:flex-start}}
.x-kv{display:grid;gap:0;border-top:1px solid var(--line)}
.x-kv > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.x-kv > div > span:first-child{font:500 12px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
@media (max-width:440px){.x-kv > div{grid-template-columns:1fr;gap:4px}}

/* work frames with grayscale-to-color hover */
.x-works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,36px)}
.x-works.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.x-works.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.x-works,.x-works.three{grid-template-columns:1fr}}
.x-concept{display:grid;gap:16px;align-content:start;text-decoration:none;color:inherit}
.x-shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.x-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.x-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.x-chrome b{margin:0 auto;font:400 12px/1 var(--mono);color:var(--soft);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-frame{aspect-ratio:16/10;overflow:hidden;max-width:100%}
.x-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:grayscale(1);transition:filter .6s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.x-concept:hover .x-shot,.x-concept:focus-within .x-shot,.x-concept.inview .x-shot{transform:translateY(-4px);box-shadow:0 2px 4px rgba(31,23,28,.06),0 24px 44px -18px rgba(31,23,28,.28)}
.x-concept:hover .x-frame img,.x-concept:focus-within .x-frame img,.x-concept.inview .x-frame img{filter:grayscale(0);transform:scale(1.035)}
.x-concept-body{display:grid;gap:8px}
.x-concept-body h3{font:700 clamp(20px,2vw,23px)/1.2 var(--display);letter-spacing:-.015em}
.x-concept-body p{font-size:16px;color:var(--ink-2)}
.x-tagline{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.x-view{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);color:var(--plum);text-decoration:none;margin-top:4px;width:max-content}
.x-view::after{content:"\2192";transition:transform .2s}
.x-concept:hover .x-view::after,.x-view:hover::after{transform:translateX(3px)}
.x-group + .x-group{margin-top:clamp(48px,6vw,72px)}
.x-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px}
.x-group-head h3{font:700 22px/1.2 var(--display)}
.x-group-head p{font-size:14px;color:var(--soft)}

/* AI chat (light) */
.x-chat{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.x-chat-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font:600 15px/1 var(--display)}
.x-chat-top small{font:400 13px/1 var(--mono);color:var(--soft)}
.x-thread{padding:18px;display:grid;gap:16px;max-height:440px;min-height:300px;overflow:auto;align-content:start}
.x-msg{display:grid;grid-template-columns:34px 1fr;gap:12px;animation:xpop .4s cubic-bezier(.2,.7,.2,1) both}
.x-msg .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:600 13px/1 var(--mono)}
.x-msg.me .av{background:var(--blush);color:var(--plum-2)}
.x-msg.bot .av{background:var(--plum);color:#fff}
.x-msg .who{font:600 14px/1.2 var(--display);display:flex;gap:8px;align-items:baseline}
.x-msg .who small{font:400 11px/1 var(--mono);color:var(--soft)}
.x-msg .who .tg{font:500 10px/1 var(--mono);padding:3px 6px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);letter-spacing:.05em}
.x-msg .txt{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:4px}
.x-msg .txt ul{margin:8px 0 0;padding-left:18px}
.x-msg .txt .t{color:var(--plum);font-family:var(--mono);font-size:12px}
.x-dots{display:inline-flex;gap:4px;padding:6px 0}
.x-dots i{width:6px;height:6px;border-radius:50%;background:var(--soft);animation:xblink 1.1s infinite}
.x-dots i:nth-child(2){animation-delay:.15s}.x-dots i:nth-child(3){animation-delay:.3s}
@keyframes xblink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes xpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.x-composer{margin:0 14px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--tint);display:flex;align-items:flex-end;gap:10px;padding:12px 12px 12px 16px}
.x-composer p{flex:1;font-size:15px;min-width:0}
.x-composer p.sent{color:var(--soft)}
.x-send{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:var(--plum);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s,opacity .2s}
.x-send:hover{transform:translateY(-1px)}
.x-send:disabled{opacity:.4;cursor:default;transform:none}
.x-send svg{width:18px;height:18px}
.x-chat-note{padding:0 18px 14px;font:400 12px/1.4 var(--mono);color:var(--soft)}
.x-ticks{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.x-ticks li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink-2)}
.x-ticks li::before{content:"";width:10px;height:10px;margin-top:8px;border:1.5px solid var(--plum);border-radius:2px;transform:rotate(45deg)}

/* portrait with corner brackets */
.x-portrait{position:relative;max-width:420px;width:100%}
.x-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block;max-width:100%;height:auto}
.x-portrait::before,.x-portrait::after{content:"";position:absolute;width:44px;height:44px;border:2px solid var(--plum)}
.x-portrait::before{top:-12px;left:-12px;border-right:0;border-bottom:0}
.x-portrait::after{bottom:-12px;right:-12px;border-left:0;border-top:0}

/* reveal: visible at rest */
.js .x-rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.js .x-rv.pre{transform:translateY(24px);opacity:.001}
@media (prefers-reduced-motion:reduce){
  .x-rv,.x-shot,.x-frame img,.x-steps > div::after{transition:none!important}
  .js .x-rv.pre{transform:none;opacity:1}
  .js .x-steps:not(.seen) > div::after{transform:none}
  .x-msg,.x-dots i{animation:none!important}
}
.lc-head .btn,.lc-head .btn.sm{height:42px;min-height:42px;padding:0 18px;font-size:15px;background:var(--plum);color:#fff;border-color:transparent}
.lc-head .btn:hover{background:var(--plum-2)}

/* ---------- illustrations of Lisette ---------- */
.x-illo{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;z-index:3;filter:drop-shadow(0 16px 22px rgba(70,20,45,.14))}
.js .x-illo{animation:xillo .9s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes xillo{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.x-cta{position:relative}
.x-cta.illo-r{padding-right:clamp(28px,26vw,300px)}
.x-cta.illo-l{padding-left:clamp(28px,26vw,300px)}
.x-cta .x-illo{bottom:0;width:auto}
.x-cta.illo-r .x-illo{right:28px;height:125%}
.x-cta.illo-l .x-illo{left:28px;height:125%}
.x-illo-wrap{position:relative}
@media (max-width:900px){.x-cta.illo-r,.x-cta.illo-l{padding:clamp(28px,5vw,56px)}}
@media (prefers-reduced-motion:reduce){.js .x-illo{animation:none}}

.x-hero .x-illo{right:max(16px,calc((100vw - 1160px)/2 + 48px));bottom:0;height:min(92%,520px);width:auto}
@media (max-width:1100px){.x-hero .x-illo{height:min(70%,420px);right:8px}}
.x-hero.has-illo .x-hero-in{max-width:min(720px,62%)}
@media (max-width:900px){.x-hero.has-illo .x-hero-in{max-width:none}}

/* business picker (administration page) */
.x-biz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px;align-items:start}
.x-biz-tabs{display:flex;flex-wrap:wrap;gap:10px}
.x-biz-tabs button{font:500 15px/1.2 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.x-biz-tabs button:hover{border-color:var(--plum)}
.x-biz-tabs button[aria-selected="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
.x-biz-tabs button:focus-visible{outline:3px solid var(--blush);outline-offset:2px}
.x-biz-panels{display:grid;gap:16px}
.x-biz-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;gap:12px}
.x-biz-panel h3{font:700 24px/1.2 var(--display);letter-spacing:-.015em}
.x-biz-panel .x-eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.x-biz-pk{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.js .x-biz-panel[data-off]{display:none}
.js .x-biz-panel{animation:bizIn .35s ease both}
@keyframes bizIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .x-biz-panel{animation:none}}
@media (max-width:860px){.x-biz{grid-template-columns:1fr}}
@media (max-width:560px){.x-biz-tabs{gap:8px}.x-biz-tabs button{font-size:14px;padding:9px 13px}.x-biz-panel{padding:22px}}

/* ---------- motion layer ---------- */
/* 1. page color shifts softly as you scroll (light tones only) */
body.x-shift{transition:background-color .9s ease}
.x-shift .x-sec,.x-shift .x-sec.tint,.x-shift .band,.x-shift .band-soft,.x-shift .cta-band,.x-shift .strip,.x-shift .lc-foot{background:transparent!important}
.x-shift .x-hero{background:transparent}

/* 2. soft glow follows the cursor on cards and buttons */
.x-glowable{isolation:isolate}
.x-glowable::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(140,47,85,.10),rgba(244,206,219,.10) 40%,transparent 70%)}
.x-glowable.x-on::before{opacity:1}
.x-glowable.x-on:not(.feat){border-color:#e3c3d1!important}
.btn.x-glowable,.x-send.x-glowable{position:relative;overflow:hidden}
.btn.x-glowable::before{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 70%)}
.btn.x-glowable.ghost::before,.btn.x-glowable.light::before,.btn.x-glowable.btn-line::before{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(140,47,85,.10),transparent 70%)}

/* prices: normal digit spacing so commas sit tight */
.x-amt{font-variant-numeric:normal}

/* 3. headings slide in word by word */
.xsplit .xw{display:inline-block}
.js .xsplit:not(.in) .xw{opacity:0;transform:translateY(.45em);filter:blur(6px)}
.js .xsplit .xw{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:calc(var(--i,0) * 60ms)}

/* 4. gradient circle ripples under the cursor */
.x-hero .x-glow{overflow:hidden;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.x-ripple{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:1.5px solid rgba(140,47,85,.30);background:radial-gradient(circle,rgba(244,206,219,.35),rgba(244,206,219,0) 70%);pointer-events:none;animation:xripple 1.8s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes xripple{from{transform:scale(.4);opacity:1}to{transform:scale(13);opacity:0}}

@media (prefers-reduced-motion:reduce){
  body.x-shift{transition:none}
  .js .xsplit:not(.in) .xw{opacity:1;transform:none;filter:none}
  .x-ripple{display:none}
  .x-hero .x-glow{transition:none}
}

/* fact tiles (about) */
.x-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.x-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.x-facts{grid-template-columns:1fr}}
.x-fact{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 26px;display:grid;gap:8px;align-content:start;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s,opacity .6s;--r:-1.2deg}
.x-fact:nth-child(even){--r:1.2deg}
.x-fact b{position:absolute;right:18px;top:14px;font:500 34px/1 var(--display);color:var(--blush);letter-spacing:-.02em;transition:transform .45s cubic-bezier(.2,.7,.2,1),color .3s}
.x-fact span{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
.x-fact p{font:600 19px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:28ch}
.x-fact p a{color:inherit;text-decoration:none;border-bottom:1px solid var(--blush)}
.x-fact p a:hover{border-color:var(--plum)}
.x-fact::after{content:"";position:absolute;left:22px;right:22px;bottom:14px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--plum),#e7a3bd,var(--butter));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.x-fact:hover{transform:translateY(-6px) rotate(var(--r));box-shadow:var(--shadow)}
.x-fact:hover::after{transform:scaleX(1)}
.x-fact:hover b{transform:scale(1.15) rotate(-6deg);color:#e7a3bd}
.js .x-facts:not(.seen) .x-fact{opacity:0;transform:translateY(34px) rotate(calc(var(--r) * 3)) scale(.96)}
.js .x-facts.seen .x-fact{transition-delay:calc(var(--i,0) * 90ms)}
.js .x-facts.seen .x-fact:hover{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.js .x-facts:not(.seen) .x-fact{opacity:1;transform:none}.x-fact,.x-fact b,.x-fact::after{transition:none}}

/* close-up illustration sits on the hero's bottom edge */
.x-hero .x-illo-close{height:min(96%,500px);filter:drop-shadow(0 10px 18px rgba(70,20,45,.12))}

/* what happens on the call (book) */
.x-flow{margin-top:12px;display:grid;gap:18px}
.x-flow ol{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.x-flow ol::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line-2)}
.x-flow ol::after{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--plum),#e7a3bd);transform-origin:top;transform:scaleY(1);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.x-flow ol > li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:16px;padding:14px 14px 14px 0;border-radius:14px;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1),background .3s;transition-delay:calc(var(--i)*220ms)}
.x-flow ol > li > b{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--plum);color:var(--plum);font:600 15px/1 var(--mono);transition:background .3s,color .3s,transform .3s}
.x-flow ol > li h3{font:700 18px/1.3 var(--display);letter-spacing:-.01em;margin-top:8px}
.x-flow ol > li p{font-size:15px;color:var(--ink-2);margin-top:4px}
.x-flow ol > li:hover > b{background:var(--plum);color:#fff;transform:scale(1.08)}
.js .x-flow:not(.seen) ol::after{transform:scaleY(0)}
.js .x-flow:not(.seen) ol > li{opacity:0;transform:translateX(-14px)}
@media (prefers-reduced-motion:reduce){.js .x-flow:not(.seen) ol > li{opacity:1;transform:none}.js .x-flow:not(.seen) ol::after{transform:none}.x-flow ol > li,.x-flow ol::after{transition:none}}

/* ---------- phones and small tablets: illustrations stay visible ---------- */
@media (max-width:900px){
  .x-hero.has-illo,.hero{display:flex;flex-direction:column;padding-bottom:0!important}
  .x-hero.has-illo > .wrap,.hero > .wrap{order:1;width:100%}
  .x-hero.has-illo > .x-illo,.hero > .x-illo{order:2;position:relative;right:auto;bottom:auto;align-self:flex-end;height:min(340px,78vw);width:auto;margin:20px 16px 0 0;max-width:calc(100% - 32px)}
  .x-hero .x-illo-close{height:min(300px,72vw)}
  .x-cta.illo-r,.x-cta.illo-l{padding-bottom:0}
  .x-cta.illo-r .x-illo,.x-cta.illo-l .x-illo{position:relative;order:3;right:auto;left:auto;bottom:auto;height:260px;width:auto;max-width:100%;justify-self:end;margin-top:4px}
  .x-cta.illo-l .x-illo{justify-self:start}
  .x-cta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .label{font-size:12px;letter-spacing:.05em;flex-wrap:wrap;row-gap:4px}
  small,code,.pill,.tg,.x-chrome b,.chrome .url,.col h3,.tk small,.kpi small,.ck small,.callout code{font-size:12px!important}
}

/* what to include (book, quote form) */
.x-checks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.x-checks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1),border-color .3s;transition-delay:calc(var(--i)*160ms)}
.x-checks li:hover{border-color:#e3c3d1}
.x-checks i{width:28px;height:28px;border-radius:8px;background:var(--plum);display:grid;place-items:center}
.x-checks i svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:20;stroke-dashoffset:0;transition:stroke-dashoffset .45s ease;transition-delay:calc(var(--i)*160ms + .35s)}
.x-checks b{display:block;font:600 16px/1.3 var(--display)}
.x-checks span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.js .x-flow:not(.seen) .x-checks li{opacity:0;transform:translateY(14px)}
.js .x-flow:not(.seen) .x-checks i svg{stroke-dashoffset:20}
@media (prefers-reduced-motion:reduce){.js .x-flow:not(.seen) .x-checks li{opacity:1;transform:none}.js .x-flow:not(.seen) .x-checks i svg{stroke-dashoffset:0}}

/* tool cards with mini previews (administration) */
.x-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.x-tools{grid-template-columns:1fr}}
.x-tool{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px 24px;display:grid;gap:8px;align-content:start;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s,opacity .6s}
.x-tool:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.x-tool h3{font:700 20px/1.25 var(--display);letter-spacing:-.01em;margin-top:6px}
.x-tool p{color:var(--ink-2);font-size:16px}
.x-tool-art{position:relative;height:150px;border-radius:12px;background:var(--tint);border:1px solid var(--line);overflow:hidden;padding:16px}
.js .x-tools:not(.seen) .x-tool{opacity:0;transform:translateY(28px)}
.js .x-tools.seen .x-tool{transition-delay:calc(var(--i)*110ms)}
/* requests */
.t-req{display:grid;gap:10px;align-content:center}
.t-req .tr{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.t-req .tr i{height:8px;border-radius:4px;background:var(--surface-2)}
.t-req .st{position:relative;height:22px}
.t-req .st b{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;font:500 12px/1 var(--mono);transition:opacity .35s,transform .35s}
.t-req .n{background:var(--blush-2);color:var(--plum)}.t-req .w{background:#faefd9;color:#8a5a12}.t-req .ok{background:#e5f1e9;color:#2f6b4f}
.t-req .b{opacity:0;transform:translateY(8px)}
.x-tool.play .t-req .a{opacity:0;transform:translateY(-8px)}
.x-tool.play .t-req .b{opacity:1;transform:none}
.t-req .tr:nth-child(2) b{transition-delay:.25s}.t-req .tr:nth-child(3) b{transition-delay:.5s}
/* booking */
.t-cal .cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:260px}
.t-cal .cal span{font:500 12px/1 var(--mono);color:var(--soft);text-align:center}
.t-cal .cal i{height:26px;border-radius:6px;background:#fff;border:1px solid var(--line);transition:background .35s,border-color .35s,transform .35s}
.x-tool.play .t-cal .pick{background:var(--plum);border-color:var(--plum);transform:scale(1.08)}
.t-cal .toast{position:absolute;right:14px;bottom:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;padding:8px 12px;font:600 13px/1 var(--sans);color:var(--ink);opacity:0;transform:translateY(14px);transition:opacity .4s .45s,transform .45s .45s cubic-bezier(.2,.7,.2,1)}
.t-cal .toast::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f6b4f;margin-right:8px}
.x-tool.play .t-cal .toast{opacity:1;transform:none}
/* stock */
.t-stock{display:grid;gap:14px;align-content:center}
.t-stock .row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px}
.t-stock small{font:500 12px/1 var(--mono);color:var(--soft);text-transform:uppercase;letter-spacing:.05em}
.t-stock .bar{height:12px;border-radius:6px;background:#fff;border:1px solid var(--line);overflow:hidden}
.t-stock .bar i{display:block;height:100%;width:82%;background:linear-gradient(90deg,var(--plum),#e7a3bd);border-radius:6px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.x-tool.play .t-stock .bar i{width:38%}
.t-stock .dots{display:flex;gap:6px}
.t-stock .dots i{width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--line);transition:background .3s,border-color .3s}
.x-tool.play .t-stock .dots i{background:var(--blush);border-color:#e3c3d1}
.t-stock .dots i:nth-child(2){transition-delay:.15s}.t-stock .dots i:nth-child(3){transition-delay:.3s}.t-stock .dots i:nth-child(4){transition-delay:.45s}
.t-stock .ship{justify-self:start;font:500 12px/1 var(--mono);padding:7px 10px;border-radius:999px;background:#e5f1e9;color:#2f6b4f;opacity:0;transform:translateX(-24px);transition:opacity .45s .6s,transform .5s .6s cubic-bezier(.2,.7,.2,1)}
.x-tool.play .t-stock .ship{opacity:1;transform:none}
/* dashboard */
.t-dash .bars{position:absolute;left:18px;right:18px;bottom:16px;top:18px;display:flex;align-items:flex-end;gap:10px}
.t-dash .bars i{flex:1;height:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#e7a3bd,var(--plum));transform-origin:bottom;transform:scaleY(.18);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.x-tool.play .t-dash .bars i{transform:scaleY(var(--h))}
.t-dash .bars i:nth-child(2){transition-delay:.08s}.t-dash .bars i:nth-child(3){transition-delay:.16s}.t-dash .bars i:nth-child(4){transition-delay:.24s}.t-dash .bars i:nth-child(5){transition-delay:.32s}.t-dash .bars i:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.js .x-tools:not(.seen) .x-tool{opacity:1;transform:none}.x-tool,.x-tool *{transition:none!important}}
.js .x-tools.seen .x-tool:hover{transition-delay:0s}
.x-tool-art{height:176px}.t-stock{gap:12px}

/* what I handle: to-do cards that get checked off (administration) */
.x-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.x-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.x-tasks{grid-template-columns:1fr}}
.x-task{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;display:grid;gap:8px;align-content:start;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .4s,background .5s,opacity .6s}
.x-task:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.x-task-no{font:500 12px/1 var(--mono);color:var(--soft);letter-spacing:.06em}
.x-task h3{font:700 21px/1.25 var(--display);letter-spacing:-.01em;margin-top:4px;padding-right:4px}
.x-task p{color:var(--ink-2);font-size:16px}
.x-task-ck{position:absolute;right:20px;top:20px;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line-2);display:grid;place-items:center;background:#fff;transition:background .35s,border-color .35s}
.x-task-ck svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .4s ease .15s}
.x-task-st{position:absolute;right:58px;top:23px;width:84px;height:22px}
.x-task-st b{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;font:500 12px/1 var(--mono);transition:opacity .35s,transform .35s}
.x-task-st .a{background:#faefd9;color:#8a5a12}
.x-task-st .b{background:#e5f1e9;color:#2f6b4f;opacity:0;transform:translateY(8px)}
.x-task.done{border-color:#d9e7dc;background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%)}
.x-task.done .x-task-ck{background:var(--plum);border-color:var(--plum)}
.x-task.done .x-task-ck svg{stroke-dashoffset:0}
.x-task.done .x-task-st .a{opacity:0;transform:translateY(-8px)}
.x-task.done .x-task-st .b{opacity:1;transform:none}
.x-task.pop .x-task-ck{animation:xpopck .45s cubic-bezier(.2,.7,.2,1.4)}
@keyframes xpopck{0%{transform:scale(1)}45%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
.js .x-tasks:not(.seen) .x-task{opacity:0;transform:translateY(26px)}
.js .x-tasks.seen .x-task{transition-delay:calc(var(--i)*80ms)}
.js .x-tasks.seen .x-task:hover{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.js .x-tasks:not(.seen) .x-task{opacity:1;transform:none}.x-task,.x-task *{transition:none!important;animation:none!important}}

/* call-to-action boxes: their own color so they never blend with the page */
.x-cta,.book-card{background:linear-gradient(135deg,#f6d2df 0%,#fbe7ee 48%,#f7e6b8 100%)!important;border-color:#ecc6d4!important}
.x-cta .btn.ghost,.book-card .btn-line{background:#fff}

/* mirrored illustrations for variety (uses the scale property so entrance animations don't undo it) */
.x-flip{scale:-1 1}
.x-hero .x-illo-close{height:min(96%,520px)}

/* price cards fan out from a stack (like JOVILAP pricing), then the care plans follow */
.x-deal{position:relative}
.x-deal .x-card{transition:transform .9s cubic-bezier(.3,1.25,.5,1),opacity .6s,box-shadow .3s,filter .3s,border-color .3s}
.js .x-deal:not(.fx-in) .x-card:nth-child(1){transform:translateX(70%) rotate(-9deg);opacity:0}
.js .x-deal:not(.fx-in) .x-card:nth-child(2){transform:translateY(40px) scale(.94);opacity:0}
.js .x-deal:not(.fx-in) .x-card:nth-child(3){transform:translateX(-70%) rotate(9deg);opacity:0}
.x-deal.fx-in .x-card:nth-child(2){transition-delay:.08s}
.x-deal.fx-in .x-card:nth-child(3){transition-delay:.16s}
@media (hover:hover){
  .x-deal.fx-in:hover .x-card{filter:saturate(.6) opacity(.75)}
  .x-deal.fx-in .x-card:hover{filter:none;transform:translateY(-12px) rotate(-1deg);box-shadow:0 30px 50px -24px rgba(111,33,67,.45);transition-delay:0s}
  .x-deal.fx-in .x-card:nth-child(even):hover{transform:translateY(-12px) rotate(1deg)}
}
/* care plans: same deal, coming up from below the websites row */
.js .x-deal.care:not(.fx-in) .x-card:nth-child(1){transform:translate(70%,-60px) rotate(-6deg)}
.js .x-deal.care:not(.fx-in) .x-card:nth-child(2){transform:translateY(-70px) scale(.94)}
.js .x-deal.care:not(.fx-in) .x-card:nth-child(3){transform:translate(-70%,-60px) rotate(6deg)}
#websites,#care{overflow-x:clip}
@media (max-width:900px){
  .js .x-deal:not(.fx-in) .x-card:nth-child(1),.js .x-deal:not(.fx-in) .x-card:nth-child(3){transform:translateY(50px) rotate(-3deg)}
  .js .x-deal:not(.fx-in) .x-card:nth-child(3){transform:translateY(50px) rotate(3deg)}
}
/* traveling glow on the featured plan border */
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.x-deal .x-card.feat{border:2px solid transparent;box-shadow:none;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--beam),#ead9e1 0deg,#ead9e1 240deg,#e7a3bd 290deg,var(--plum) 320deg,#f3d98a 345deg,#ead9e1 360deg) border-box;animation:xbeam 4.5s linear infinite}
@keyframes xbeam{to{--beam:360deg}}
/* highlighter sweep */
.x-mark{background-image:linear-gradient(transparent 58%,rgba(244,206,219,.9) 58%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1s cubic-bezier(.7,0,.3,1) .35s;padding:0 2px}
.x-head.in-view .x-mark,.x-rv:not(.pre) .x-mark{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.js .x-deal .x-card{transform:none!important;opacity:1!important;transition:none}.x-deal .x-card.feat{animation:none}.x-mark{background-size:100% 100%;transition:none}}

/* contrast: cards never blend into the shifting page tones */
.x-card,.x-biz-panel,.x-task,.x-fact,.ap-card,.cs-card,.cs-rc,.x-shot,.card,.x-steps,.panel.form,.x-chat,.x-kv,.slot,.book-card,.x-cta,.wl-go,.bk-picks button,.dk-pane,.bd-pane{border-color:#e3cfd9!important}
.x-card,.x-biz-panel,.x-task,.x-fact,.ap-card,.cs-card,.x-steps,.panel.form,.x-chat,.slot{border-width:1.5px!important;border-style:solid!important}

/* ---------- professional polish: no tilted content, calm motion ---------- */
.cs-card{--r:0deg!important}
.cs-card:hover,.xa:hover,.xa:nth-child(even):hover,.bk-picks button:hover,.bk-picks button:nth-child(even):hover,.sy-tabs button:hover,.bz-t:hover,.cs-next:hover{transform:translateY(-3px)!important}
.cs-feat:hover{transform:translateY(-2px)!important}
.bk-notes li,.bk-notes li:hover{transform:none!important}
@media (hover:hover) and (pointer:fine){.x-deal.fx-in .x-card:hover,.x-deal.fx-in .x-card:nth-child(even):hover{transform:translateY(-6px)!important}}
.js .x-deal:not(.fx-in) .x-card:nth-child(n){transform:translateY(28px)!important;opacity:0}
.x-concept:hover .wk-ill img,.x-concept:hover .wk-ill img.x-flip{transform:translateY(-6px)!important}
.cs-next:hover img{transform:none!important}
.bz-t[aria-selected="true"] .ic,.sy-tabs button[aria-selected="true"] .ic,.bk-picks button[aria-pressed="true"] em{transform:none!important}
.bk-ring svg{animation:none!important}
.bk-chips span{animation:none!important}
.cs-cta-bakery .sp{display:none}
.cs-cta-bakery .cs-cta-art img{animation:csHover2 5s ease-in-out infinite!important}
@keyframes csHover2{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.cs-sticker{animation:none!important}
.wl-float.on{transform:translate(-50%,-50%) scale(1)!important}