:root{
  --bg:#ffffff; --bg2:#f4f1ff; --card:#ffffff; --line:rgba(20,16,42,.1);
  --text:#14102a; --muted:#5b5775; --a1:#6d3bff; --a2:#9b7bff; --a3:#6d3bff; --spark:#ff5a6a; --soft:#f4f1ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.logo{font-family:Poppins,sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* cursor glow */
#glow{position:fixed;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(208,91,192,.14),transparent 60%);transform:translate(-50%,-50%);transition:opacity .3s}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,backdrop-filter .3s}
nav.scrolled{background:rgba(255,247,238,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.logo .mark{width:36px;height:36px;padding:3px;display:grid;place-items:center;background:linear-gradient(90deg,var(--a1),var(--a2))}
.logo .mark i{display:grid;place-items:center;width:100%;height:100%;background:var(--bg)}
.logo .mark svg{width:20px}
.logo b{font-weight:800}.logo span.l{font-weight:300}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:-4px}
nav ul{display:flex;gap:32px;list-style:none;font-size:14px;color:var(--muted)}
nav ul a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:500;font-size:14px;
  background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{box-shadow:0 10px 40px -10px var(--a1)}
.btn.ghost{background:transparent;border:1px solid var(--line)}


/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:72px;overflow:hidden}
#grid{position:absolute;inset:0;z-index:0;opacity:.6}
.hero .wrap{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted);background:var(--card)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 #34d399;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(42px,7vw,88px);line-height:1.02;margin:24px 0;max-width:900px}
.grad{background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3),var(--a1));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shift 8s linear infinite}
@keyframes shift{to{background-position:300%}}
.typed{border-right:3px solid var(--a3);padding-right:4px;animation:caret 1s step-end infinite}
@keyframes caret{50%{border-color:transparent}}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:620px;margin-bottom:36px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg2)}
.track{display:flex;gap:56px;width:max-content;animation:scroll 32s linear infinite;font-family:Poppins;font-size:22px;color:var(--muted)}
.track span::before{content:"✦";margin-right:56px;color:var(--a2)}
@keyframes scroll{to{transform:translateX(-50%)}}

section{position:relative;z-index:2;padding:120px 0}
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--a3);margin-bottom:14px}
h2{font-size:clamp(32px,4.5vw,54px);line-height:1.08;margin-bottom:20px;max-width:760px}
.sub{color:var(--muted);max-width:620px;font-size:18px}

/* USP */
.usp{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.usp{grid-template-columns:1fr}}
.compare{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.box{padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-size:15px}
.box.them{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,80,80,.6)}
.box.us{border-color:rgba(255,90,90,.4);background:linear-gradient(135deg,rgba(255,90,90,.12),rgba(139,85,255,.10))}
.stats{display:flex;gap:40px;margin-top:40px;flex-wrap:wrap}
.stat b{font-family:Poppins;font-size:52px;display:block;line-height:1}
.stat span{color:var(--muted);font-size:14px}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:56px}
.card{position:relative;padding:30px;border-radius:20px;border:1px solid var(--line);background:var(--card);overflow:hidden;
  transition:transform .15s ease-out;transform-style:preserve-3d}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,90,90,.18),transparent 40%);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}
.card .ic{font-size:28px;margin-bottom:18px;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(109,59,255,.1)}
.card h3{font-size:21px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{padding:36px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),transparent)}
.pillar .n{font-family:Poppins;font-size:14px;color:var(--a3)}
.pillar h3{font-size:26px;margin:10px 0}
.pillar p{color:var(--muted)}
.pillar ul{margin-top:18px;list-style:none;display:grid;gap:8px;font-size:15px}
.pillar li::before{content:"→ ";color:var(--a1)}
.note{margin-top:14px;font-size:12px;color:var(--muted);opacity:.8}

/* review loop */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px;position:relative}
@media(max-width:900px){.loop{grid-template-columns:1fr 1fr}}
.step{padding:26px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.step b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));margin-bottom:16px;font-family:Poppins}

/* cta */
.cta{text-align:center;padding:100px 30px;border-radius:32px;border:1px solid var(--line);
  background:radial-gradient(ellipse at top,rgba(139,85,255,.28),transparent 60%),var(--bg2)}
.cta h2{margin:0 auto 18px}
.cta .sub{margin:0 auto 34px}
footer{padding:40px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line);position:relative;z-index:2}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---- full-site additions ---- */
.logo b{font-weight:800}.logo .l{font-weight:300}
.logo .mark{width:36px;height:36px;padding:3px;border-radius:0;background:linear-gradient(90deg,var(--a1),var(--a2))}
.logo .mark i{display:grid;place-items:center;width:100%;height:100%;background:var(--bg)}
.logo .mark svg{width:20px}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:-4px}
nav ul a.active{color:var(--text)}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--a1),var(--a2));z-index:100}
#menu{display:none;background:none;border:1px solid var(--line);color:var(--text);width:44px;height:44px;border-radius:12px;font-size:20px;cursor:pointer}
@media(max-width:900px){
  #menu{display:block}
  nav .btn.cta-n{display:none}
  nav ul{position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:rgba(255,247,238,.97);border-bottom:1px solid var(--line);display:none;padding:10px 24px 20px}
  nav.open ul{display:flex}
  nav.open{background:rgba(255,247,238,.97)}
  nav ul a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
}
.page-hero{padding:170px 0 70px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(38px,6vw,72px);line-height:1.04;max-width:880px;margin-bottom:20px}
.page-hero::before{content:"";position:absolute;width:700px;height:700px;right:-250px;top:-250px;background:radial-gradient(circle,rgba(139,85,255,.22),transparent 65%)}
.page-hero .wrap{position:relative}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:36px}}
.prose p{color:var(--muted);font-size:17px;margin-bottom:18px}
.prose p strong{color:var(--text);font-weight:500}
.list{list-style:none;display:grid;gap:12px;margin-top:20px}
.list li{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:15px;display:flex;gap:12px}
.list li::before{content:"✓";color:var(--a3);font-weight:700}
.svc-block{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;padding:60px 0;border-top:1px solid var(--line);align-items:start}
@media(max-width:900px){.svc-block{grid-template-columns:1fr;gap:20px}}
.svc-block h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.svc-block .n{font-family:Poppins;color:var(--a3);font-size:14px;margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags span{font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tile{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.tile b{display:block;font-family:Poppins;font-size:17px;margin-bottom:4px}
.tile span{color:var(--muted);font-size:14px}
.est{padding:36px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),transparent)}
.est label{display:flex;justify-content:space-between;font-size:15px;margin:22px 0 8px}
.est input[type=range]{width:100%;accent-color:var(--a2)}
.est .out{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.est .out b{display:block;font-family:Poppins;font-size:clamp(30px,4vw,44px)}
.est small{color:var(--muted);font-size:12px;display:block;margin-top:8px}
.faq{max-width:820px;margin-top:40px}
.faq .it{border-bottom:1px solid var(--line)}
.faq button{width:100%;text-align:left;background:none;border:0;color:var(--text);font:500 18px Poppins;padding:24px 40px 24px 0;cursor:pointer;position:relative}
.faq button::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--a3);transition:transform .3s}
.faq .it.open button::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--muted)}
.faq .it.open .ans{max-height:300px}
.faq .ans p{padding-bottom:24px}
form.contact{display:grid;gap:18px}
form.contact label{font-size:14px;color:var(--muted);display:grid;gap:8px}
form.contact input[type=text],form.contact input[type=email],form.contact textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:16px Inter,sans-serif}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--a2);border-color:transparent}
.chk{display:flex;flex-wrap:wrap;gap:10px}
.chk label{flex-direction:row;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--text)}
.chk label:has(input:checked){border-color:var(--a2);background:rgba(139,85,255,.15)}
.chk input{accent-color:var(--a2)}
.warn{padding:18px 20px;border-radius:14px;border:1px solid rgba(255,90,90,.35);background:rgba(255,90,90,.07);font-size:14px;color:#d8d3e6}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;width:100%;margin-bottom:30px}
footer .cols h4{color:var(--text);font-family:Poppins;font-size:14px;margin-bottom:12px}
footer .cols a{display:block;padding:3px 0}footer .cols a:hover{color:var(--text)}
footer .wrap{flex-direction:column}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
@media(max-width:700px){footer .cols{grid-template-columns:1fr}}

nav ul li:has(.cta-m){display:none}
@media(max-width:900px){nav ul li:has(.cta-m){display:block}}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:800px){.vs{grid-template-columns:1fr}}
.vs-col{padding:34px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.vs-col h3{font-size:22px;margin-bottom:16px}
.vs-col ul{list-style:none;display:grid;gap:12px;font-size:16px}
.vs-col.them{color:var(--muted)}.vs-col.them li::before{content:"✕ ";color:#ff5a5a}
.vs-col.us{border-color:rgba(255,90,90,.4);background:linear-gradient(135deg,rgba(255,90,90,.1),rgba(139,85,255,.1))}
.vs-col.us li::before{content:"✓ ";color:#34d399;font-weight:700}
.timeline{margin-top:50px;display:grid;gap:0;position:relative}
.tl{display:grid;grid-template-columns:56px 1fr;gap:24px;padding-bottom:36px;position:relative}
.tl::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl b{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));font-family:Poppins;font-size:20px}
.tl h3{font-size:22px;margin-bottom:6px}.tl p{color:var(--muted);max-width:640px}
.jt{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.jt button{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:500 15px Inter,sans-serif;cursor:pointer;transition:all .2s}
.jt button:hover{border-color:var(--a2)}
.jt button.on{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent}
#jt-out{width:100%;margin-top:14px;padding:20px 22px;border-radius:16px;border:1px dashed var(--line);color:var(--muted);min-height:84px;font-size:16px}
#jt-out.has{color:var(--text);border-style:solid;border-color:rgba(139,85,255,.5);background:rgba(139,85,255,.08)}

/* ---- motion pass ---- */
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;will-change:transform}
.orb1{width:520px;height:520px;background:rgba(255,90,90,.16);top:10vh;left:-180px}
.orb2{width:560px;height:560px;background:rgba(139,85,255,.2);bottom:-120px;right:-200px}
.statement{padding:140px 0}
.words{font-family:Poppins;font-weight:700;font-size:clamp(28px,4.6vw,58px);line-height:1.18;letter-spacing:-.025em;max-width:1000px}
.words span{color:rgba(42,29,51,.18);transition:color .3s}
.words span.on{color:var(--text)}
.btn{will-change:transform}
.hero .wrap{will-change:transform,opacity}
.rail{display:flex;gap:18px;margin-top:50px}
.rail .card{flex:0 0 min(340px,78vw);min-height:260px}
.rail-bar{height:3px;background:var(--line);border-radius:3px;margin-top:26px;max-width:340px;overflow:hidden}
.rail-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a1),var(--a2))}
.swipe-hint{color:var(--muted);font-size:13px;margin-top:10px}
@media(min-width:901px){
  .hs{height:340vh;padding:0}
  .hs>.wrap{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:0 0 0 max(24px,calc(50vw - 590px));overflow:hidden}
  .hs .rail{will-change:transform;margin-top:44px}
  .hs .rail .card{flex-basis:360px}
  .hs>.wrap>p.rv:last-child{padding-right:24px}
}
@media(max-width:900px){
  .rail{overflow-x:auto;scroll-snap-type:x mandatory;margin:50px -24px 0;padding:0 24px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail .card{scroll-snap-align:center}
}
.tl b{transition:transform .5s,box-shadow .5s,filter .5s;filter:grayscale(1) brightness(.6)}
.tl.on b{filter:none;transform:scale(1.12);box-shadow:0 0 0 8px rgba(139,85,255,.18),0 0 40px rgba(255,90,90,.35)}
.tl::before{background:linear-gradient(var(--a2),var(--a2)) top/100% 0 no-repeat,var(--line);transition:background-size .6s}
.tl.on::before{background-size:100% 100%}
.tl>div{opacity:.4;transition:opacity .5s,transform .5s}
.tl.on>div{opacity:1;transform:translateX(6px)}
.step b,.stat b{transition:transform .3s}
.step:hover b{transform:rotate(12deg) scale(1.1)}
.card .ic{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card:hover .ic{transform:scale(1.2) rotate(-8deg)}
.tile{transition:transform .3s,border-color .3s,background .3s}
.tile:hover{transform:translateY(-6px);border-color:rgba(139,85,255,.5);background:rgba(139,85,255,.08)}

.nots{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.nots span{font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--card)}
.nots span::before{content:"✕ ";color:var(--a1)}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
@media(max-width:900px){.diffs{grid-template-columns:1fr}}
.df{padding:30px;border-radius:20px;border:1px solid var(--line);background:var(--card);transition:transform .3s,border-color .3s}
.df:hover{transform:translateY(-8px);border-color:rgba(139,85,255,.55)}
.df b{font-family:Poppins;font-size:40px;line-height:1;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.df h3{font-size:20px;margin:14px 0 8px}.df p{color:var(--muted);font-size:15px}
.scn{margin-top:30px}
.scn-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.scn-tabs button{padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:500 14px Inter,sans-serif;cursor:pointer;transition:all .25s}
.scn-tabs button.on{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent}
.scn-panel{display:none}.scn-panel.on{display:block;animation:in .5s}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.qs{list-style:none;counter-reset:q;display:grid;gap:12px}
.qs li{counter-increment:q;padding:18px 20px 18px 64px;border:1px solid var(--line);border-radius:14px;background:var(--card);position:relative;font-size:16px}
.qs li::before{content:counter(q);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:Poppins;font-weight:600;font-size:14px;background:linear-gradient(135deg,var(--a1),var(--a2))}

/* ---- indie / personal pass ---- */
@keyframes spin{to{transform:rotate(360deg)}}
.letter-sec{padding:60px 0}
.letter{max-width:760px;margin:0 auto;padding:46px 50px;border-radius:6px;background:linear-gradient(180deg,#2a1c36,#1f1529);border:1px solid var(--line);transform:rotate(-1deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),12px 12px 0 rgba(139,85,255,.18)}
.letter p{color:#4a3a52;font-size:18px;margin-bottom:16px}
.letter strong{color:#2a1d33;font-weight:500}
.hand-big{font-family:Poppins,sans-serif!important;font-size:38px!important;font-weight:700;color:var(--a1)!important;line-height:1;margin-bottom:18px!important}
.hand-sign{font-family:Poppins,sans-serif!important;font-size:44px!important;font-weight:700;color:#fff!important;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin:10px 0 0!important}
.hand-sign a{font:500 14px Inter,sans-serif;color:var(--a3)}
@media(max-width:700px){.letter{padding:30px 24px;transform:none}}
.df:nth-child(odd){transform:rotate(-.7deg)}.df:nth-child(even){transform:rotate(.7deg)}
.df:hover{transform:rotate(0) translateY(-8px)!important}
.pillar:nth-child(2){transform:rotate(.8deg)}.pillar:nth-child(1){transform:rotate(-.6deg)}
.btn,.card,.tile,.df,.pillar,.box,.step,.vs-col{border-radius:14px}
.btn{border-radius:999px}
footer .base span{font-size:12px}

/* ---- graphics pass ---- */
.gi{width:26px;height:26px}
.ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(109,59,255,.1);margin-bottom:18px}
.tl b .gi{width:26px;height:26px;stroke:#fff}
.tl b{filter:none}
.df{position:relative}.df b{position:absolute;top:26px;right:28px;font:600 14px Poppins!important;background:none!important;-webkit-text-fill-color:var(--muted);color:var(--muted)}
.hero .wrap{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-22}}
@keyframes bob{50%{transform:translateY(-6px)}}
@media(min-width:1100px){.hub-wrap{display:block;position:absolute;right:0;top:50%;width:440px;margin-top:-230px}}
@media(max-width:1099px){.hub-wrap{display:block;max-width:360px;margin:0 auto 20px}}
@media(max-width:800px){.gfx-pair{grid-template-columns:1fr}}
.flowbox{margin-top:36px;padding:34px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.flow-cap{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.flow{display:flex;align-items:stretch;gap:0}
.fs{flex:1;text-align:center;padding:0 8px}
.fs .ic{margin:0 auto 14px}.fs b{display:block;font:600 16px Poppins;margin-bottom:4px}.fs span{color:var(--muted);font-size:13px;display:block}
.fc{flex:0 0 40px;align-self:flex-start;margin-top:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a1));background-size:200%;animation:flowc 1.6s linear infinite}
@keyframes flowc{to{background-position:200%}}
@media(max-width:900px){.flow{flex-direction:column;gap:6px}.fc{flex:0 0 28px;width:3px;height:28px;margin:4px auto;align-self:center;background:linear-gradient(180deg,var(--a1),var(--a2))}.fs{display:grid;grid-template-columns:52px 1fr;text-align:left;gap:0 16px;align-items:center}.fs .ic{grid-row:1/3;margin:0}}
.pots{margin-top:36px;padding:34px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.inc{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.inc span{font:600 14px Poppins;white-space:nowrap}
.pipe{flex:1;height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.pipe i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.pots.in .pipe i{width:100%}
.jars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pot{text-align:center}
.jar{height:150px;border:2px solid rgba(70,35,70,.25);border-top-width:0;border-radius:0 0 22px 22px;position:relative;overflow:hidden;background:rgba(70,35,70,.04)}
.jar i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,var(--a2),var(--a1));transition:height 1.6s cubic-bezier(.2,.8,.2,1) var(--d)}
.pots.in .jar i{height:var(--h)}
.pot b{display:block;margin-top:12px;font:500 14px Poppins}
@media(max-width:700px){.jars{grid-template-columns:1fr 1fr}}
.fq-h{font:600 22px Poppins;margin:56px 0 4px}
.faq-page .faq{margin-top:10px}
@media(min-width:1100px){.hero h1{max-width:640px;font-size:clamp(42px,5.2vw,72px)}.hero .lead{max-width:500px}}
.hero .wrap{width:100%}
@media(max-width:1099px){.hero .wrap{display:flex;flex-direction:column;align-items:flex-start}.hub-wrap{order:9;margin:40px auto 0}.hero{padding-bottom:60px}}

/* ---- warm pass ---- */
body{font-size:17px;line-height:1.7}
.eyebrow{color:var(--a3);letter-spacing:.14em}
.card,.df,.vs-col,.pillar,.gfx,.flowbox,.pots,.est,.step,.tile,.box,.panel,.cta{border-radius:26px}
.btn{padding:15px 28px;font-size:15px}
.btn:hover{box-shadow:0 12px 36px -8px rgba(109,59,255,.55)}
.pill{background:rgba(109,59,255,.12);border-color:rgba(109,59,255,.35);color:#ffd9b0;font-size:14px}
#glow{background:radial-gradient(circle,rgba(109,59,255,.16),transparent 60%)}
.orb1{background:rgba(109,59,255,.18)}.orb2{background:rgba(154,98,255,.2)}
.page-hero::before{background:radial-gradient(circle,rgba(109,59,255,.18),transparent 65%)}
/* hello badge */
.hello{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px}
.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:700 28px Poppins;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 0 0 4px rgba(109,59,255,.25);flex:none}
.bubble{position:relative;background:#ffffff;color:#2a1d33;padding:12px 18px;border-radius:18px 18px 18px 4px;font:500 15px Poppins;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);animation:wave 4s ease-in-out infinite;transform-origin:left bottom}
@keyframes wave{50%{transform:rotate(-2deg) translateY(-3px)}}
/* cream note card */
.letter{background:#ffffff;border:0;border-radius:26px;color:#2a1d33;transform:rotate(-1deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),10px 10px 0 rgba(109,59,255,.35)}
.letter p{color:#4a3a52}.letter strong{color:#2a1d33}
.hand-big{color:#6d3bff!important;font-size:30px!important}
.hand-sign{color:#2a1d33!important;font-size:30px!important}.hand-sign a{color:#6d3bff}
.letter-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.letter-head .avatar{width:56px;height:56px;font-size:24px}
.letter-head .hand-big{margin:0!important}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 20px}
.facts span{font:500 13px Inter;padding:7px 14px;border-radius:999px;background:rgba(42,29,51,.08);color:#4a3a52}

/* ---- LIGHT, FRIENDLY THEME ---- */
body{background:var(--bg)}
#glow{background:radial-gradient(circle,rgba(109,59,255,.18),transparent 60%)}
.orb{opacity:.55}.orb1{background:rgba(109,59,255,.35)}.orb2{background:rgba(109,59,255,.3)}
.logo .mark{background:linear-gradient(135deg,var(--a1),var(--a2));padding:0;border-radius:12px;width:38px;height:38px}
.logo .mark i{background:transparent}
.logo small{color:var(--muted)}
.card,.df,.vs-col,.pillar,.gfx,.flowbox,.pots,.est,.step,.tile,.box,.panel,.tl>div,.qs li,.list li,.scn-tabs button{background:#fff;box-shadow:0 14px 34px -24px rgba(90,40,90,.35)}
.pillar{background:#fff}
.vs-col.them{background:#fbf9ff}.vs-col.us{background:linear-gradient(135deg,#f4f1ff,#f3ebff);border-color:rgba(109,59,255,.35)}
.box.us{background:linear-gradient(135deg,#f4f1ff,#f3ebff);border-color:rgba(109,59,255,.35)}
.marquee{background:var(--bg2);border-color:var(--line)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--a2)}
nav.scrolled{background:rgba(255,247,238,.85)}
.cta{background:linear-gradient(135deg,#ece6ff,#f4f1ff);border-color:transparent}
.cta h2,.cta .sub{color:var(--text)}
.step b,.tl b{color:#fff}
.hero{background:linear-gradient(180deg,#ffffff,#f4f1ff)}
.page-hero::before{background:radial-gradient(circle,rgba(109,59,255,.3),transparent 65%)}
.card:hover::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(109,59,255,.12),transparent 40%)}
.pill{background:#fff;color:var(--text);border-color:var(--line)}
.bubble{background:#fff;border:1px solid var(--line)}
.letter{background:#fff;box-shadow:0 30px 60px -34px rgba(90,40,90,.45),10px 10px 0 rgba(109,59,255,.45)}
.letter-sec{background:transparent}
.nots span{background:#fff}
.warn{background:#fff3ef;color:var(--text)}
.disc{background:#fff3e6;color:var(--muted)}
.jt button{background:#fff;color:var(--text)}.jt button.on{color:#fff}
#jt-out.has{background:#f6efff}
form.contact input[type=text],form.contact input[type=email],form.contact textarea{background:#fff;color:var(--text)}
.chk label{background:#fff}.chk label:has(input:checked){background:#f3ebff}
.scn-tabs button.on{color:#fff}
.est input[type=range]{accent-color:var(--a2)}
.faq button{color:var(--text)}
footer{background:#f4f1ff}
.hero .wrap,.page-hero .wrap{position:relative}
.blobs span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:float 16s ease-in-out infinite}
.blobs .b1{width:420px;height:420px;background:#c9b8ff;top:-60px;right:8%}
.blobs .b2{width:360px;height:360px;background:#c9b8ff;bottom:-80px;left:6%;animation-delay:-6s}
.blobs .b3{width:240px;height:240px;background:#e6dbff;top:30%;left:38%;animation-delay:-11s}
@keyframes float{50%{transform:translate(40px,30px) scale(1.12)}}
.blobs{position:absolute;inset:0;overflow:hidden;z-index:0}
/* chat hero visual */
.chat{display:none;flex-direction:column;gap:14px;width:min(400px,100%)}
.msg{max-width:84%;padding:14px 18px;border-radius:22px;font:500 16px/1.45 Poppins;opacity:0;transform:translateY(14px) scale(.96);animation:pop .6s cubic-bezier(.3,1.5,.5,1) forwards;box-shadow:0 14px 30px -18px rgba(90,40,90,.45)}
.msg.you{align-self:flex-end;background:linear-gradient(135deg,var(--a1),#9b7bff);color:#fff;border-bottom-right-radius:6px}
.msg.me{align-self:flex-start;background:#fff;color:var(--text);border-bottom-left-radius:6px;display:flex;gap:10px;align-items:flex-start}
.msg .avatar{width:30px;height:30px;font-size:14px;box-shadow:none;margin-top:1px}
.msg:nth-child(1){animation-delay:.6s}.msg:nth-child(2){animation-delay:1.9s}.msg:nth-child(3){animation-delay:3.4s}.msg:nth-child(4){animation-delay:5s}
@keyframes pop{to{opacity:1;transform:none}}
.chat-tag{font:500 13px Inter;color:var(--muted);text-align:center;margin-top:6px}
@media(min-width:1100px){.chat{display:flex;position:absolute;right:0;top:50%;margin-top:-170px}.hero h1{max-width:640px}}
@media(max-width:1099px){.chat{display:flex;margin:40px auto 0;order:9}}

/* ---- plain, human pass ---- */
.grad{background:none;-webkit-text-fill-color:currentColor;color:var(--a1);animation:none}
.hl{color:var(--a1)}
.typed{border:0;padding:0}
.hello{margin-bottom:22px}
.hero{min-height:auto;padding:130px 0 90px}
.hero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.08;max-width:640px;margin:0 0 22px}
.hero .lead{color:var(--muted);font-size:19px;max-width:560px}
.card,.df,.vs-col,.pillar,.gfx,.flowbox,.est,.step,.tile,.box,.panel,.qs li,.list li,.scn-tabs button{box-shadow:none;border:1px solid var(--line)}
.eyebrow{letter-spacing:.1em;font-size:13px}
.plain{padding:84px 0}
.plain.tint{background:#f4f1ff}
.plain h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
.more{color:var(--a1);font-weight:500;border-bottom:1.5px solid currentColor}
.rows{list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:minmax(150px,.8fr) 1.4fr;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rows li b{font:600 17px Poppins}
.rows li span{color:var(--muted);font-size:16px}
@media(max-width:700px){.rows li{grid-template-columns:1fr}}
.four{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:34px}
@media(max-width:800px){.four{grid-template-columns:1fr}}
.four h3{font:600 21px Poppins;margin-bottom:8px}
.four p{color:#5b4a62;font-size:17px}
.touch{text-align:center;max-width:640px;margin:0 auto}
.touch h2{font-size:clamp(30px,4vw,46px)}
.touch-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:22px 0 26px;font:500 18px Poppins}
.touch-links a{border-bottom:1.5px solid var(--a1)}
.letter{transform:none;max-width:720px;box-shadow:0 20px 40px -28px rgba(90,40,90,.35)}
.faq button{font-size:17px}
.blobs span{opacity:.4}
nav ul a.active{color:var(--text);font-weight:500}
.df,.pillar{transform:none!important}

.em{font-style:normal;font-size:26px;line-height:1;grid-row:1/3}
.rows li{grid-template-columns:44px minmax(140px,.8fr) 1.4fr;align-items:center}
.rows li .em{grid-row:auto}
@media(max-width:700px){.rows li{grid-template-columns:40px 1fr}.rows li span{grid-column:2}}
.vsrows{display:grid;gap:12px;margin:34px 0 10px}
.vr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vr>span{padding:18px 22px;border-radius:18px;font:500 17px Poppins}
.vr .them{background:#fff;border:1px dashed rgba(70,35,70,.25);color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(109,59,255,.6)}
.vr .us{background:linear-gradient(135deg,#ece6ff,#f4f1ff);color:var(--text)}
@media(max-width:700px){.vr{grid-template-columns:1fr}}
.four{margin-top:44px}
.four h3{font-size:19px}
.four>div{background:#fff;padding:22px 24px;border-radius:20px;border:1px solid var(--line)}
.four{gap:16px}
.four p{font-size:15px}
.facts span{font-size:14px}

.svc-list{display:grid;gap:0}
.sv{display:grid;grid-template-columns:1fr 1.1fr;gap:10px 56px;padding:34px 0;border-top:1px solid var(--line)}
.sv h2{font:600 24px Poppins;grid-column:1;margin:0}
.sv>p{grid-column:1;color:var(--muted);max-width:460px}
.sv ul{grid-column:2;grid-row:1/4;list-style:none;display:grid;gap:10px;align-content:start}
.sv li{padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:16px}
.sv li::before{content:"✓ ";color:var(--a1);font-weight:700}
@media(max-width:800px){.sv{grid-template-columns:1fr}.sv ul{grid-column:1;grid-row:auto;margin-top:8px}}
.page-hero{padding:140px 0 50px}
.page-hero h1{font-size:clamp(36px,5vw,60px)}
.page-hero .blobs{position:absolute;inset:0;overflow:hidden}
.page-hero::before{display:none}
.prose p{color:#5b4a62}
.qs li{box-shadow:none}

/* ---- fluid pass ---- */
html{scroll-behavior:smooth}
body{animation:pagein .7s ease both;background:linear-gradient(180deg,#ffffff 0%,#fff2e6 50%,#ffffff 100%) fixed}
body.leaving{opacity:0;transition:opacity .25s ease}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}}
.plain{position:relative}
.plain.tint{background:#f4f1ff;padding:130px 0}
.plain.tint::before,.plain.tint::after{content:"";position:absolute;left:0;right:0;height:70px;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.plain.tint::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30c-200 50-420 50-700 10S200 5 0 45z' fill='%23ffffff'/%3E%3C/svg%3E")}
.plain.tint::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80h1440V50c-240-50-480-50-720-10S240 5 0 40z' fill='%23ffffff'/%3E%3C/svg%3E")}
/* soft, bubble-like shapes instead of boxes */
.vr .them,.vr .us{border-radius:26px 26px 26px 6px;border:0}
.vr .them{background:#fff;box-shadow:0 10px 24px -18px rgba(90,40,90,.4);text-decoration:none;color:var(--muted)}
.vr .us{border-radius:26px 26px 6px 26px;background:linear-gradient(135deg,#e6dbff,#e6d8ff)}
.vr:nth-child(even) .them{margin-right:30px}.vr:nth-child(even) .us{margin-left:30px}
.four>div{background:none;border:0;padding:0}
.four h3{font-size:20px}
.sv li{border:0;border-radius:999px;background:rgba(109,59,255,.1);padding:11px 20px}
.qs li{border:0;border-radius:999px;background:#fff;box-shadow:0 10px 24px -20px rgba(90,40,90,.4)}
.letter{border-radius:44px 70px 44px 70px}
.flowbox{border:0;background:rgba(255,255,255,.6);border-radius:60px}
.list li{border:0;border-radius:999px;background:#fff}
.rows li{transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s;border-radius:18px;padding-left:12px;padding-right:12px}
.rows li:hover{transform:translateX(8px);background:rgba(255,255,255,.7)}
.em{display:inline-block;animation:bob 4.5s ease-in-out infinite}
.rows li:nth-child(2n) .em{animation-delay:-1.2s}.rows li:nth-child(3n) .em{animation-delay:-2.4s}
@keyframes bob{50%{transform:translateY(-5px) rotate(-4deg)}}
.touch{position:relative;padding:70px 30px;border-radius:70px 120px 70px 120px;background:radial-gradient(ellipse at 30% 20%,#e6dbff,transparent 60%),radial-gradient(ellipse at 80% 80%,#e0d3ff,transparent 60%),#f4f1ff;max-width:820px}
.btn{transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.btn:active{transform:scale(.96)}
.more{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;border:0;padding-bottom:2px;transition:background-size .35s}
.more:hover{background-size:100% 1.5px}
/* word-by-word headings */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.sw>i{display:inline-block;font-style:normal;transform:translateY(110%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.sw-on .sw>i{transform:none}
/* reveals: softer, with direction */
.rv{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:none}
.rows li.rv:nth-child(odd){transform:translateX(-30px)}.rows li.rv:nth-child(even){transform:translateX(30px)}
.rows li.rv.in{transform:none}
.vr.rv:nth-child(odd) .them{}
/* follow glow */
#glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(109,59,255,.22),transparent 62%);transform:translate(-50%,-50%);left:50%;top:30%}
main,header,footer,section{position:relative;z-index:1}
.blobs span{will-change:transform}
/* Max says */
.says{display:flex;align-items:flex-start;gap:12px;margin:34px 0 0;max-width:560px}
.says .avatar{width:40px;height:40px;font-size:17px;box-shadow:none;flex:none}
.says span.t{background:#fff;padding:12px 18px;border-radius:6px 22px 22px 22px;font:500 15px/1.5 Poppins;box-shadow:0 10px 24px -16px rgba(90,40,90,.45)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;border-radius:10px;z-index:200}.skip:focus{left:8px}
.prose a{border-bottom:1.5px solid var(--a1)}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:16px}.crumbs a{color:var(--a1)}
.svc-hero-em{font-size:56px;display:block;margin-bottom:10px}
.steps-list{counter-reset:s;list-style:none;display:grid;gap:14px;margin-top:26px}
.steps-list li{counter-increment:s;padding:6px 0 6px 54px;position:relative;font-size:17px}
.steps-list li::before{content:counter(s);position:absolute;left:0;top:2px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;display:grid;place-items:center;font:600 16px Poppins}
@media (prefers-reduced-motion:reduce){.sw>i{transform:none}.em{animation:none}body{animation:none}}

.sv-list{list-style:none;display:grid;gap:10px}
.sv-list li{padding:14px 22px;border-radius:999px;background:#fff;box-shadow:0 10px 24px -20px rgba(90,40,90,.4);font-size:16px}
.sv-list li::before{content:"✓ ";color:var(--a1);font-weight:700}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:11px 20px;border-radius:999px;background:#fff;box-shadow:0 10px 24px -20px rgba(90,40,90,.4);font:500 15px Poppins;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.chip:hover{transform:translateY(-4px) rotate(-1.5deg)}
.sv h2 a:hover{color:var(--a1)}
html{overflow-x:hidden}
#glow{max-width:100vw;contain:paint}

/* ---- interactive workflow demo ---- */
.wf{margin-top:30px;padding:34px;border-radius:44px 70px 44px 70px;background:rgba(255,255,255,.7);box-shadow:0 30px 60px -40px rgba(90,40,90,.4)}
.flow-cap{font:600 13px Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.wf-hint{text-transform:none;letter-spacing:0;font-weight:500;color:var(--a1)}
.wf-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wf-line{position:absolute;left:10%;right:10%;top:29px;height:4px;border-radius:4px;background:rgba(70,35,70,.12);display:block}
.wf-fill{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .8s cubic-bezier(.3,.9,.3,1);position:relative}
.wf-fill::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(109,59,255,.3),0 0 14px var(--a1)}
.wf-b{position:relative;background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px;text-align:center}
.wf-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid rgba(70,35,70,.14);transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .4s,border-color .4s,box-shadow .4s}
.wf-ic svg{width:26px;height:26px}
.wf-b b{font:500 14px/1.3 Poppins;transition:color .3s}
.wf-b.done .wf-ic{background:#ece6ff;border-color:var(--a1)}
.wf-b.on .wf-ic{transform:scale(1.18);background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;box-shadow:0 14px 30px -10px rgba(109,59,255,.6)}
.wf-b.on .wf-ic svg{stroke:#fff}
.wf-b.on b{color:var(--text)}
.wf-b:hover .wf-ic{transform:translateY(-4px) scale(1.08)}
.wf-stage{position:relative;margin-top:30px;min-height:230px}
.wf-p{position:absolute;inset:0;opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1)}
.wf-p.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.wf-card{max-width:560px;margin:0 auto;background:#fff;border-radius:26px;padding:24px 28px;box-shadow:0 20px 44px -26px rgba(90,40,90,.5)}
.wf-lbl{font:600 13px Poppins;color:var(--a1);margin-bottom:12px}
.wf-q{font:500 16px/1.55 Poppins;color:var(--text);background:#f4f1ff;padding:14px 18px;border-radius:6px 20px 20px 20px;margin-top:6px}
.wf-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;animation:rowin .5s both}
.wf-row:nth-child(3){animation-delay:.12s}.wf-row:nth-child(4){animation-delay:.24s}.wf-row:nth-child(5){animation-delay:.36s}
.wf-row:last-child{border:0}.wf-row span{color:var(--muted)}
@keyframes rowin{from{opacity:0;transform:translateX(-14px)}}
.pill-new{background:#e6d8ff;color:#5b34b8;padding:2px 12px;border-radius:999px;font-size:13px}
.wf-type{font:500 16px/1.6 Poppins;min-height:104px}
.wf-type::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--a1);margin-left:2px;vertical-align:-3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.wf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.wf-send,.wf-edit,.wf-play{font:600 15px Poppins;border-radius:999px;padding:12px 22px;cursor:pointer;border:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.wf-send{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;animation:nudge 2s ease-in-out infinite}
@keyframes nudge{50%{transform:scale(1.05)}}
.wf-edit,.wf-play{background:#fff;border:1.5px solid var(--line);color:var(--text)}
.wf-send:hover,.wf-edit:hover,.wf-play:hover{transform:translateY(-2px)}
.wf-note{font-size:13px;color:var(--muted);margin-top:12px}
.wf-ticks{list-style:none;display:grid;gap:12px;margin-top:6px}
.wf-ticks li{font:500 16px Poppins;padding-left:34px;position:relative;opacity:0}
.wf-p.on .wf-ticks li{animation:tickin .6s forwards}
.wf-p.on .wf-ticks li:nth-child(2){animation-delay:.35s}.wf-p.on .wf-ticks li:nth-child(3){animation-delay:.7s}
.wf-ticks li::before{content:"✓";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;display:grid;place-items:center;font-size:13px}
.wf-ctrl{text-align:center;margin-top:20px}
.wf-play{padding:9px 18px;font-size:14px}
@media(max-width:800px){
  .wf{padding:24px 18px;border-radius:32px 48px 32px 48px}
  .wf-steps{grid-template-columns:1fr;gap:6px}
  .wf-line{left:28px;right:auto;top:30px;bottom:30px;width:4px;height:auto}
  .wf-fill{width:100%!important;height:0;transition:height .8s}
  .wf-fill::after{right:50%;top:auto;bottom:-6px;margin:0 -6px 0 0}
  .wf-b{flex-direction:row;text-align:left;gap:16px;padding:4px 0}
  .wf-b b{font-size:15px}
  .wf-ic{flex:none}
  .wf-stage{min-height:300px}
}
.logo small{font-size:11px}

/* ---- animated "instead of this, I do that" rows ---- */
.vr{position:relative}
.vr .them .x{background:linear-gradient(var(--spark),var(--spark)) 0 56%/0% 3px no-repeat;-webkit-box-decoration-break:slice;box-decoration-break:slice;transition:background-size .9s cubic-bezier(.6,0,.2,1) .45s,color .6s .45s}
.vr.in .them .x{background-size:100% 3px;color:#8a85a3}
.vr .them{transition:transform .6s .45s,opacity .6s .45s}
.vr.in .them{transform:rotate(-1deg) scale(.985);opacity:.85}
.vr .us{opacity:0;transform:translateX(44px) scale(.9);transform-origin:left center}
.vr.in .us{opacity:1;transform:none;transition:opacity .5s 1.3s,transform .9s cubic-bezier(.3,1.6,.5,1) 1.3s}
.vr::after{content:"→";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;display:grid;place-items:center;font:700 18px Poppins;transform:scale(0) rotate(-90deg);transition:transform .6s cubic-bezier(.3,1.8,.5,1) 1.15s;z-index:2;box-shadow:0 8px 18px -6px rgba(109,59,255,.6)}
.vr.in::after{transform:scale(1) rotate(0)}
@media(max-width:700px){.vr::after{content:"↓";top:calc(50% + 6px)}.vr .us{transform:translateY(24px) scale(.92)}}
.vr .us{position:relative;overflow:hidden}
.vr.in .us::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);animation:shine 1.1s 1.9s ease-out forwards}
@keyframes shine{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.vr .them .x{background-size:100% 3px;transition:none}.vr .us,.vr::after{opacity:1;transform:none;transition:none}.vr::after{transform:scale(1)}}

/* ---- workflow: fuller cards, big finish ---- */
.wf-card{max-width:680px;min-height:240px;display:flex;flex-direction:column;justify-content:center}
.wf-card.done{background:linear-gradient(135deg,#fff,#f4f1ff 60%,#efe6ff);position:relative;overflow:hidden}
.wf-big{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.wf-title{font:700 clamp(28px,4vw,40px)/1.1 Poppins;color:var(--text)}
.wf-sub{font:500 17px Poppins;color:var(--muted);margin-top:6px}
.wf-check{width:84px;height:84px;flex:none}
.wf-check svg{width:100%;height:100%;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.wf-check circle{stroke:var(--a1);stroke-dasharray:152;stroke-dashoffset:152;fill:rgba(109,59,255,.08)}
.wf-check path{stroke:var(--a2);stroke-dasharray:50;stroke-dashoffset:50}
.wf-p.on .wf-check circle{animation:draw .8s .1s ease forwards}
.wf-p.on .wf-check path{animation:draw .5s .7s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wf-ticks{gap:14px}
.wf-ticks li{font:500 19px Poppins;padding-left:40px}
.wf-ticks li::before{width:28px;height:28px;font-size:15px}
.wf-card.done::after{content:"✨";position:absolute;right:26px;top:20px;font-size:32px;animation:bob 3s ease-in-out infinite}
.wf-card.done::before{content:"🎉";position:absolute;right:70px;bottom:18px;font-size:30px;animation:bob 3.4s ease-in-out infinite -1s}
.wf-q{font-size:18px}
.wf-type{font-size:18px;min-height:120px}
@media(max-width:800px){.wf-big{gap:16px}.wf-check{width:64px;height:64px}.wf-ticks li{font-size:17px}.wf-card{padding:22px}}
@keyframes tickin{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.wf-p.on .wf-ticks li:nth-child(1){animation-delay:.9s}.wf-p.on .wf-ticks li:nth-child(2){animation-delay:1.25s}.wf-p.on .wf-ticks li:nth-child(3){animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){.wf-ticks li{opacity:1;animation:none!important}}

/* ---- tool logos ---- */
.lgs{margin-top:10px}
.lg-t{font:600 13px Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lg-row{display:flex;flex-wrap:wrap;gap:12px}
.lg{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 14px;border-radius:999px;background:#fff;box-shadow:0 10px 24px -18px rgba(90,40,90,.5);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lg img{width:28px;height:28px;object-fit:contain}
.lg b{font:500 15px Poppins}
.lg:hover{transform:translateY(-5px) rotate(-1.5deg)}
.lg-note{font-size:12px;color:var(--muted);margin-top:14px;max-width:640px}
.tm{display:block;width:100%;font-size:11px;color:var(--muted);margin-top:8px}
footer .base{flex-wrap:wrap}
.lg img[src*="zoom"]{width:56px}

/* ---- What I do: punchy, varied sections ---- */
mark{background:linear-gradient(transparent 58%,rgba(255,90,106,.28) 58%) 0 0/0% 100% no-repeat;color:inherit;padding:0 .08em;transition:background-size .9s cubic-bezier(.6,0,.2,1) .5s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.in mark,.sw-on mark,.page-hero mark{background-size:100% 100%}
.svx-wrap{display:block}
.svx{position:relative;padding:90px 0;overflow:hidden}
.svx.v1{background:#ffffff}.svx.v2{background:#f4f1ff}.svx.v3{background:#ffffff}.svx.v0{background:#f4f1ff}
.svx-n{position:absolute;right:4%;top:18px;font:800 clamp(120px,20vw,260px)/1 Poppins;color:rgba(109,59,255,.08);pointer-events:none;user-select:none}
.svx.flip .svx-n{right:auto;left:4%}
.svx-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;position:relative}
.svx.flip .svx-in{grid-template-columns:1fr 1.25fr}
.svx.flip .svx-l{order:2}.svx.flip .svx-r{order:1}
.svx-em{font-size:58px;display:inline-block;animation:bob 4.5s ease-in-out infinite}
.svx-k{font:600 13px Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--a3);margin:6px 0 10px}
.svx-h{font:700 clamp(30px,4.4vw,52px)/1.08 Poppins;margin-bottom:16px;letter-spacing:-.025em}
.svx-p{font-size:18px;color:#5b4a62;max-width:520px;margin-bottom:16px}
.svx-q{font:500 clamp(18px,2vw,22px)/1.45 Poppins;background:#fff;padding:24px 28px;border-radius:30px 30px 30px 6px;box-shadow:0 20px 40px -26px rgba(90,40,90,.5);position:relative;transform:rotate(-1.2deg)}
.svx.flip .svx-q{border-radius:30px 30px 6px 30px;transform:rotate(1.2deg)}
.svx-hear{font:500 13px Inter;color:var(--muted);margin:12px 0 14px 8px}
.svx-chips{display:flex;flex-wrap:wrap;gap:8px}
.svx-chips span{padding:8px 16px;border-radius:999px;background:rgba(109,59,255,.12);font:500 14px Poppins;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.svx-chips span:hover{transform:translateY(-3px) rotate(-2deg);background:rgba(109,59,255,.22)}
@media(max-width:860px){.svx{padding:64px 0}.svx-in,.svx.flip .svx-in{grid-template-columns:1fr;gap:26px}.svx.flip .svx-l{order:1}.svx.flip .svx-r{order:2}.svx-n{font-size:120px;top:6px}}
.svx-hear{margin:0 0 12px 12px}.svx-q{margin-bottom:16px}
.lg-txt{padding:10px 22px}.lg-txt b{font:700 16px Poppins;letter-spacing:.01em}

/* ---- looser heroes ---- */
.hero2{min-height:auto;padding:150px 0 90px;text-align:center;overflow:hidden}
.hero2 .wrap{display:block;max-width:760px}
.hero2 .eyebrow{display:block;font:600 13px Poppins;letter-spacing:.2em;text-transform:uppercase;color:var(--a3);transform:none;margin-bottom:22px}
.hero2 h1{font-size:clamp(46px,8vw,92px);line-height:1.02;max-width:none;margin:0 auto 22px;letter-spacing:-.035em}
.hero2 .hi{display:inline-block;color:var(--a1);transition:opacity .35s,transform .35s}
.hero2 .hi.out{opacity:0;transform:translateY(-14px)}
.hero2 .lead{font-size:clamp(18px,2.2vw,22px);max-width:520px;margin:0 auto 32px}
.hero2 .ctas{justify-content:center;align-items:center;gap:26px}
.hero2 .chat{display:flex;position:static;margin:70px auto 0;width:min(460px,100%);text-align:left}
.shapes .sh{position:absolute;display:block;pointer-events:none;animation:drift 14s ease-in-out infinite}
.shapes .s1{width:150px;height:150px;left:-30px;top:120px;background:#c9b8ff;border-radius:0 100% 0 0}
.shapes .s2{width:120px;height:60px;right:-10px;top:210px;background:#6d3bff;border-radius:120px 120px 0 0;transform:rotate(90deg);animation-delay:-4s}
.shapes .s3{width:90px;height:90px;left:8%;bottom:90px;background:#e6dbff;border-radius:50% 0 50% 0;animation-delay:-8s}
.shapes .s4{width:70px;height:70px;right:12%;bottom:150px;background:#ff5a6a;border-radius:0 50% 50% 50%;animation-delay:-2s}
@keyframes drift{50%{transform:translate(14px,-18px) rotate(8deg)}}
@media(max-width:700px){.shapes .s1{width:90px;height:90px;top:90px;left:-20px}.shapes .s2{display:none}.shapes .s3{width:56px;height:56px;left:4%;bottom:60px}.shapes .s4{display:none}.hero2{padding:120px 0 60px}}
.page-hero .wrap{text-align:center}
.page-hero h1{margin-left:auto;margin-right:auto;max-width:860px}
.page-hero .sub{margin:0 auto;max-width:560px}
.page-hero .ctas{justify-content:center}
.page-hero{padding:150px 0 60px}
.crumbs{text-align:center}
.svc-hero-em{margin:0 auto 10px}
/* pricing bubbles */
.price-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:860px;margin:0 auto}
@media(max-width:760px){.price-pair{grid-template-columns:1fr}}
.pbub{padding:38px 36px;background:#fff;border-radius:60px 60px 60px 12px;box-shadow:0 30px 60px -40px rgba(90,40,90,.5)}
.pbub.alt{border-radius:60px 60px 12px 60px;background:linear-gradient(135deg,#ece6ff,#f4f1ff)}
.pk{font:600 13px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--a3);margin-bottom:8px}
.pp{font:500 20px Poppins;color:var(--muted);margin-bottom:18px}
.pp b{font:800 clamp(44px,6vw,64px)/1 Poppins;color:var(--text);margin:0 6px}
.pp span{font-size:16px}
.pbub ul{list-style:none;display:grid;gap:10px}
.pbub li{padding-left:30px;position:relative;font-size:16px}
.pbub li::before{content:"✓";position:absolute;left:0;top:0;color:var(--a1);font-weight:700}

/* ---- testimonial ---- */
.tq{max-width:820px;margin:0 auto;text-align:center}
.tq-lab{font:600 13px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--a3);margin-bottom:18px}
.tq-bub{background:#fff;border-radius:46px 46px 46px 10px;padding:38px 42px;box-shadow:0 30px 60px -40px rgba(90,40,90,.55);text-align:left;position:relative}
.tq-bub::before{content:"“";position:absolute;left:22px;top:-22px;font:800 90px/1 Poppins;color:var(--a1);opacity:.25}
.tq-bub p{font:500 clamp(19px,2.6vw,27px)/1.5 Poppins;color:var(--text)}
.tq-by{display:flex;align-items:center;gap:14px;margin:20px 0 0 18px}
.tq-by .avatar{width:48px;height:48px;font-size:20px;box-shadow:none}
.tq-by b{display:block;font:600 16px Poppins;text-align:left}.tq-by span:not(.avatar){display:block;font-size:14px;color:var(--muted);text-align:left}
@media(max-width:700px){.tq-bub{padding:28px 24px;border-radius:34px 34px 34px 8px}}

/* ---- PALETTE C: crisp white + purple, coral as a spark ---- */
body{background:#fff}
.hero{background:linear-gradient(180deg,#fff,#f8f6ff)}
.blobs span{opacity:.5}
.btn{background:var(--a1)}
.btn:hover{box-shadow:0 12px 30px -8px rgba(109,59,255,.55);background:#5b2de6}
.btn.ghost{background:#fff;color:var(--text);border:1.5px solid var(--line)}
.logo .mark,.avatar{background:linear-gradient(135deg,#6d3bff,#9b7bff)}
.msg.you{background:linear-gradient(135deg,#6d3bff,#8f66ff);color:#fff}
.lg,.says .t,.sv-list li,.qs li,.list li,.chip,.tq-bub,.pbub:not(.alt),.letter,.bubble,.vr .them,.svx-q,.msg.me,.wf,.hero2 .msg.me{background:var(--soft)}
.tint .lg,.tint .says .t,.tint .sv-list li,.tint .qs li,.tint .list li,.tint .chip,.tint .vr .them,.svx.v2 .svx-q,.svx.v0 .svx-q,.tint .tq-bub,.tint .letter,.tint .pbub:not(.alt){background:#fff}
.pbub.alt,.vr .us{background:linear-gradient(135deg,#ece6ff,#f4f1ff)}
.rows li:hover{background:var(--soft)}
.svx-chips span,.chips span{background:rgba(109,59,255,.1)}
.svx-chips span:hover{background:rgba(109,59,255,.2)}
mark{background-image:linear-gradient(transparent 58%,rgba(255,90,106,.28) 58%)}
.vr::after,.wf-b.on .wf-ic,.tl b,.steps-list li::before,.wf-ticks li::before,.step b{background:linear-gradient(135deg,#6d3bff,#9b7bff)}
.vr::after{box-shadow:0 8px 18px -6px rgba(109,59,255,.6)}
.wf-send{background:linear-gradient(135deg,#6d3bff,#8f66ff)}
.wf-fill{background:linear-gradient(90deg,#6d3bff,#9b7bff)}
.wf-fill::after{box-shadow:0 0 0 4px rgba(109,59,255,.3),0 0 14px #6d3bff}
.wf-b.done .wf-ic{background:#ece6ff;border-color:#6d3bff}
.wf-check circle{stroke:#6d3bff;fill:rgba(109,59,255,.08)}.wf-check path{stroke:var(--spark)}
.more,.crumbs a,.hl,.hero2 .hi{color:var(--a1)}
.tq-bub::before{color:var(--a1)}
.footer,footer{background:#f4f1ff}
.page-hero::before{background:radial-gradient(circle,rgba(109,59,255,.18),transparent 65%)}
.touch{background:radial-gradient(ellipse at 30% 20%,#ece6ff,transparent 60%),radial-gradient(ellipse at 80% 80%,#ffe3e6,transparent 60%),#f4f1ff}
.cta{background:linear-gradient(135deg,#ece6ff,#f4f1ff)}
.svx.v1,.svx.v3{background:#fff}.svx.v2{background:#f4f1ff}.svx.v0{background:#f8f6ff}
.svx-n{color:rgba(109,59,255,.07)}
.wf-p .wf-card{background:#fff}
#jt-out.has{background:#f4f1ff}

/* ---- recent work + testimonial link ---- */
.tq-by a{color:var(--a1);border-bottom:1.5px solid currentColor}
.work-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:0 auto}
@media(max-width:700px){.work-pair{grid-template-columns:1fr}}
.wk{display:flex;flex-direction:column;gap:6px;padding:30px 32px;border-radius:44px 44px 44px 10px;background:var(--soft);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.wk:nth-child(2){border-radius:44px 44px 10px 44px;background:#fff;box-shadow:0 24px 50px -36px rgba(20,16,42,.5)}
a.wk:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 30px 50px -30px rgba(109,59,255,.5)}
.wk-n{font:700 22px Poppins}.wk-d{color:var(--muted);font-size:16px}.wk-l{margin-top:10px;font:600 15px Poppins;color:var(--a1)}

/* ---- BLEND: warm cream base + crisp type, coral-to-purple from the logo ---- */
:root{--bg:#fffaf5;--bg2:#fff0e6;--soft:#fff3ea;--line:rgba(40,20,50,.1);--text:#1d1530;--muted:#645a75;--a1:#ff5a5f;--a2:#7a4dff;--a3:#6d3bff;--spark:#ff5a5f}
body{background:#fffaf5}
.hero{background:linear-gradient(180deg,#fffaf5,#fff0e6)}
.btn{background:linear-gradient(135deg,#ff5a5f,#7a4dff)}
.btn:hover{background:linear-gradient(135deg,#ff4a50,#6b3cf0);box-shadow:0 12px 30px -8px rgba(255,90,95,.5)}
.btn.ghost{background:#fff}
.logo .mark,.avatar,.vr::after,.wf-b.on .wf-ic,.tl b,.steps-list li::before,.wf-ticks li::before,.step b,.wf-send{background:linear-gradient(135deg,#ff5a5f,#7a4dff)}
.wf-fill{background:linear-gradient(90deg,#ff5a5f,#7a4dff)}
.wf-fill::after{box-shadow:0 0 0 4px rgba(255,90,95,.3),0 0 14px #ff5a5f}
.wf-b.done .wf-ic{background:#ffe6e0;border-color:#ff5a5f}
.vr::after{box-shadow:0 8px 18px -6px rgba(255,90,95,.55)}
.msg.you{background:linear-gradient(135deg,#ff5a5f,#ff8a6b);color:#fff}
.more,.crumbs a,.tq-by a,.wk-l{color:#6d3bff}
.hl,.hero2 .hi{color:#ff5a5f}
.tq-bub::before{color:#ff5a5f}
mark{background-image:linear-gradient(transparent 58%,rgba(255,176,103,.7) 58%)}
.svx-chips span,.chips span{background:rgba(255,90,95,.12)}
.svx-chips span:hover{background:rgba(255,90,95,.22)}
.svx-n{color:rgba(255,90,95,.08)}
.svx.v1,.svx.v3{background:#fffaf5}.svx.v2{background:#fff0e6}.svx.v0{background:#f6f1ff}
.plain.tint{background:#fff0e6}
.plain.tint::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30c-200 50-420 50-700 10S200 5 0 45z' fill='%23fffaf5'/%3E%3C/svg%3E")}
.plain.tint::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80h1440V50c-240-50-480-50-720-10S240 5 0 40z' fill='%23fffaf5'/%3E%3C/svg%3E")}
.pbub.alt,.vr .us{background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.cta{background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.touch{background:radial-gradient(ellipse at 30% 20%,#ffd9c7,transparent 60%),radial-gradient(ellipse at 80% 80%,#e0d3ff,transparent 60%),#fff1e4}
footer{background:#fff0e6}
.page-hero::before{background:radial-gradient(circle,rgba(255,150,100,.25),transparent 65%)}
.shapes .s1{background:#d9ccff}.shapes .s2{background:#ff7a6b}.shapes .s3{background:#ffd08a}.shapes .s4{background:#8b55ff}
.blobs .b1{background:#ffb08a}.blobs .b2{background:#c9b8ff}.blobs .b3{background:#ffd9a0}
.blobs span{opacity:.45}
#glow{background:radial-gradient(circle,rgba(255,150,110,.2),transparent 62%)}
.lg,.says .t,.sv-list li,.qs li,.list li,.chip,.tq-bub,.pbub:not(.alt),.letter,.bubble,.vr .them,.svx-q,.msg.me,.wf,.hero2 .msg.me{background:#fff}
.tint .lg,.tint .says .t,.tint .sv-list li,.tint .qs li,.tint .list li,.tint .chip,.tint .vr .them,.tint .tq-bub,.tint .letter,.tint .pbub:not(.alt){background:#fff}
.hero2 .msg.me,.svx-q,.lg,.tq-bub,.letter,.wk{box-shadow:0 14px 30px -20px rgba(90,40,90,.45)}
.wk{background:#fff}.wk:nth-child(2){background:#fff}
.rows li:hover{background:rgba(255,255,255,.75)}
.wf{background:rgba(255,255,255,.7)}
.hero2 .eyebrow,.eyebrow,.svx-k,.pk,.lg-t,.flow-cap{color:#6d3bff}
.hand-big{color:#ff5a5f!important}
.letter{box-shadow:0 30px 60px -34px rgba(90,40,90,.45),10px 10px 0 rgba(255,176,103,.45)}

/* inline product logos */
.pn{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.pn img{width:.95em;height:.95em;object-fit:contain;flex:none;border-radius:2px}
.pn img[src*="zoom"]{width:2.1em}
h1 .pn img,h2 .pn img{width:.85em;height:.85em}
.faq button .pn img{width:1em}
.svx-chips .pn img,.sv li .pn img{width:1em}

/* ---- artwork: mascot, doodles, stickers, real work ---- */
.mascot{width:92px;height:92px;overflow:visible;animation:bob 4s ease-in-out infinite}
.mascot .arm{transform-origin:76px 94px;animation:wavearm 2.2s ease-in-out infinite}
@keyframes wavearm{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
.mas-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.mas-row .bubble{animation:none;border-radius:20px 20px 20px 4px}
.mas-sm{display:flex;justify-content:center;margin-bottom:6px}.mas-sm .mascot{width:76px;height:76px}
.sq{position:relative;display:inline-block;white-space:nowrap}
.squig{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.2em;overflow:visible}
.squig path{stroke-dasharray:260;stroke-dashoffset:260;animation:drawsq 1.2s .9s ease forwards}
@keyframes drawsq{to{stroke-dashoffset:0}}
.stk{position:absolute;width:132px;height:132px;display:none;animation:wob 6s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(90,40,90,.25))}
.stk svg{width:100%;height:100%}
.stk-l{left:-190px;top:230px;transform:rotate(-12deg)}.stk-r{right:-175px;top:360px;transform:rotate(10deg);animation-delay:-3s}
@keyframes wob{50%{rotate:5deg;translate:0 -8px}}
@media(min-width:1200px){.stk{display:block}}
.chat-wrap{position:relative;width:min(460px,100%);margin:70px auto 0}
.hero2 .chat{margin:0 auto;width:100%}
.chat-note{display:none;position:absolute;left:-250px;top:-10px;width:200px;font:italic 500 15px Poppins;color:var(--muted);transform:rotate(-5deg);text-align:left}
.chat-note .arr{width:70px;height:54px;display:block;margin:6px 0 0 120px;transform:scaleX(-1) rotate(-12deg)}
@media(min-width:1100px){.chat-note{display:block}}
.work-pair{max-width:1020px;gap:34px}
.wkc{display:flex;flex-direction:column;gap:18px;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.wkc:nth-child(odd) .mock{transform:rotate(-1.4deg)}.wkc:nth-child(even) .mock{transform:rotate(1.4deg)}
.wkc:hover .mock{transform:rotate(0) translateY(-8px)}
.mock{position:relative;padding:0 26px 22px 0;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.bf{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(40,20,70,.55),0 0 0 1px rgba(40,20,70,.08)}
.bf .dots{display:flex;gap:6px;padding:10px 14px;background:#f1edf7}
.bf .dots i{width:10px;height:10px;border-radius:50%;background:#d6cfe3}.bf .dots i:nth-child(1){background:#ff8d8d}.bf .dots i:nth-child(2){background:#ffd27a}.bf .dots i:nth-child(3){background:#8fd9a8}
.bf img{display:block;width:100%;height:auto}
.ph{position:absolute;right:0;bottom:0;width:30%;border-radius:22px;overflow:hidden;border:5px solid #1d1530;background:#1d1530;box-shadow:0 24px 40px -18px rgba(20,10,40,.6)}
.ph img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;object-position:top}
.wk-meta{display:flex;flex-direction:column;gap:4px;padding-left:6px}
.wk-n{font:700 22px Poppins}.wk-d{color:var(--muted);font-size:16px}.wk-l{margin-top:6px;font:600 15px Poppins;color:#6d3bff}
@media(max-width:700px){.work-pair{gap:46px}}
@media (prefers-reduced-motion:reduce){.mascot,.mascot .arm,.stk{animation:none}.squig path{animation:none;stroke-dashoffset:0}}
.hero2 .wrap{max-width:920px}
.hero2 h1{font-size:clamp(42px,7vw,84px);white-space:normal}
.hero2 h1 .hi,.hero2 h1 .sq{white-space:nowrap}

/* full phone renders, not cropped */
.mock{padding:0 30px 26px 0}
.ph{width:31%;border-radius:28px;border:6px solid #1d1530;right:0;bottom:0}
.ph img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:20px}
@media(max-width:700px){.ph{width:34%}}

/* ---- alignment + spacing fixes ---- */
.pn{display:inline;white-space:nowrap;background:none;padding:0;border-radius:0}
.pn img{display:inline-block;vertical-align:-.14em;margin-right:.32em;width:.95em;height:.95em}
.pn img[src*="zoom"]{width:2.1em}
.svx-chips>span,.chips>span{background:rgba(255,90,95,.12)}
.svx-chips>span:hover{background:rgba(255,90,95,.22)}
.svx-chips .pn,.chips .pn{background:none!important;padding:0!important;border-radius:0!important;transform:none!important;font:inherit}
.svx-chips span.pn:hover{background:none}
.page-hero{padding-bottom:30px}
.svx-wrap>.svx:first-child{padding-top:36px}
.svx-wrap>.svx:first-child .svx-n{top:0}
.svx-wrap{padding:0!important}.svx-wrap>.svx:first-child{padding-top:20px}

/* ---- photo ---- */
.avatar{overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.polaroid{display:block;width:min(270px,70vw);margin:0 auto 26px;padding:12px 12px 8px;background:#fff;border-radius:6px;box-shadow:0 30px 50px -26px rgba(40,20,70,.55);transform:rotate(-3deg);position:relative;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.polaroid:hover{transform:rotate(0) scale(1.03)}
.polaroid::before{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;background:rgba(255,208,138,.75);transform:rotate(2deg);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:2px}
.polaroid figcaption{font:600 17px Poppins;text-align:center;padding:12px 4px 6px;color:var(--text)}
.polaroid.side{margin:0 0 22px}
/* ---- who I work with: ticks off on scroll ---- */
.who .lg{transition:background .5s,transform .5s cubic-bezier(.3,1.6,.5,1),box-shadow .5s;opacity:.85}
.who .tk{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:2px}
.who .tk svg{width:26px;height:26px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.who .tk circle{stroke:rgba(29,21,48,.25);transition:stroke .4s,fill .4s}
.who .tk path{stroke:#fff;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s .1s ease}
.who .lg.on{background:#fff;transform:translateY(-3px) scale(1.04);opacity:1;box-shadow:0 14px 28px -16px rgba(122,77,255,.55)}
.who .lg.on .tk circle{stroke:#7a4dff;fill:#7a4dff}
.who .lg.on .tk path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.who .lg{opacity:1}.who .lg .tk path{stroke-dashoffset:0}.who .lg .tk circle{fill:#7a4dff;stroke:#7a4dff}}

.wk-tag{align-self:flex-start;font:600 13px Poppins;padding:6px 14px;border-radius:999px;background:rgba(122,77,255,.12);color:#5b34d9;margin-bottom:4px}
.wkc:nth-child(2) .wk-tag{background:rgba(255,90,95,.14);color:#d33a46}
.wk-note{color:var(--text);font-size:15px;margin-top:2px}

/* ---- tighter vertical rhythm ---- */
.hero2{padding:130px 0 50px}
.hero2 .chat-wrap{margin-top:46px}
.plain{padding:64px 0}
.plain.tint{padding:104px 0}
.letter-sec,.plain .letter{margin-top:0}
.lgs{margin-top:0}
.lg-note{margin-top:10px}
/* left headings follow you down long lists */
@media(min-width:901px){
  .plain.two-sticky .two>div:first-child,.plain .two>div:first-child{position:sticky;top:110px;align-self:start}
}
.plain .two{align-items:start}
@media(max-width:900px){.plain{padding:48px 0}.plain.tint{padding:80px 0}.hero2{padding:110px 0 40px}}
.svx{padding:72px 0}
@media(max-width:860px){.svx{padding:52px 0}}

/* ---- type consistency + hero offer ---- */
.eyebrow,.hero2 .eyebrow{font:600 13px Poppins;letter-spacing:.14em;text-transform:uppercase}
.hero2 h1{font-size:clamp(40px,6.6vw,80px);line-height:1.05}
.hero2 h1 .sq{white-space:normal}
.mas-row .bubble{font:600 15px Poppins}
.bubble #hi{display:inline-block;transition:opacity .35s,transform .35s}
.bubble #hi.out{opacity:0;transform:translateY(-6px)}
.wk-story{color:var(--text);font-size:15.5px;line-height:1.65;margin-top:6px}
.wk-d{font-weight:500;color:var(--muted)}
.cta-n{white-space:nowrap}

/* ---- one bill ---- */
.onebill{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;max-width:860px;margin:30px auto 0;padding:24px 30px;border-radius:40px 40px 40px 10px;background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.ob-l{flex:1 1 320px}.ob-l b{display:block;font:700 19px Poppins;margin-bottom:4px}.ob-l span{color:var(--muted);font-size:15.5px;line-height:1.55}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chips i{font:600 13px Poppins;font-style:normal;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 8px 16px -12px rgba(90,40,90,.5)}
.ob-chips i::before{content:"✓ ";color:#7a4dff}

/* ---- web design page: tiles + process strip ---- */
.wtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1020px;margin:0 auto}
@media(max-width:860px){.wtiles{grid-template-columns:1fr}}
.wt{padding:34px 30px;border-radius:44px 44px 44px 10px;background:#fff;box-shadow:0 26px 50px -34px rgba(90,40,90,.5);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.wt:nth-child(2){border-radius:44px 44px 10px 44px;background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.wt:hover{transform:translateY(-6px) rotate(-.6deg)}
.wt-i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff3ea;font-size:30px;margin-bottom:16px;box-shadow:0 10px 20px -12px rgba(90,40,90,.4)}
.wt h3{font:700 20px/1.25 Poppins;margin-bottom:8px}.wt p{color:var(--muted);font-size:16px;line-height:1.6}
.pstrip{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1080px;margin:0 auto}
.pstrip::before{content:"";position:absolute;left:10%;right:10%;top:34px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(122,77,255,.5) 0 10px,transparent 10px 20px)}
.ps{position:relative;text-align:center}
.ps-i{position:relative;display:grid;place-items:center;width:68px;height:68px;margin:0 auto 16px;border-radius:50%;background:#fff;font-size:30px;box-shadow:0 14px 26px -14px rgba(90,40,90,.55);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ps:hover .ps-i{transform:scale(1.12) rotate(-6deg)}
.ps h3{font:700 17px/1.25 Poppins;margin-bottom:6px}.ps p{color:var(--muted);font-size:14.5px;line-height:1.55}
@media(max-width:900px){.pstrip{grid-template-columns:1fr;gap:22px}.pstrip::before{left:33px;right:auto;top:20px;bottom:20px;width:3px;height:auto;background:repeating-linear-gradient(180deg,rgba(122,77,255,.5) 0 10px,transparent 10px 20px)}.ps{display:grid;grid-template-columns:68px 1fr;gap:0 18px;text-align:left;align-items:center}.ps-i{margin:0;grid-row:1/3}.ps h3{align-self:end}.ps p{align-self:start}}

/* ---- Why me: chips + checklist ---- */
.why3{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.why3 span{padding:12px 20px;border-radius:999px;background:#fff;box-shadow:0 12px 24px -16px rgba(90,40,90,.45);font:600 15px Poppins}
.chk7{max-width:760px;margin:0 auto;padding:30px;background:#fff;border-radius:44px 44px 44px 10px;box-shadow:0 30px 60px -38px rgba(90,40,90,.55);transform:rotate(-.6deg)}
.chk-top{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.chk-count{font:700 15px Poppins;white-space:nowrap}
.chk-bar{flex:1;height:8px;border-radius:8px;background:rgba(122,77,255,.12);overflow:hidden}
.chk-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#ff5a5f,#7a4dff);transition:width .5s cubic-bezier(.3,1,.3,1)}
.ck{display:flex;gap:16px;align-items:flex-start;padding:16px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.ck:last-of-type{border:0}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck .box{flex:none;width:30px;height:30px;border-radius:10px;border:2px solid rgba(29,21,48,.25);display:grid;place-items:center;transition:all .3s cubic-bezier(.3,1.6,.5,1);margin-top:1px}
.ck .box svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s .1s}
.ck input:checked+.box{background:linear-gradient(135deg,#ff5a5f,#7a4dff);border-color:transparent;transform:scale(1.1) rotate(-6deg)}
.ck input:checked+.box svg{stroke-dashoffset:0}
.ck input:focus-visible+.box{outline:3px solid #7a4dff;outline-offset:2px}
.qtxt b{display:block;font:600 17px/1.4 Poppins}
.qtxt .ans{display:block;max-height:0;overflow:hidden;opacity:0;color:var(--muted);font-size:15.5px;line-height:1.55;transition:max-height .5s ease,opacity .4s,margin .4s}
.ck input:checked~.qtxt .ans{max-height:120px;opacity:1;margin-top:6px}
.chk-done{max-height:0;overflow:hidden;opacity:0;text-align:center;font:500 16px Poppins;transition:max-height .5s,opacity .5s,margin .5s}
.chk7.all .chk-done{max-height:80px;opacity:1;margin-top:18px}
@media(max-width:700px){.chk7{padding:20px 16px;transform:none}}

.polaroid.tilt2{transform:rotate(2.2deg);margin:0 auto 34px;width:min(300px,78vw)}
.polaroid.tilt2:hover{transform:rotate(0) scale(1.03)}
.polaroid.tilt2::before{background:rgba(201,184,255,.8);transform:rotate(-3deg)}
.polaroid.tilt2 img{aspect-ratio:4/5;object-position:50% 30%}

/* ---- About: livelier ---- */
.pstrip.four-up{grid-template-columns:repeat(4,1fr);max-width:1080px}
.pstrip.four-up::before{left:12%;right:12%}
@media(max-width:900px){.pstrip.four-up{grid-template-columns:1fr}}
.big-say{font:800 clamp(34px,4.6vw,58px)/1.05 Poppins;letter-spacing:-.03em;margin-bottom:16px}
.polaroid.side{margin:0 auto}
/* keep the vertical dotted line in the icon column on narrow screens */
@media(max-width:900px){.pstrip.four-up::before{left:33px;right:auto;top:20px;bottom:20px;width:3px;height:auto;background:repeating-linear-gradient(180deg,rgba(122,77,255,.5) 0 10px,transparent 10px 20px)}}

/* ---- case studies ---- */
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
@media(max-width:800px){.glance{grid-template-columns:1fr}}
.glance>div{padding:22px 24px;border-radius:30px 30px 30px 8px;background:#fff;box-shadow:0 18px 36px -26px rgba(90,40,90,.5)}
.glance span{display:block;font:600 12px Poppins;letter-spacing:.14em;text-transform:uppercase;color:#6d3bff;margin-bottom:6px}
.glance b{font:600 17px/1.4 Poppins}
.cs-brief{max-width:720px;margin:10px auto 0;text-align:center;font:500 clamp(18px,2.2vw,22px)/1.6 Poppins;color:var(--text)}
.cs-feat{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:36px 0}
.cs-feat.flip{grid-template-columns:1.15fr 1fr}.cs-feat.flip .cs-t{order:2}.cs-feat.flip .cs-v{order:1}
@media(max-width:900px){.cs-feat,.cs-feat.flip{grid-template-columns:1fr;gap:22px}.cs-feat.flip .cs-t,.cs-feat.flip .cs-v{order:initial}}
.cs-n{font:800 14px Poppins;color:rgba(122,77,255,.55);letter-spacing:.1em}
.cs-t h3{font:700 clamp(24px,3vw,32px)/1.15 Poppins;margin:4px 0 12px}.cs-e{margin-right:4px}
.cs-t p{color:#5b4a62;font-size:17px;line-height:1.7}
.cs-v{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.shot{margin:0;width:100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.shot .bf img{width:100%;height:auto}
.cs-feat .shot{transform:rotate(-1deg)}.cs-feat.flip .shot{transform:rotate(1deg)}
.cs-feat .shot:hover{transform:rotate(0) translateY(-6px)}
.shotp{margin:0}.shotp .ph{position:static;width:min(210px,42vw);border-radius:28px;border:6px solid #1d1530}
.shotp .ph img{max-height:none}
.wk-ext{margin-top:4px;font:500 14px Poppins;color:var(--muted)}.wk-ext:hover{color:#6d3bff}
.mock-link{display:block}
.page-hero .ctas{gap:22px;align-items:center}

/* ---- mobile showcase ---- */
.phones3{display:flex;justify-content:center;align-items:flex-start;gap:0}
.phones3 .ph{position:relative;width:32%;max-width:190px;border-radius:26px;border:5px solid #1d1530;right:auto;bottom:auto;overflow:hidden;box-shadow:0 30px 50px -22px rgba(20,10,40,.6)}
.phones3 .ph img{max-height:none;width:100%;height:auto;display:block}
.phones3 .ph:nth-child(1){transform:rotate(-5deg) translateY(14px);margin-right:-14px}
.phones3 .ph:nth-child(2){z-index:2;transform:translateY(-10px) scale(1.06)}
.phones3 .ph:nth-child(3){transform:rotate(5deg) translateY(14px);margin-left:-14px}
.phones3:hover .ph{transform:none;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.cs-v .shotp{flex:1}
.cs-v .shotp .ph{width:100%;max-width:200px}
@media(max-width:900px){.phones3{margin-top:10px}}

/* ---- meet the business partner ---- */
.team{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.polaroid.tiny{width:190px;margin:0;transform:rotate(-3.5deg);flex:none}
.polaroid.tiny::before{background:rgba(255,208,138,.8);width:70px;margin-left:-35px}
.polaroid.tiny figcaption{font-size:14px}
.staffcard{flex:1 1 260px;max-width:340px;padding:26px 28px;background:#fff;border-radius:34px 34px 34px 8px;box-shadow:0 24px 46px -30px rgba(90,40,90,.55)}
.sc-k{font:600 12px Poppins;letter-spacing:.14em;text-transform:uppercase;color:#6d3bff;margin-bottom:6px}
.staffcard h3{font:800 24px/1.15 Poppins;margin-bottom:12px}
.staffcard ul{list-style:none;display:grid;gap:7px;margin-bottom:14px}
.staffcard li{display:flex;gap:10px;font-size:14.5px;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:6px}
.staffcard li b{flex:0 0 100px;font:600 13px Poppins;color:var(--muted)}
.sc-q{font:500 15px/1.55 Poppins;color:var(--text)}
@media(max-width:600px){.polaroid.tiny{width:170px}}

/* ---- sourced stats ---- */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:0 auto}
.stats4.s3{grid-template-columns:repeat(3,1fr);margin-top:34px}
@media(max-width:980px){.stats4,.stats4.s3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.stats4,.stats4.s3{grid-template-columns:1fr}}
.st{padding:28px 26px;background:#fff;border-radius:36px 36px 36px 8px;box-shadow:0 22px 44px -32px rgba(90,40,90,.55);display:flex;flex-direction:column;gap:8px}
.st:nth-child(even){border-radius:36px 36px 8px 36px;background:linear-gradient(135deg,#ffe9de,#f1e9ff)}
.st-n{font:800 clamp(40px,4.4vw,54px)/1 Poppins;letter-spacing:-.03em;color:#6d3bff}
.st-n.st-t{font-size:clamp(28px,3vw,36px);line-height:1.1;color:#ff5a5f}
.st p{font:500 15.5px/1.55 Poppins;color:var(--text)}
.st-note{font-size:12.5px;color:var(--muted)}
.st-src{margin-top:auto;font:500 12.5px Poppins;color:var(--muted);border-bottom:1px solid transparent;align-self:flex-start;transition:color .2s}
.st-src:hover{color:#6d3bff;border-color:currentColor}

/* ---- split web-design hero ---- */
.page-hero.wh{padding:120px 0 40px}
.wh-in{display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center;text-align:left!important;max-width:1180px}
.wh-in *{text-align:left}
.wh-l .crumbs{text-align:left}
.wh h1{font-size:clamp(36px,4.6vw,60px);margin:0 0 14px;max-width:none}
.wh .sub{margin:0;max-width:520px}
.wh-r{position:relative;height:440px}
.wc{position:absolute;filter:drop-shadow(0 30px 40px rgba(40,20,70,.35))}
.wc .bf{border-radius:14px}
.wc1{width:78%;left:0;top:10px;transform:rotate(-3deg);animation:wcf 7s ease-in-out infinite}
.wc2{width:66%;right:0;top:150px;transform:rotate(2.5deg);animation:wcf 8s ease-in-out infinite -3s}
.wc3{width:25%;left:10%;bottom:-6px;transform:rotate(-5deg);animation:wcf 6s ease-in-out infinite -1.5s}
.wc4{width:22%;right:6%;bottom:-18px;transform:rotate(4deg);animation:wcf 6.5s ease-in-out infinite -4s}
.wc .ph{position:static;width:100%;border-radius:20px;border:4px solid #1d1530;overflow:hidden}
.wc .ph img{width:100%;height:auto;max-height:none;display:block}
.wc5{width:112px;right:2%;top:-6px;transform:rotate(10deg);animation:wob 6s ease-in-out infinite}
.wc5 svg{width:100%;height:auto}
@keyframes wcf{50%{translate:0 -10px}}
@media(max-width:900px){.wh-in{grid-template-columns:1fr;gap:26px}.wh-r{height:340px;max-width:520px;margin:0 auto;width:100%}.wc2{top:110px}.wc5{width:90px}.page-hero.wh{padding:100px 0 20px}}
@media(max-width:520px){.wh-r{height:280px}.wc3{width:28%}.wc4{width:25%}}
@media (prefers-reduced-motion:reduce){.wc{animation:none!important}}
.phones3 .ph{max-width:220px}.phones3{margin-top:6px}

/* ---- feature explorer ---- */
.ft{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;max-width:1080px;margin:0 auto;align-items:stretch}
@media(max-width:860px){.ft{grid-template-columns:1fr}}
.ft-nav{display:grid;gap:14px;align-content:center}
.ft-b{position:relative;display:flex;gap:16px;align-items:center;text-align:left;padding:20px 22px;border-radius:28px 28px 28px 8px;border:0;background:#fff;cursor:pointer;font:inherit;color:var(--text);box-shadow:0 14px 30px -24px rgba(90,40,90,.5);transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,background .3s;overflow:hidden}
.ft-b:hover{transform:translateX(6px)}
.ft-b.on{background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 22px 40px -26px rgba(122,77,255,.6);transform:translateX(10px)}
.ft-e{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#fff3ea;font-size:26px}
.ft-b.on .ft-e{background:#fff}
.ft-tx b{display:block;font:700 17px/1.25 Poppins}
.ft-tx em{display:block;font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:3px}
.ft-prog{position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,#ff5a5f,#7a4dff)}
.ft-b.on .ft-prog{width:100%;transition:width var(--dur,5s) linear}
.ft-stage{position:relative;min-height:380px;border-radius:44px 44px 44px 10px;background:#fff;box-shadow:0 30px 60px -38px rgba(90,40,90,.55);overflow:hidden}
.ft-p{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;transform:scale(.97) translateY(12px);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1)}
.ft-p.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:860px){.ft-b.on,.ft-b:hover{transform:none}.ft-stage{min-height:360px}}
/* 1 idea board */
.mb{position:relative;width:100%;max-width:470px;height:320px}
.snote{position:absolute;padding:10px 14px;border-radius:6px;font:600 14px Poppins;box-shadow:0 12px 22px -12px rgba(0,0,0,.35);opacity:0}
.n1{left:0;top:6px;background:#fff0a8;transform:rotate(-5deg)}.n2{left:12px;top:78px;background:#ffd0d4;transform:rotate(3deg)}.n3{left:0;top:150px;background:#d9ccff;transform:rotate(-3deg)}.n4{left:16px;top:222px;background:#c8f0dc;transform:rotate(4deg)}
.ft-p.on .snote{animation:notein .6s cubic-bezier(.3,1.6,.5,1) forwards}
.ft-p.on .n2{animation-delay:.25s}.ft-p.on .n3{animation-delay:.5s}.ft-p.on .n4{animation-delay:.75s}
@keyframes notein{from{opacity:0;transform:translateY(16px) rotate(0) scale(.8)}to{opacity:1}}
.mb-arrow{position:absolute;left:150px;top:132px;width:70px;opacity:0}
.ft-p.on .mb-arrow{animation:fadein .4s 1s forwards}
@keyframes fadein{to{opacity:1}}
.wire{position:absolute;right:0;top:14px;width:230px;border-radius:14px;border:2px solid #1d1530;background:#fff;padding:8px;box-shadow:8px 8px 0 rgba(122,77,255,.25)}
.wire-bar{display:flex;gap:4px;margin-bottom:8px}.wire-bar i{width:8px;height:8px;border-radius:50%;background:#d6cfe3}
.wire>*{opacity:0;transform:translateY(10px)}
.ft-p.on .wire>*{animation:wirein .5s ease forwards}
.ft-p.on .wire-hero{animation-delay:1.3s}.ft-p.on .wire-row{animation-delay:1.6s}.ft-p.on .wire-btn{animation-delay:1.9s}.ft-p.on .wire-bar{animation-delay:1.1s}
@keyframes wirein{to{opacity:1;transform:none}}
.wire-hero{height:90px;border-radius:8px;background:linear-gradient(135deg,#ffb08a,#c9b8ff);margin-bottom:8px}
.wire-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.wire-row span{height:48px;border-radius:6px;background:#f1edf7}
.wire-btn{display:inline-block;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,#ff5a5f,#7a4dff);color:#fff;font:600 12px Poppins}
@media(max-width:520px){.mb{height:360px}.wire{width:200px;right:-6px;top:150px}.mb-arrow{display:none}}
/* 2 speed */
.speed{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.spd-phone{width:170px;border-radius:30px;border:6px solid #1d1530;padding:16px 12px;background:#fff;box-shadow:0 24px 40px -22px rgba(20,10,40,.6)}
.spd-top{height:34px;border-radius:10px;background:linear-gradient(135deg,#ffb08a,#c9b8ff);margin-bottom:12px}
.spd-load{height:8px;border-radius:8px;background:rgba(122,77,255,.15);overflow:hidden}
.spd-load i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5a5f,#7a4dff);border-radius:8px}
.ft-p.on .spd-load i{animation:load 1.1s .3s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes load{to{width:100%}}
.spd-state{font:600 13px Poppins;height:20px;margin:8px 0 12px;position:relative}
.spd-state span{position:absolute;left:0;transition:opacity .3s}
.spd-state .s2{opacity:0;color:#2a9d6a}
.ft-p.on .spd-state .s1{animation:hideit .2s 1.4s forwards}.ft-p.on .spd-state .s2{animation:fadein .3s 1.4s forwards}
@keyframes hideit{to{opacity:0}}
.spd-blocks{display:grid;gap:7px}.spd-blocks span{height:44px;border-radius:8px;background:#f1edf7;opacity:0}
.ft-p.on .spd-blocks span{animation:fadein .4s 1.45s forwards}.ft-p.on .spd-blocks span:nth-child(2){animation-delay:1.6s}.ft-p.on .spd-blocks span:nth-child(3){animation-delay:1.75s}
.spd-list{list-style:none;display:grid;gap:12px}
.spd-list li{padding:12px 20px;border-radius:999px;background:#f6f1ff;font:600 15px Poppins;opacity:0;transform:translateX(16px)}
.ft-p.on .spd-list li{animation:wirein .5s ease forwards}
.ft-p.on .spd-list li:nth-child(1){animation-delay:.4s}.ft-p.on .spd-list li:nth-child(2){animation-delay:.7s}.ft-p.on .spd-list li:nth-child(3){animation-delay:1s}.ft-p.on .spd-list li:nth-child(4){animation-delay:1.3s}
/* 3 bill */
.bill{position:relative;display:grid;place-items:center;gap:14px}
.receipt{width:min(340px,100%);background:#fffdf8;border:2px dashed rgba(29,21,48,.25);border-radius:6px;padding:20px 22px;box-shadow:0 20px 36px -22px rgba(90,40,90,.5);transform:rotate(-1.5deg)}
.r-h{font:700 13px Poppins;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px dashed rgba(29,21,48,.2);padding-bottom:10px;margin-bottom:10px}
.receipt ul{list-style:none;display:grid;gap:9px}
.receipt li{display:flex;justify-content:space-between;font:500 15px Poppins;opacity:0;transform:translateX(-12px)}
.receipt li b{color:#7a4dff}
.ft-p.on .receipt li{animation:wirein .45s ease forwards}
.ft-p.on .receipt li:nth-child(1){animation-delay:.3s}.ft-p.on .receipt li:nth-child(2){animation-delay:.6s}.ft-p.on .receipt li:nth-child(3){animation-delay:.9s}.ft-p.on .receipt li:nth-child(4){animation-delay:1.2s}.ft-p.on .receipt li:nth-child(5){animation-delay:1.5s}
.r-t{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed rgba(29,21,48,.2);margin-top:12px;padding-top:12px;font:800 18px Poppins;opacity:0}
.r-t b{color:#ff5a5f}
.ft-p.on .r-t{animation:fadein .4s 1.9s forwards}
.stamp{position:absolute;right:6%;bottom:62px;padding:8px 16px;border:3px solid #ff5a5f;border-radius:10px;color:#ff5a5f;font:800 18px Poppins;letter-spacing:.08em;transform:rotate(-12deg) scale(2.2);opacity:0}
.ft-p.on .stamp{animation:stamp .45s 2.3s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{to{transform:rotate(-12deg) scale(1);opacity:.92}}
.bill-note{font:500 14px Poppins;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ft-p *{animation:none!important;opacity:1!important;transform:none!important}.stamp{transform:rotate(-12deg)!important}.ft-prog{display:none}}
/* ---- tidy web hero chips + buttons ---- */
.wh-l .why3{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 12px;max-width:470px;margin:20px 0 0!important}
.wh-l .why3 span{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:14px;white-space:nowrap;border-radius:999px}
.wh-l .ctas{display:flex;flex-wrap:wrap;gap:12px!important;margin-top:24px!important}
.wh-l .ctas .btn{padding:15px 28px;font-size:15px;min-width:190px;justify-content:center;text-align:center}
.wh-l .crumbs{margin-bottom:16px}
.wh-l .sub{margin-top:0}
@media(max-width:520px){.wh-l .why3{grid-template-columns:1fr}.wh-l .ctas .btn{flex:1 1 100%}}
/* ---- even top spacing on every page ---- */
main>header.page-hero,main>header.hero2,main>header.page-hero.wh{padding-top:116px;padding-bottom:40px}
main>header+section{padding-top:56px!important}
@media(max-width:900px){main>header.page-hero,main>header.hero2,main>header.page-hero.wh{padding-top:100px;padding-bottom:30px}}
.wh-in{align-items:start}.wh-r{margin-top:0}
/* ---- receipt: clearer spacing, stamp no longer over the price ---- */
.receipt{width:min(380px,100%);padding:20px 24px}
.receipt li{gap:18px;align-items:baseline}
.receipt li span{flex:1;min-width:0}
.receipt li b{flex:none;white-space:nowrap}
.receipt li:nth-child(5) b{font:600 12px Poppins;color:#6d3bff;background:#f1e9ff;padding:3px 10px;border-radius:999px}
.r-t{gap:18px}
.stamp{position:static;display:inline-block;margin-top:2px;transform:rotate(-6deg) scale(2);opacity:0}
.ft-p.on .stamp{animation:stamp2 .45s 2.3s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp2{to{transform:rotate(-6deg) scale(1);opacity:.92}}
.bill{gap:16px}
.bill-note{margin-top:-2px}
@media (prefers-reduced-motion:reduce){.stamp{transform:rotate(-6deg)!important}}
.ft-stage{min-height:450px}
.ft-p{padding:22px 18px}
@media(max-width:860px){.ft-stage{min-height:470px}}

/* ---- web hero: 7-day feature, one button ---- */
.seven{display:flex;gap:18px;align-items:center;max-width:500px;margin:22px 0 0;padding:18px 22px;border-radius:30px 30px 30px 8px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 22px 44px -30px rgba(122,77,255,.6)}
.seven-n{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 12px 22px -14px rgba(90,40,90,.55);line-height:1}
.seven-n b{font:800 44px Poppins;background:linear-gradient(135deg,#ff5a5f,#7a4dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.seven-n small{font:600 11px Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:-6px}
.seven-t b{display:block;font:700 17px/1.3 Poppins}
.seven-t span{display:block;font-size:14px;color:var(--muted);margin:3px 0 10px}
.days{display:flex;align-items:center;gap:6px}
.days i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 10px Poppins;font-style:normal;background:rgba(122,77,255,.15);color:#6d3bff}
.seven.in .days i{animation:dayfill .4s forwards}
.seven.in .days i:nth-child(1){animation-delay:.5s}.seven.in .days i:nth-child(2){animation-delay:.8s}.seven.in .days i:nth-child(3){animation-delay:1.1s}.seven.in .days i:nth-child(4){animation-delay:1.4s}.seven.in .days i:nth-child(5){animation-delay:1.7s}.seven.in .days i:nth-child(6){animation-delay:2s}
@keyframes dayfill{to{background:linear-gradient(135deg,#ff5a5f,#7a4dff);color:#fff;transform:scale(1.08)}}
.days em{font:700 12px Poppins;font-style:normal;margin-left:6px;padding:4px 10px;border-radius:999px;background:#fff;color:#2a9d6a;opacity:0;transform:scale(.6)}
.seven.in .days em{animation:draftpop .45s 2.4s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes draftpop{to{opacity:1;transform:none}}
.wh-l .ctas{display:flex;align-items:center;gap:26px!important;margin-top:24px!important}
.wh-l .ctas .btn{min-width:0}
.wh-l .ctas .more{font:600 15px Poppins}
.hero-meta{margin-top:16px;font:500 14px Poppins;color:var(--muted)}
@media(max-width:520px){.seven{padding:16px}.seven-n{width:68px;height:68px}.seven-n b{font-size:36px}.days{flex-wrap:wrap}.wh-l .ctas{flex-wrap:wrap;gap:16px!important}}
@media (prefers-reduced-motion:reduce){.days i{background:linear-gradient(135deg,#ff5a5f,#7a4dff);color:#fff}.days em{opacity:1;transform:none}}
.wh-l .ctas,.wh-l .hero-meta{justify-content:flex-start!important;text-align:left}

/* ---- speed panel: a real-looking mini site ---- */
.spd-col{display:grid;justify-items:center;gap:14px}
.spd-phone{position:relative;width:200px;border-radius:32px;border:6px solid #1d1530;background:#fff;padding:0;overflow:hidden;box-shadow:0 26px 44px -22px rgba(20,10,40,.6)}
.spd-load{height:5px;background:rgba(122,77,255,.15)}
.spd-load i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5a5f,#7a4dff)}
.ft-p.on .spd-load i{animation:load 1s .3s cubic-bezier(.3,.8,.3,1) forwards}
.spd-ready{position:absolute;right:8px;top:12px;font:700 10px Poppins;color:#2a9d6a;background:#e4f7ec;padding:3px 8px;border-radius:999px;opacity:0;z-index:3}
.ft-p.on .spd-ready{animation:fadein .3s 1.3s forwards}
.spd-site{padding:10px 10px 12px;display:grid;gap:10px;min-height:310px}
.spd-site>*{opacity:0;transform:translateY(8px)}
.ft-p.on .spd-site>*{animation:wirein .45s ease forwards}
.ft-p.on .ss-bar{animation-delay:1.3s}.ft-p.on .ss-hero{animation-delay:1.55s}.ft-p.on .ss-cards{animation-delay:1.8s}.ft-p.on .ss-foot{animation-delay:2.05s}
.ss-bar{display:flex;align-items:center;gap:8px;padding-top:4px}
.ss-logo{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#ff5a5f,#7a4dff)}
.ss-bar b{font:700 12px Poppins;flex:1}
.ss-menu{display:grid;gap:3px}.ss-menu i{display:block;width:14px;height:2px;border-radius:2px;background:#1d1530}
.ss-hero{border-radius:14px;padding:18px 12px;background:linear-gradient(135deg,#ffb08a,#c9b8ff);text-align:left}
.ss-h{font:800 17px/1.15 Poppins;color:#1d1530;margin-bottom:10px;min-height:40px}
.ss-h.flash{animation:flashh .9s}
@keyframes flashh{0%{background:rgba(255,255,255,.9)}100%{background:transparent}}
.ss-btn{display:inline-block;padding:6px 14px;border-radius:999px;background:#1d1530;color:#fff;font:600 11px Poppins}
.ss-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ss-cards>div{border-radius:12px;background:#f6f1ff;padding:10px;display:grid;gap:5px}
.ss-cards em{font-style:normal;font-size:20px}
.ss-cards i{display:block;height:6px;border-radius:4px;background:rgba(29,21,48,.14)}.ss-cards i+i{width:60%}
.ss-foot{display:flex;justify-content:space-around;font:600 11px Poppins;padding:8px;border-radius:10px;background:#fff3ea}
.ss-pub{position:absolute;left:50%;bottom:14px;transform:translate(-50%,16px);font:700 11px Poppins;color:#fff;background:#2a9d6a;padding:6px 14px;border-radius:999px;opacity:0;pointer-events:none;box-shadow:0 8px 16px -8px rgba(42,157,106,.7)}
.ss-pub.show{animation:pubshow 1.6s forwards}
@keyframes pubshow{0%{opacity:0;transform:translate(-50%,16px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.spd-try{padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 14px Poppins;cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.spd-try:hover{transform:translateY(-2px);border-color:#7a4dff}
@media(max-width:520px){.spd-phone{width:180px}}
.ss-menu{display:none}
.spd-ready{top:11px;right:10px}

/* ---- calmer hero collage: one laptop, one phone ---- */
.wc1{width:90%!important;left:0!important;top:34px!important;transform:rotate(-2deg)!important}
.wc4{width:25%!important;right:2%!important;bottom:-14px!important;transform:rotate(3deg)!important}
.wh-r{height:420px}
@media(max-width:900px){.wh-r{height:340px}}
@media(max-width:520px){.wh-r{height:260px}.wc4{width:30%!important}}
.faq{max-width:820px}

/* ---- home: focused IT grid ---- */
.it-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1040px;margin:0 auto}
@media(max-width:900px){.it-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.it-grid{grid-template-columns:1fr}}
.itc{position:relative;display:block;padding:26px 24px 24px;border-radius:34px 34px 34px 8px;background:#fff;box-shadow:0 20px 40px -30px rgba(90,40,90,.55);transition:transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.itc:nth-child(even){border-radius:34px 34px 8px 34px;background:linear-gradient(135deg,#fff3ea,#f4eeff)}
.itc:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 28px 46px -28px rgba(122,77,255,.55)}
.itc-e{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;font-size:26px;margin-bottom:14px;box-shadow:0 10px 18px -12px rgba(90,40,90,.5)}
.itc h3{font:700 18px/1.25 Poppins;margin-bottom:6px}
.itc p{color:var(--muted);font-size:15px;line-height:1.55;padding-right:26px}
.itc-a{position:absolute;right:20px;bottom:18px;font:700 18px Poppins;color:#7a4dff;transition:transform .3s}
.itc:hover .itc-a{transform:translateX(5px)}
.touch-av{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;box-shadow:0 0 0 4px #fff,0 14px 24px -12px rgba(90,40,90,.5)}

/* ---- services hub ---- */
.it-grid.four{grid-template-columns:repeat(4,1fr);max-width:1180px}
@media(max-width:1100px){.it-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.it-grid.four{grid-template-columns:1fr}}
.itc small{display:block;font:600 11px Poppins;letter-spacing:.14em;text-transform:uppercase;color:#6d3bff;margin:-2px 0 10px 66px;position:absolute;top:36px}
.itc h3{margin-top:2px}
.feat-web{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;padding:36px 40px;border-radius:50px 50px 50px 12px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 30px 60px -38px rgba(122,77,255,.6);max-width:1080px;margin:0 auto;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.feat-web:hover{transform:translateY(-6px)}
@media(max-width:860px){.feat-web{grid-template-columns:1fr;padding:28px 24px}}
.fw-k{font:600 13px Poppins;letter-spacing:.12em;text-transform:uppercase;color:#6d3bff}
.feat-web h2{font:800 clamp(28px,3.4vw,40px)/1.1 Poppins;margin:8px 0 12px;letter-spacing:-.025em}
.feat-web p{color:#5b4a62;font-size:17px;line-height:1.6;max-width:480px}
.fw-r{position:relative;height:260px}
.fw-bf{position:absolute;left:0;top:10px;width:86%;transform:rotate(-2deg);filter:drop-shadow(0 24px 30px rgba(40,20,70,.35))}
.fw-bf .bf img{width:100%;height:auto;display:block}
.fw-ph{position:absolute;right:2%;bottom:-12px;width:26%;transform:rotate(3deg);filter:drop-shadow(0 24px 30px rgba(40,20,70,.4))}
.fw-ph .ph{position:static;width:100%;border-radius:20px;border:4px solid #1d1530;overflow:hidden}
.fw-ph .ph img{width:100%;height:auto;display:block;max-height:none}

/* ---- web hero v3: everything centred ---- */
.wh2 .wrap{text-align:center;max-width:1080px}
.wh2 .crumbs{text-align:center}
.wh2 h1{font-size:clamp(36px,4.8vw,58px);margin:0 auto 12px;max-width:860px}
.wh2 .sub{margin:0 auto;max-width:560px}
.wh2-row{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center;max-width:980px;margin:30px auto 0}
@media(max-width:860px){.wh2-row{grid-template-columns:1fr}}
.seven2{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 24px 24px;border-radius:40px 40px 40px 10px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 22px 44px -30px rgba(122,77,255,.6)}
.seven2 .seven-n{margin-bottom:12px}
.s2-t{font:700 20px/1.25 Poppins}
.s2-s{font-size:15px;color:var(--muted);margin:6px 0 14px;max-width:320px;line-height:1.5}
.seven2 .days{justify-content:center;flex-wrap:wrap}
.seven2.in .days i{animation:dayfill .4s forwards}
.seven2.in .days i:nth-child(1){animation-delay:.5s}.seven2.in .days i:nth-child(2){animation-delay:.8s}.seven2.in .days i:nth-child(3){animation-delay:1.1s}.seven2.in .days i:nth-child(4){animation-delay:1.4s}.seven2.in .days i:nth-child(5){animation-delay:1.7s}.seven2.in .days i:nth-child(6){animation-delay:2s}
.seven2.in .days em{animation:draftpop .45s 2.4s cubic-bezier(.3,1.7,.5,1) forwards}
.wh2 .wh-r{height:330px;margin:0}
.wh2 .ctas{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:30px}
.pricestrip{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.pcell{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 22px;border-radius:22px;background:#fff;box-shadow:0 14px 28px -22px rgba(90,40,90,.55);min-width:170px}
.pcell b{font:700 17px Poppins}
.pcell span{font-size:12.5px;color:var(--muted);margin-top:2px;max-width:170px}
@media(max-width:860px){.wh2 .wh-r{max-width:520px;margin:0 auto;width:100%}}
@media(max-width:520px){.wh2 .wh-r{height:250px}.pcell{flex:1 1 100%}}

/* ---- services hub: no overlaps ---- */
.itc{display:flex;flex-direction:column;min-height:210px;padding-bottom:52px}
.itc small{position:static!important;margin:0!important;line-height:1.35;flex:1;min-width:0}
.itc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.itc-top .itc-e{margin:0;flex:none}
.itc p{padding-right:0;flex:1}
.itc-a{right:22px;bottom:18px}
.wh2-row{margin-bottom:54px}
/* ---- web hero v4: compact 7-day card, safe spacing, even price cells ---- */
.wh2 .seven-n{width:70px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin-bottom:8px;line-height:1;padding-top:2px}
.wh2 .seven-n b{font:800 34px/1 Poppins;display:block}
.wh2 .seven-n small{font:600 10px/1 Poppins;letter-spacing:.14em;margin:3px 0 0;display:block}
.seven2{padding:18px 20px 16px;border-radius:32px 32px 32px 8px}
.s2-t{font:700 18px/1.25 Poppins}
.s2-s{font-size:14px;margin:4px 0 10px;max-width:300px}
.seven2 .days i{width:20px;height:20px}
.wh2-row{margin:22px auto 0;gap:28px;margin-bottom:64px!important}
.wh2 .wh-r{height:250px}
.wc1{width:88%!important;top:6px!important}
.wc4{width:22%!important;bottom:-22px!important}
.wh2 .ctas{margin-top:0!important}
.pricestrip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:660px;margin:24px auto 0}
.pcell{justify-content:center;align-items:center;text-align:center;min-width:0;min-height:76px;padding:12px 14px}
.pcell span{max-width:none}
@media(max-width:860px){.wh2-row{margin-bottom:56px!important}.wh2 .wh-r{height:230px}}
@media(max-width:600px){.pricestrip{grid-template-columns:1fr;max-width:340px}.wh2 .wh-r{height:210px}.wh2-row{margin-bottom:46px!important}}
/* web hero v5: collage fits inside its box so nothing touches the button */
.wh2 .wh-r{height:312px}
.wh2 .wc1{width:80%!important;top:4px!important;left:2%!important}
.wh2 .wc4{width:21%!important;right:3%!important;bottom:0!important}
.wh2-row{margin-bottom:34px!important}
@media(max-width:860px){.wh2 .wh-r{height:300px}.wh2-row{margin-bottom:30px!important}}
@media(max-width:600px){.wh2 .wh-r{height:230px}.wh2 .wc4{width:26%!important}.wh2-row{margin-bottom:26px!important}}
.wh2 h1{font-size:clamp(32px,4vw,52px)!important;max-width:none!important;white-space:normal}
@media(min-width:760px){.wh2 h1{white-space:nowrap}}

/* FAQ cards */
.faq{display:grid;gap:14px;max-width:860px;counter-reset:fq}
.faq .it{counter-increment:fq;border:0;background:#fff;border-radius:24px;box-shadow:0 14px 34px -24px rgba(90,40,90,.45);transition:transform .25s,box-shadow .25s,background .3s;position:relative;overflow:hidden}
.faq .it:hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(122,77,255,.5)}
.faq .it::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--a1),var(--a2));opacity:.35;transition:opacity .3s}
.faq .it.open{background:linear-gradient(135deg,#fff,#fff1ee 60%,#f1e9ff)}
.faq .it.open::before{opacity:1}
.faq button{padding:22px 64px 22px 74px;font-weight:600}
.faq button::before{content:counter(fq);position:absolute;left:22px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50% 50% 50% 12px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font:600 15px/36px Poppins;text-align:center}
.faq button::after{right:20px;width:32px;height:32px;border-radius:50%;background:#f3ecff;line-height:32px;text-align:center;font-size:22px}
.faq .it.open button::after{background:var(--a2);color:#fff}
.faq .ans p{padding:0 28px 24px 74px}
.fq-h{display:flex;align-items:center;gap:12px}
.fq-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:16px;background:#ffeadb}
.fq-ic svg,.fq-ic img{width:24px;height:24px}
@media(max-width:600px){.faq button{padding:18px 56px 18px 62px;font-size:16px}.faq button::before{left:14px;width:32px;height:32px;line-height:32px}.faq .ans p{padding:0 20px 20px 62px}.faq button::after{right:12px}}
.fq-h{display:block}.fq-h .fq-ic{margin-right:12px;vertical-align:middle}.fq-t{vertical-align:middle}.faq .it{margin:0}

/* web hero v6: big device stage, 7-day pill beneath */
.wh2 .ctas{margin:26px 0 0!important}
.stage3{position:relative;max-width:980px;margin:34px auto 0}
.s3-l{width:76%;margin:0 auto;filter:drop-shadow(0 34px 44px rgba(40,20,70,.32))}
.s3-l .bf{border-radius:16px}
.s3-p{position:absolute;filter:drop-shadow(0 26px 32px rgba(40,20,70,.38))}
.s3-p .ph{position:static;width:100%;border-radius:26px;border:5px solid #1d1530}
.s3-p .ph img{display:block;width:100%;height:auto;max-height:none}
.s3-p1{width:15%;left:2%;bottom:-6%;transform:rotate(-4deg);animation:wcf 6.5s ease-in-out infinite}
.s3-p2{width:17%;right:1%;bottom:-8%;transform:rotate(4deg);animation:wcf 7s ease-in-out infinite -3s}
.seven2.pill{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;text-align:left;gap:8px 18px;max-width:880px;margin:56px auto 0;padding:14px 26px;border-radius:999px}
.seven2.pill .seven-n{width:54px;height:54px;margin:0;flex:none}
.seven2.pill .seven-n b{font-size:26px}
.seven2.pill .seven-n small{font-size:8px}
.s2-x{display:flex;flex-direction:column;min-width:0}
.seven2.pill .s2-s{max-width:none;margin:2px 0 0;font-size:13px}
.seven2.pill .days{margin:0}
.wh2 .pricestrip{margin-top:22px}
@media(max-width:760px){.s3-l{width:86%}.s3-p1{width:21%;left:0;bottom:-4%}.s3-p2{width:23%;right:0;bottom:-6%}.seven2.pill{border-radius:32px;flex-direction:column;text-align:center;margin-top:44px;padding:18px 18px}.s2-x{align-items:center}}

/* even section spacing */
section{padding:72px 0}
.plain{padding:56px 0}
.plain.tint{padding:80px 0}
.plain[style*="padding-top"]{padding-bottom:56px}
@media(max-width:900px){section{padding:56px 0}.plain{padding:44px 0}.plain.tint{padding:64px 0}}
.wh2 .ctas{flex-wrap:wrap;gap:14px 24px}.wh2 .ctas .btn,.wh2 .ctas .more{white-space:nowrap}
.seven2.pill{margin-top:84px;position:relative;z-index:3}
@media(max-width:860px){.seven2.pill{margin-top:72px}}
@media(max-width:760px){.seven2.pill{margin-top:64px}}

/* logos in hub cards and service hero; calmer spacing under heroes */
.itc-e img,.svc-hero-em img{width:30px;height:30px;display:inline-block;vertical-align:middle}
.itc-e img+img,.svc-hero-em img+img{margin-left:6px}
.svc-hero-em img{width:44px;height:44px}
.lgs{margin-top:32px}
.page-hero+section.plain:not([style]){padding-top:64px}

.itc-top .itc-e{display:inline-flex;align-items:center;gap:2px;width:auto;min-width:52px;padding:0 12px;white-space:nowrap}.itc-e img{width:26px;height:26px;margin:0!important}
.why3+.stats4{margin-top:48px}

/* contact form v2 */
.cform{position:relative;background:#fff;border-radius:34px 34px 34px 10px;padding:34px 30px 30px;box-shadow:0 30px 60px -36px rgba(122,77,255,.5);display:flex;flex-direction:column;gap:14px}
.cf-prog{height:8px;border-radius:99px;background:#f1eaff;overflow:hidden;margin-bottom:6px}
.cf-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.cf-step{font:600 17px Poppins;margin:12px 0 0;display:flex;align-items:center;gap:10px}
.cf-step b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 8px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font:600 14px Poppins}
.cf-step span{font:400 13px Inter;color:var(--muted)}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-chips{display:flex;flex-wrap:wrap;gap:10px}
.cq input{position:absolute;opacity:0;pointer-events:none}
.cq span{display:inline-block;padding:11px 18px;border-radius:999px;background:#f8f3ff;border:2px solid transparent;font:500 15px Poppins;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.cq span:hover{transform:translateY(-2px);background:#efe6ff}
.cq input:checked+span{background:linear-gradient(135deg,#ffe3d3,#efe4ff);border-color:var(--a2);transform:scale(1.03)}
.cq input:focus-visible+span{outline:3px solid var(--a2);outline-offset:2px}
.cf-ideas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.cf-idea{border:1.5px dashed #c9b8ff;background:none;border-radius:999px;padding:6px 13px;font:500 13px Poppins;color:var(--a2);cursor:pointer}
.cf-idea:hover{background:#f4eeff}
.cf-note{font-size:13px;color:var(--muted);margin:0}
.cf-ok{margin-top:6px;padding:20px;border-radius:24px;background:linear-gradient(135deg,#e6f8ee,#eef6ff);text-align:center;animation:draftpop .5s cubic-bezier(.3,1.7,.5,1)}
.cf-ok p{margin:6px 0 0;font-size:14px}.cf-ok a,.cf-ok button{color:var(--a2);font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.cf-tick{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 8px;border-radius:50%;background:#2a9d6a;color:#fff;font-size:22px}
.cform.sent .btn{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:600px){.cf-two{grid-template-columns:1fr}.cform{padding:26px 20px}}

/* free first year band */
.freeband{position:relative;max-width:860px;margin:0 auto 34px;padding:30px 30px 26px;border-radius:44px 44px 44px 12px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;text-align:center;box-shadow:0 30px 60px -34px rgba(122,77,255,.75);overflow:hidden}
.freeband::before{content:"";position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.14)}
.fb-top{position:relative;display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.fb-top b{font:800 clamp(26px,4vw,38px)/1.1 Poppins}
.fb-top span{font-size:15px;opacity:.92}.fb-top s{text-decoration-thickness:2px}
.fb-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fb-grid div{background:rgba(255,255,255,.96);color:var(--text);border-radius:24px;padding:16px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.fb-grid i{font-style:normal;font-size:28px;line-height:1}.fb-grid i svg,.fb-grid i img{width:32px;height:32px}
.fb-grid b{font:600 15px Poppins}
.fb-grid div::after{content:"£0";position:absolute;top:-8px;right:-4px;padding:3px 9px;border-radius:99px;background:#2a9d6a;color:#fff;font:700 12px Poppins;transform:rotate(6deg)}
.fb-sticker{position:absolute;right:20px;top:18px;padding:6px 14px;border-radius:99px;background:#fff;color:var(--a1);font:800 14px Poppins;letter-spacing:.12em;transform:rotate(8deg);animation:wcf 4s ease-in-out infinite}
@media(max-width:700px){.fb-grid{grid-template-columns:repeat(2,1fr)}.fb-sticker{position:static;display:inline-block;margin:0 auto 10px}.freeband{padding:22px 18px}}
.fb-save{display:inline-block;align-self:center;margin-top:4px;padding:4px 14px;border-radius:99px;background:#fff;color:#2a9d6a;font:800 14px Poppins;font-style:normal}
.st mark.sm{background:linear-gradient(transparent 58%,rgba(255,176,103,.55) 58%);color:#1d1530;font-weight:700;padding:0 2px;border-radius:3px}

/* compact tiles */
.itc{min-height:0!important;padding:18px 22px 20px!important}
.itc-e{width:44px;height:44px;font-size:22px;margin-bottom:10px}
.itc-top .itc-e{min-height:44px}.itc-e img{width:22px!important;height:22px!important}
.itc-top{margin-bottom:10px}
.itc p{flex:none;padding-right:30px;font-size:14.5px;line-height:1.5}
.itc h3{font-size:17px;margin-bottom:4px}
.itc-a{bottom:14px;right:18px}
.it-grid{gap:14px}

/* faq page: tighter under the heading, centred column */
.faq-page{max-width:860px;margin:0 auto}
.faq-page>.fq-h:first-child{margin-top:0}
.fq-h{margin-top:44px}
main>header+section:has(.faq-page){padding-top:20px!important}
main>header.page-hero:has(+section .faq-page){padding-bottom:10px}
main>header.page-hero{padding-bottom:20px!important}
main>header+section{padding-top:44px!important}
main>header+section:has(.faq-page){padding-top:20px!important}
main>header.page-hero:has(+section .faq-page){padding-bottom:10px!important}

/* centring fixes */
.touch .sub,.cta .sub{margin-left:auto;margin-right:auto;text-align:center}
.touch>*,.cta>*{margin-left:auto;margin-right:auto}
.itc-top .itc-e{justify-content:center}
@media(max-width:860px){
  .fw-r{height:auto;aspect-ratio:1000/640;max-width:520px;width:100%;margin:0 auto 14px}
  .fw-ph{bottom:-10px}
}
.touch .sub{margin-bottom:26px}

/* services: web design tile facts in one row */
.fw-facts{display:flex;margin:18px 0 22px;background:rgba(255,255,255,.7);border-radius:22px;padding:12px 6px;max-width:460px}
.fw-facts div{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;line-height:1.25}
.fw-facts div+div{border-left:1.5px solid rgba(122,77,255,.18)}
.fw-facts b{font:800 20px Poppins;color:#1d1530}
.fw-facts span{font-size:12.5px;color:var(--muted);margin-top:2px}
@media(max-width:420px){.fw-facts b{font-size:17px}.fw-facts span{font-size:11.5px}}

/* stacked heading-over-list sections: no big empty left column */
.wrap.two:has(>.faq),.wrap.two:has(>.steps-list){display:block;max-width:860px;margin-left:auto;margin-right:auto}
.wrap.two:has(>.faq)>div:first-child,.wrap.two:has(>.steps-list)>div:first-child{position:static!important;text-align:center;margin-bottom:26px}
.wrap.two:has(>.faq) .sub,.wrap.two:has(>.steps-list) .sub{margin-left:auto;margin-right:auto}
.wrap.two:has(>.faq) .faq{margin-top:0}
.plain{padding:48px 0}
.plain.tint{padding:72px 0}

/* services: bigger web design screenshot */
@media(min-width:861px){
  .feat-web{grid-template-columns:.85fr 1.15fr;gap:20px;padding:34px 36px 34px 44px}
  .feat-web p{max-width:420px}
  .fw-r{height:360px}
  .fw-bf{width:94%;top:6px;left:0}
  .fw-ph{width:25%;right:0;bottom:-6px}
}
@media(min-width:861px){.feat-web{gap:34px}.fw-r{height:340px}.fw-bf{width:92%;top:14px}.fw-ph{bottom:4px;right:2%}.fw-facts{max-width:400px}}

/* what's included: centred intro, bubbles in a neat grid beneath */
.wrap.two:has(.sv-list){display:block;max-width:960px;margin-left:auto;margin-right:auto}
.wrap.two:has(.sv-list)>div:first-child{position:static!important;text-align:center;margin-bottom:30px}
.wrap.two:has(.sv-list)>div:first-child p{margin-left:auto;margin-right:auto;max-width:620px}
.wrap.two:has(.sv-list)>div:first-child .says,.wrap.two:has(.sv-list)>div:first-child .ask{justify-content:center}
.wrap.two:has(.sv-list) .sv-list{grid-template-columns:repeat(2,1fr);gap:12px}
.wrap.two:has(.sv-list) .lgs{text-align:center;margin-top:30px}
.wrap.two:has(.sv-list) .lg-row{justify-content:center}
@media(max-width:700px){.wrap.two:has(.sv-list) .sv-list{grid-template-columns:1fr}.wrap.two:has(.sv-list)>div:first-child{text-align:left}.wrap.two:has(.sv-list)>div:first-child p{margin-left:0}}
.wrap.two:has(.sv-list)>div:first-child h2{text-align:center;margin-left:auto;margin-right:auto;max-width:none}
.wrap.two:has(.sv-list) .sv-list li{display:flex;align-items:center;gap:8px;border-radius:30px}
@media(max-width:700px){.wrap.two:has(.sv-list)>div:first-child h2{text-align:left;margin-left:0}}

/* services web design tile: centred stack (text, facts, button, then a big device stage) */
.feat-web.feat-web{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;padding:40px 36px 44px;max-width:980px;margin:0 auto}
.feat-web.feat-web p{margin-left:auto;margin-right:auto;max-width:560px}
.feat-web .fw-l{display:flex;flex-direction:column;align-items:center}
.feat-web .fw-facts{margin:18px auto 22px;width:100%;max-width:460px}
.feat-web.feat-web .fw-r{width:100%;max-width:820px;height:auto;aspect-ratio:1000/560;margin:6px auto 0}
.feat-web.feat-web .fw-bf{width:80%;left:2%;top:0}
.feat-web.feat-web .fw-ph{width:21%;right:2%;bottom:-4%}
@media(max-width:600px){.feat-web.feat-web{padding:28px 20px 34px}.feat-web.feat-web .fw-r{aspect-ratio:1000/640}.feat-web.feat-web .fw-bf{width:84%}.feat-web.feat-web .fw-ph{width:26%}}

/* 7-day bar: bigger and animated */
.seven2.pill{max-width:980px;padding:20px 34px;gap:10px 28px}
.seven2.pill .seven-n{position:relative;width:96px;height:96px;background:#fff;box-shadow:0 14px 28px -14px rgba(90,40,90,.6)}
.seven2.pill .seven-n b{font-size:50px;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.seven2.pill .seven-n small{font-size:11px;color:#6d3bff}
.seven2.pill .seven-n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid transparent;border-top-color:var(--a1);border-right-color:var(--a2);opacity:0}
.seven2.pill.in .seven-n::after{animation:sevspin 2.6s .3s ease-out forwards}
@keyframes sevspin{0%{opacity:1;transform:rotate(0)}85%{opacity:1}100%{opacity:0;transform:rotate(720deg)}}
.seven2.pill.in .seven-n b{animation:sevpop .7s .2s cubic-bezier(.3,1.8,.5,1) both}
@keyframes sevpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.seven2.pill .s2-t{font:700 clamp(18px,2.2vw,24px)/1.2 Poppins}
.s2-big{display:inline-block;font:800 clamp(34px,4.6vw,54px)/1 Poppins;font-style:normal;letter-spacing:-.02em;vertical-align:-4px;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.seven2.pill.in .s2-big{animation:sevpop .7s .5s cubic-bezier(.3,1.8,.5,1) both}
.seven2.pill .s2-s{font-size:14.5px}
.seven2.pill .days{gap:8px}
.seven2.pill .days i{width:28px;height:28px;font-size:12px}
.seven2.pill .days em{font-size:14px;padding:6px 14px}
@media(max-width:760px){.seven2.pill .seven-n{width:80px;height:80px}.seven2.pill .seven-n b{font-size:40px}.s2-big{font-size:38px}}
@media (prefers-reduced-motion:reduce){.seven2.pill .seven-n::after{display:none}}
@media(min-width:761px){
  .seven2.pill{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:34px;row-gap:10px;padding:26px 44px;border-radius:52px;text-align:left}
  .seven2.pill .seven-n{grid-row:1/3;grid-column:1}
  .seven2.pill .s2-x{grid-column:2;grid-row:1}
  .seven2.pill .days{grid-column:2;grid-row:2;justify-self:start}
}
.s2-big{font-size:clamp(26px,3.2vw,36px);vertical-align:-2px}
@media(max-width:760px){.s2-big{font-size:30px}}
.ss-pub{font-size:10px;padding:5px 11px;white-space:nowrap;letter-spacing:.01em;display:inline-flex;align-items:center;gap:4px;width:max-content}
.seven2.pill .seven-n small{letter-spacing:.08em;text-transform:uppercase;font-size:9.5px}
.ft-p .pn,.spd-list .pn,.snote .pn{display:inline-block;margin-right:10px;vertical-align:middle}
.spd-list li{display:flex;align-items:center;gap:10px}
.snote{display:flex;align-items:center;gap:8px}
.em2{display:inline-block;margin-right:12px}
.spd-list li{gap:0}.snote{gap:0}

/* day pills */
.seven2.pill .days i{width:auto;height:auto;padding:5px 11px;border-radius:99px;font:600 12px Poppins;white-space:nowrap}
.seven2.pill .days{flex-wrap:wrap;gap:6px}

/* phone frames: a little top room so the site's navigation bar is never clipped by the rounded corners */
.s3-p .ph,.phones3 .ph{padding-top:14px;box-sizing:border-box}
.s3-p .ph:has(img[src*="tilly-"]),.phones3 .ph:has(img[src*="tilly-"]){background:#fffcf4}
.s3-p .ph:has(img[src*="heating"]),.phones3 .ph:has(img[src*="heating"]){background:#fff}
.s3-p .ph img,.phones3 .ph img{border-radius:0}

/* demo phone: badges no longer cover content */
.ss-pub{left:auto;right:14px;top:76px;bottom:auto;transform:translateY(8px)}
.ss-pub.show{animation:pubshow2 1.6s forwards}
@keyframes pubshow2{0%{opacity:0;transform:translateY(8px)}15%,75%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
.ss-pub{left:50%;right:auto;top:auto;bottom:66px;transform:translate(-50%,16px)}
.ss-pub.show{animation:pubshow 1.6s forwards}

/* idea board on phones: notes stack in two columns, website sits below (no overlap) */
@media(max-width:600px){
  .mb{position:static!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px;align-content:start;padding:18px 14px 20px}
  .mb .snote{position:static!important;transform:none!important;width:auto;justify-content:flex-start;font-size:13px;padding:9px 10px}
  .mb .snote.n1{background:#fff0a8}
  .mb .mb-arrow{grid-column:1/-1;justify-self:center;width:34px;height:auto;transform:rotate(90deg)}
  .mb .wire{position:static!important;grid-column:1/-1;width:100%!important;margin:0!important;transform:none!important}
}
@media(max-width:600px){.spd-list{display:none}.spd-col{margin:0 auto}}
.pricestrip{grid-template-columns:repeat(2,1fr)!important;max-width:460px!important}@media(max-width:600px){.pricestrip{grid-template-columns:1fr!important}}
.fw-facts div:first-child span{order:-1;margin:0 0 2px}

/* days: a rocket and progress track travel across Day 1 to Day 6 and land on Live */
.seven2.pill .days{position:relative;padding-bottom:20px}
.seven2.pill .days::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;border-radius:99px;background:rgba(122,77,255,.14)}
.seven2.pill .days::after{content:"🚀";position:absolute;left:0;bottom:0;font-size:18px;line-height:1;opacity:0;transform:translateX(-4px) rotate(90deg)}
.seven2.pill.in .days::after{animation:rocketgo 2.2s .4s cubic-bezier(.45,.1,.4,1) forwards}
@keyframes rocketgo{0%{left:0;opacity:1}90%{left:calc(100% - 20px);opacity:1}100%{left:calc(100% - 20px);opacity:0}}
.seven2.pill .days i{position:relative;z-index:1}
.seven2.pill.in .days i{animation:dayfill .4s forwards,daybump .45s}
.seven2.pill.in .days i:nth-child(1){animation-delay:.5s,.5s}.seven2.pill.in .days i:nth-child(2){animation-delay:.8s,.8s}.seven2.pill.in .days i:nth-child(3){animation-delay:1.1s,1.1s}.seven2.pill.in .days i:nth-child(4){animation-delay:1.4s,1.4s}.seven2.pill.in .days i:nth-child(5){animation-delay:1.7s,1.7s}.seven2.pill.in .days i:nth-child(6){animation-delay:2s,2s}
@keyframes daybump{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.seven2.pill .days::after{display:none}}
.seven2.pill.in .days::after{animation:rocketgo 2.2s .4s linear forwards}

/* hand-drawn circle highlight (use sparingly) */
.circ{position:relative;display:inline-block;padding:0 .18em;white-space:nowrap}
.circ svg{position:absolute;left:-8%;top:-28%;width:116%;height:156%;pointer-events:none;overflow:visible}
.circ path{fill:none;stroke:var(--a1);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.circ path{pathLength:1}
.circ.go path{animation:circdraw .9s cubic-bezier(.5,.1,.3,1) forwards}
@keyframes circdraw{to{stroke-dashoffset:0}}
.freeband .circ path{stroke:#fff}
@media (prefers-reduced-motion:reduce){.circ path{stroke-dashoffset:0;animation:none}}
.fb-top b .circ{font-size:inherit;opacity:1;padding:0 .3em}.fb-top .circ svg{left:-6%;width:112%}

/* idea board: stack whenever its own box is narrow, whatever the screen size */
.ft-p{container-type:inline-size}
@container (max-width:500px){
  .mb{position:static!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px;align-content:start;padding:18px 14px 20px;max-width:none}
  .mb .snote{position:static!important;transform:none!important;width:auto;justify-content:flex-start;font-size:13px;padding:9px 10px}
  .mb .mb-arrow{display:block;grid-column:1/-1;justify-self:center;width:34px;height:auto;transform:rotate(90deg);position:static!important}
  .mb .wire{position:static!important;grid-column:1/-1;width:100%!important;margin:0!important;transform:none!important}
}
@container (max-width:500px){.spd-list{display:none!important}.speed{justify-content:center}}
.sub mark,p.sub mark{color:var(--text);font-weight:600;background-image:linear-gradient(transparent 45%,rgba(255,176,103,.5) 45%)}
.s3-p .ph,.phones3 .ph{padding-top:0;border-radius:24px}
.s3-p .ph img,.phones3 .ph img{object-fit:cover;object-position:0 0;border-radius:18px 18px 0 0;margin-top:0}
.s3-p .ph,.phones3 .ph{padding-top:7px;border-radius:26px}
.s3-p .ph img,.phones3 .ph img{object-fit:contain;border-radius:0}
.mock .ph{padding-top:7px;box-sizing:border-box;background:#fffcf4;border-radius:26px}
.mock .ph img{object-fit:contain;border-radius:0}
.wkc:has(img[src*="heating"]) .mock .ph{background:#fff}

/* detailed mini website in the idea board */
.wire{width:272px;padding:8px 8px 10px}
.wire-bar{align-items:center;margin-bottom:6px}
.wire-url{margin-left:6px;flex:1;font:500 8.5px Poppins;color:#8a7f99;background:#f4f0fa;border-radius:99px;padding:2px 8px}
.wire-nav{display:flex;align-items:center;gap:7px;font:500 8px Poppins;color:#5b4a70;padding:4px 2px 7px}
.wire-nav b{display:flex;align-items:center;gap:4px;font:700 9px Poppins;color:#1d1530;margin-right:auto}
.wire-nav b i{width:11px;height:11px;border-radius:4px;background:linear-gradient(135deg,#ff5a5f,#7a4dff)}
.wire-nav em{font-style:normal;font-weight:600;color:#fff;background:#1d1530;border-radius:99px;padding:3px 8px}
.wire-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:8px;height:auto;padding:10px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);margin-bottom:8px}
.wh-t p{font:800 12px/1.15 Poppins;color:#1d1530;margin-bottom:6px}
.wire s{display:block;height:4px;border-radius:4px;background:rgba(29,21,48,.18);margin-bottom:4px}.wire s.sh{width:65%}
.wire-btn{margin-top:4px;padding:5px 11px;font-size:9px}
.wh-img{position:relative;border-radius:8px;background:linear-gradient(180deg,#ffd0a8,#c9b8ff);overflow:hidden;min-height:70px}
.wh-img .sun{position:absolute;right:10px;top:9px;width:16px;height:16px;border-radius:50%;background:#fff6c9}
.wh-img .hill{position:absolute;left:-10%;bottom:-30%;width:120%;height:70%;border-radius:50%;background:#7a4dff;opacity:.55}
.wire-row span{height:auto;padding:7px 6px 8px;background:#f6f1ff}
.wire-row em{display:block;font-style:normal;font-size:13px;margin-bottom:4px}
.wire-foot{display:flex;justify-content:space-around;font:600 8px Poppins;color:#5b4a70;background:#fff0e6;border-radius:8px;padding:6px}
.ft-p.on .wire-nav{animation-delay:1.2s}.ft-p.on .wire-foot{animation-delay:2.2s}
.ft-p.on .wire-hero{animation-delay:1.45s}.ft-p.on .wire-row{animation-delay:1.8s}
@media(max-width:520px){.wire{width:230px}}

/* richer phone demo */
.spd-site{gap:8px;min-height:0;padding:8px 10px 10px}
.ss-nav{display:flex;gap:6px;font:500 8px Poppins;color:#7a6a8a}.ss-nav u{text-decoration:none}
.ss-hero{padding:12px 11px}
.ss-h{font-size:15px;min-height:36px;margin-bottom:4px}
.ss-sub{font:500 9px/1.35 Poppins;color:#4a3a5a;margin-bottom:8px}
.ss-cards b{font:700 10px Poppins}
.ss-cards>div{padding:8px 9px;gap:4px}
.ss-cards em{font-size:17px}
.ss-rev{display:grid;gap:4px;padding:8px 10px;border-radius:10px;background:#fffbe9}
.ss-stars{font-size:10px;color:#f4b400;letter-spacing:1px}
.ss-rev i{display:block;height:5px;border-radius:4px;background:rgba(29,21,48,.14)}.ss-rev i+i{width:70%}
.ss-foot{padding:6px;font-size:10px}
.ft-p.on .ss-rev{animation-delay:2.0s}.ft-p.on .ss-foot{animation-delay:2.25s}
.spd-site{gap:7px;padding:6px 10px 9px}
.ss-hero{padding:10px 11px}
.ss-cards>div{padding:6px 9px;gap:3px}
.ss-cards em{font-size:15px}
.ss-rev{padding:6px 10px}
.ss-foot{padding:5px}
.spd-ready{top:9px}
.spd-phone{width:190px}

/* how it works with me: steps as a row of cards, no empty right side */
.wrap.two:has(>.steps-list){max-width:1120px}
.wrap.two>.steps-list{display:grid!important;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;counter-reset:st;padding:0;margin:0}
.wrap.two>.steps-list li{counter-increment:st;position:relative;display:block!important;background:#fff;border-radius:26px;padding:56px 16px 20px;text-align:center;font-size:14.5px;line-height:1.5;box-shadow:0 16px 32px -24px rgba(90,40,90,.5);min-height:150px}
.wrap.two>.steps-list li::before{content:counter(st)!important;position:absolute;left:50%;top:14px;transform:translateX(-50%);width:32px;height:32px;border-radius:50% 50% 50% 8px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font:600 14px/32px Poppins;text-align:center;margin:0}
@media(max-width:1000px){.wrap.two>.steps-list{grid-template-columns:repeat(2,1fr)}.wrap.two>.steps-list li:last-child{grid-column:1/-1}}
@media(max-width:560px){.wrap.two>.steps-list{grid-template-columns:1fr}.wrap.two>.steps-list li{text-align:left;padding:16px 16px 16px 62px;min-height:0}.wrap.two>.steps-list li::before{left:16px;top:50%;transform:translateY(-50%)}}
.wrap.two:has(>.steps-list)>div:first-child,.wrap.two:has(>.faq)>div:first-child{width:100%;max-width:none}.wrap.two:has(>.steps-list)>div:first-child h2,.wrap.two:has(>.faq)>div:first-child h2{text-align:center;margin-left:auto;margin-right:auto}

/* process steps: card grid at tablet widths, stacked only on phones */
@media(min-width:601px) and (max-width:900px){
  .pstrip,.pstrip.four-up{grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px}
  .pstrip::before,.pstrip.four-up::before{display:none}
  .pstrip .ps{display:block;text-align:center;background:#fff;border-radius:26px;padding:20px 16px;box-shadow:0 16px 32px -24px rgba(90,40,90,.5)}
  .pstrip .ps .ps-i{margin:0 auto 12px}
  .pstrip.four-up{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .pstrip .ps{background:#fff;border-radius:24px;padding:14px 16px;box-shadow:0 14px 28px -22px rgba(90,40,90,.5)}
  .pstrip::before,.pstrip.four-up::before{display:none}
}
@media(min-width:601px) and (max-width:900px){
  .pstrip:not(.four-up){display:flex;flex-wrap:wrap;justify-content:center}
  .pstrip:not(.four-up) .ps{flex:0 0 calc(33.333% - 11px)}
}
@media(min-width:700px) and (max-width:1000px){.why3{flex-wrap:nowrap;gap:8px}.why3 span{font-size:12.5px;padding:10px 12px;white-space:nowrap}}
@media(max-width:699px){.why3{flex-direction:column;align-items:center;gap:10px}.why3 span{width:100%;max-width:340px;text-align:center}}
@media(min-width:700px) and (max-width:1000px){.why3{flex-wrap:wrap;gap:12px}.why3 span{font-size:14px;padding:11px 16px;white-space:normal}}
@media(max-width:699px){.why3 span{max-width:360px;font-size:14px}}
.hero-av{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #fff,0 18px 30px -14px rgba(90,40,90,.55)}
.mas-row{align-items:center}
.ei{display:inline-flex;vertical-align:-.2em;margin-right:.35em}
.ei .gi{width:1.15em;height:1.15em}
.itc-e .ei,.ft-e .ei,.ps-i .ei,.ic .ei{margin:0}.ft-e .gi,.ps-i .gi{width:26px;height:26px}.itc-e .gi{width:24px;height:24px}.pill-e .ei{margin:0}

/* smaller icon badges now the icons are line SVGs */
.itc-e{width:38px;height:38px;min-width:0!important;padding:0 8px!important}
.itc-top .itc-e{min-height:38px!important}
.itc-e .gi,.itc-e img{width:20px!important;height:20px!important}
.ft-e{width:40px!important;height:40px!important}
.ft-e .gi{width:22px!important;height:22px!important}
.ps-i{width:54px!important;height:54px!important}
.ps-i .gi{width:24px!important;height:24px!important}
.pstrip::before{top:27px!important}
.wt-i{width:46px!important;height:46px!important}
.wt-i .gi{width:22px!important;height:22px!important}
.itc-top .itc-e{padding:0!important;width:38px!important;justify-content:center;overflow:visible}
.itc-top .itc-e:has(img+img){width:auto!important;padding:0 11px!important}
.itc-e .ei{margin:0}

/* larger icons in list rows and demo labels on the service pages */
em.em{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 10px 20px -14px rgba(90,40,90,.5)}
em.em .ei{margin:0}
em.em .gi{width:30px;height:30px}
.wf-lbl .ei{margin-right:6px}
.wf-lbl .gi{width:20px;height:20px}

/* hosting credentials */
.hostb{max-width:860px;margin:-6px auto 34px;text-align:center}
.hb-t{font:600 13px Poppins;letter-spacing:.1em;text-transform:uppercase;color:#6d3bff;margin-bottom:12px}
.hb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hb-row>div{background:#fff;border-radius:22px;padding:16px 14px;box-shadow:0 14px 28px -22px rgba(90,40,90,.5);display:flex;flex-direction:column;align-items:center;gap:4px}
.hb-row i{font-style:normal;font-size:22px;line-height:1;margin-bottom:2px}.hb-row .gi{width:24px;height:24px}
.hb-row b{font:700 15px Poppins}.hb-row span{font-size:13px;color:var(--muted);line-height:1.4}
@media(max-width:700px){.hb-row{grid-template-columns:1fr}}
.fq-ic .gi,.cs-e .gi{width:24px;height:24px}.cs-e .ei{margin-right:.2em}
.wire-row em .gi,.ss-cards em .gi{width:18px;height:18px}
.snote .gi,.em2 .gi{width:20px;height:20px}
.em2{display:inline-flex;vertical-align:middle}
.us .ei,.them .ei,.e2 .ei{margin-right:.3em}
.ss-foot .gi,.wire-foot .gi{width:12px;height:12px}
.polaroid img[src*="max.jpg"]{aspect-ratio:1/1;object-position:50% 0}

/* hosting credentials v2: one panel, three columns */
.hostb{max-width:860px;margin:0 auto 34px;background:#fff;border-radius:34px;padding:24px 26px 22px;box-shadow:0 20px 40px -28px rgba(90,40,90,.5);text-align:left}
.hb-head{text-align:center;margin-bottom:18px}
.hb-head b{display:block;font:700 19px Poppins}
.hb-head span{font-size:14px;color:var(--muted)}
.hb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hb-i{display:flex;align-items:flex-start;gap:12px;padding:4px 18px}
.hb-i+.hb-i{border-left:1.5px solid #f0e8fa}
.hb-i>i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.hb-i.g>i{background:#e3f6ea}.hb-i.b>i{background:#e6efff}.hb-i.p>i{background:#f0e6ff}
.hb-i .gi{width:24px;height:24px}
.hb-i b{display:block;font:700 14.5px/1.25 Poppins;margin-bottom:3px}
.hb-i span{font-size:13px;line-height:1.4;color:var(--muted)}
@media(max-width:760px){.hb-row{grid-template-columns:1fr;gap:14px}.hb-i{padding:0}.hb-i+.hb-i{border-left:0;border-top:1.5px solid #f0e8fa;padding-top:14px}}
.hb-row>.hb-i{background:none;box-shadow:none;border-radius:0;flex-direction:row;align-items:flex-start;text-align:left;gap:12px;padding:4px 18px}
.hb-row>.hb-i:first-child{padding-left:4px}
.hb-row>.hb-i>div{display:block;background:none;box-shadow:none;padding:0;border-radius:0;text-align:left}
.hb-row .hb-i>i{margin:0;font-size:0}
.hb-i span{display:block;line-height:1.4}
@media(max-width:760px){.hb-row>.hb-i{padding:0}.hb-row>.hb-i+.hb-i{padding-top:14px}}
.ei{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;width:auto!important;height:auto!important;align-items:center;justify-content:center;line-height:1}
.why3 span .ei{margin-right:.45em}
.ps-i,.wt-i,.ic,.fq-ic,.itc-e,.ft-e{display:inline-grid!important;place-items:center}
.ps-i .ei,.wt-i .ei,.ic .ei,.fq-ic .ei,.itc-e .ei,.ft-e .ei{margin:0!important;display:flex}
.ps-i{display:grid!important;margin-left:auto!important;margin-right:auto!important}
.fb-grid div::after{font:800 17px Poppins;padding:5px 14px;top:-12px;right:-6px}
.catch{font-weight:700;color:var(--text);background:linear-gradient(transparent 55%,rgba(255,176,103,.55) 55%);padding:0 3px;white-space:nowrap}
.wrap.two:has(.sv-list) .sv-list li{display:block!important;position:relative;padding-left:46px}
.wrap.two:has(.sv-list) .sv-list li::before{position:absolute;left:20px;top:14px}
.pn{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap}
.pn img{flex:none}

/* ---- navigation v2 ---- */
nav ul{position:relative;align-items:center;gap:6px}
nav ul li{position:relative;z-index:1}
nav ul a{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;font:500 14px Poppins;color:var(--muted);transition:color .25s}
nav ul a .ni{display:inline-flex;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
nav ul a .ni .gi{width:17px;height:17px}
nav ul a:hover .ni{transform:translateY(-2px) rotate(-8deg) scale(1.15)}
nav ul a:hover,nav ul a.active{color:var(--text)}
nav ul a.active{font-weight:600}
.nav-pill{position:absolute;left:0;top:0;border-radius:99px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 8px 18px -10px rgba(122,77,255,.55);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1),height .3s,opacity .25s;z-index:0}
.nav-pill.on{opacity:1}
nav ul li:has(.cta-m){display:none}
nav ul .nav-foot{display:none}
nav .btn.cta-n{position:relative;overflow:hidden;box-shadow:0 12px 24px -12px rgba(122,77,255,.7);transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
nav .btn.cta-n::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:navshine 5s 2s infinite}
@keyframes navshine{0%,70%{left:-60%}100%{left:130%}}
nav .btn.cta-n:hover{transform:translateY(-2px) scale(1.04)}
#menu{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 20px -12px rgba(90,40,90,.55)}
#menu i{position:absolute;left:14px;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s,top .3s}
#menu i:nth-child(1){top:16px}#menu i:nth-child(2){top:22px}#menu i:nth-child(3){top:28px}
nav.open #menu i:nth-child(1){top:22px;transform:rotate(45deg)}
nav.open #menu i:nth-child(2){opacity:0}
nav.open #menu i:nth-child(3){top:22px;transform:rotate(-45deg)}
@media(max-width:900px){
  #menu{display:block}
  nav .nav-pill{display:none}
  nav ul{position:fixed;inset:72px 0 auto 0;height:calc(100vh - 72px);height:calc(100dvh - 72px);flex-direction:column;align-items:stretch;gap:10px;padding:22px 20px 30px;background:linear-gradient(160deg,#fff6ee,#f1e9ff);display:flex!important;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .35s,visibility .3s;overflow:auto;border:0}
  nav.open ul{opacity:1;visibility:visible;transform:none}
  nav ul li,nav ul li:has(.cta-m){display:block}
  nav ul a{padding:16px 18px;border-radius:22px;background:#fff;box-shadow:0 14px 28px -22px rgba(90,40,90,.55);font-size:19px;font-weight:600;color:var(--text);border-bottom:0;gap:14px}
  nav ul a .ni{width:40px;height:40px;border-radius:50%;background:#fff3ea;align-items:center;justify-content:center}
  nav ul a .ni .gi{width:22px;height:22px}
  nav ul li{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1)}
  nav.open ul li{opacity:1;transform:none}
  nav.open ul li:nth-child(1){transition-delay:.05s}nav.open ul li:nth-child(2){transition-delay:.1s}nav.open ul li:nth-child(3){transition-delay:.15s}nav.open ul li:nth-child(4){transition-delay:.2s}nav.open ul li:nth-child(5){transition-delay:.25s}nav.open ul li:nth-child(6){transition-delay:.3s}
  nav ul .cta-m{background:linear-gradient(135deg,#ff5a5f,#7a4dff);color:#fff}
  nav ul .cta-m .ni{background:rgba(255,255,255,.2)}nav ul .cta-m .gi{stroke:#fff}
  nav ul .nav-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
  nav ul .nav-foot a{background:none;box-shadow:none;padding:4px;font-size:15px;font-weight:500;color:var(--muted);display:block}
  nav.open{background:rgba(255,247,238,.97)}
  body.menu-open{overflow:hidden}
}

/* divider between hero CTA and the example chat */
.hero-div{display:flex;align-items:center;gap:16px;max-width:520px;margin:54px auto 10px}
.hero-div::before,.hero-div::after{content:"";flex:1;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(122,77,255,.4) 0 8px,transparent 8px 16px)}
.hero-div span{font:600 12px Poppins;letter-spacing:.14em;text-transform:uppercase;color:#6d3bff;background:#fff;padding:8px 16px;border-radius:99px;box-shadow:0 10px 20px -14px rgba(90,40,90,.55);white-space:nowrap}
.chat-wrap{margin-top:8px}
.hero-div{margin:60px auto 14px;display:block;text-align:center;max-width:none}
.hero-div::before,.hero-div::after{display:none}
.hero-div span{background:none;box-shadow:none;padding:0;font:500 13px Poppins;letter-spacing:.12em;color:#9a8aa8}

/* home hero v2: copy left, chat card right on desktop */
.hero2 .hero-div,.hero2 .chat-note{display:none!important}
.hero-chat{background:#fff;border-radius:34px 34px 34px 10px;padding:18px 20px 24px;box-shadow:0 34px 60px -34px rgba(90,40,90,.55);max-width:440px;width:100%;margin:46px auto 0;text-align:left}
.hc-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1.5px solid #f3ecf8}
.hc-head img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.hc-head b{display:block;font:700 15px Poppins}
.hc-head span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.hc-head span i{width:8px;height:8px;border-radius:50%;background:#2fbf71}
.hero-chat .chat{display:flex;position:static;margin:0;width:100%;gap:12px}
.hero-chat .msg{max-width:88%}
.hero2 .hero-chat .chat{margin:0;width:100%}
@media(min-width:1000px){
  .hero2{text-align:left;padding:140px 0 90px}
  .hero2 .wrap.hero-split{max-width:1180px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .hero2 .hero-copy .mas-row{justify-content:flex-start}
  .hero2 h1{font-size:clamp(46px,5.2vw,78px);margin-left:0}
  .hero2 .lead{margin-left:0;margin-right:0;max-width:540px}
  .hero2 .ctas{justify-content:flex-start}
  .hero-chat{margin:0 0 0 auto}
}
@media(min-width:1000px){
  .hero2 .wrap.hero-split{grid-template-columns:1.3fr .8fr;gap:40px}
  .hero2 h1{font-size:clamp(40px,4.6vw,68px)}
  .hero2 .shapes .s3,.hero2 .shapes .s1{display:none}
}
.fw-facts{max-width:560px!important}.fw-facts div:nth-child(2){flex:1.6}

/* product logos inline: consistent, even spacing */
.pn{gap:.28em!important}
.pn img{margin:0!important;width:1em;height:1em;flex:none}
h1 .pn img,h2 .pn img{width:.82em;height:.82em}
li .pn img,button .pn img,b .pn img,small .pn img{width:18px;height:18px}
.pn+.pn,.pn{margin-right:0}

/* how it works tiles: roomier, even, easier to read */
.wrap.two>.steps-list{gap:16px;margin-top:6px}
.wrap.two>.steps-list li{padding:70px 18px 24px;min-height:190px;font-size:15.5px;line-height:1.55;display:flex!important;align-items:flex-start;justify-content:center;border-radius:28px}
.wrap.two>.steps-list li::before{top:20px;width:38px;height:38px;font-size:16px;line-height:38px}
.wrap.two:has(>.steps-list)>div:first-child{margin-bottom:34px}
@media(max-width:1000px){.wrap.two>.steps-list li{min-height:0;padding:66px 18px 22px}}
@media(max-width:560px){.wrap.two>.steps-list{gap:12px}.wrap.two>.steps-list li{padding:18px 18px 18px 70px;min-height:0;text-align:left;align-items:center;justify-content:flex-start;font-size:15.5px}.wrap.two>.steps-list li::before{left:18px;top:50%;transform:translateY(-50%)}}

/* included tiles: even height, text centred vertically, tidy line spacing */
.wrap.two:has(.sv-list) .sv-list{align-items:stretch;gap:12px}
.wrap.two:has(.sv-list) .sv-list li{display:flex!important;align-items:center;min-height:64px;padding:14px 22px 14px 50px!important;border-radius:28px;line-height:1.45;font-size:15.5px}
.wrap.two:has(.sv-list) .sv-list li::before{top:50%!important;transform:translateY(-50%);left:22px!important;line-height:1}
.wrap.two:has(.sv-list) .sv-list li .pn{margin:0 .15em;vertical-align:baseline}
.wrap.two:has(.sv-list) .sv-list li .pn img{width:17px;height:17px;position:relative;top:-1px}
@media(max-width:700px){.wrap.two:has(.sv-list) .sv-list li{min-height:58px}}
.sv-list .li-t{display:block;min-width:0}
.sv-list .li-t .pn{display:inline;white-space:normal;margin:0}
.sv-list .li-t .pn img{display:inline-block;vertical-align:-3px;margin:0 5px 0 1px!important;position:static;width:17px;height:17px}

/* ===== individual service pages: own colour, hero visual and list style ===== */
body.svc-ms{--t1:#2f80ff;--t2:#7a4dff;--tt:#e9f1ff}
body.svc-gg{--t1:#22b573;--t2:#2f8cff;--tt:#e6f8ee}
body.svc-mac{--t1:#ff7a59;--t2:#5b5f9a;--tt:#efedf8}
body.svc-lap{--t1:#ff9f1c;--t2:#ff5a5f;--tt:#fff0da}
body.svc-crm{--t1:#ec4899;--t2:#7a4dff;--tt:#fde8f2}
body.svc-wifi{--t1:#14b8a6;--t2:#3b82f6;--tt:#dff6f3}
body.svc-up{--t1:#ff5a5f;--t2:#ffb067;--tt:#fff0e6}
body[class*="svc-"] .btn{background:linear-gradient(135deg,var(--t1),var(--t2))}
body[class*="svc-"] .page-hero::before{background:radial-gradient(circle,color-mix(in srgb,var(--t2) 26%,transparent),transparent 65%)}
body[class*="svc-"] .page-hero .blobs .b1{background:color-mix(in srgb,var(--t1) 32%,transparent)}
body[class*="svc-"] .page-hero .blobs .b2{background:color-mix(in srgb,var(--t2) 28%,transparent)}
body[class*="svc-"] .plain.tint{background:var(--tt)}
body[class*="svc-"] .eyebrow,body[class*="svc-"] .lg-t{color:var(--t2)}
body[class*="svc-"] .steps-list li::before,body[class*="svc-"] .faq button::before{background:linear-gradient(135deg,var(--t1),var(--t2))}
body[class*="svc-"] .faq .it::before{background:linear-gradient(180deg,var(--t1),var(--t2))}

/* hero split */
.svc-split{display:grid;gap:34px;align-items:center}
.svc-vis{max-width:430px;width:100%;margin:6px auto 0}
@media(min-width:1000px){
  .svc-hero{padding-bottom:50px!important}
  .svc-split{grid-template-columns:1.05fr .95fr;gap:56px;max-width:1120px}
  .svc-split.rev .svc-copy{order:2}
  .page-hero.svc-hero .wrap{text-align:left}
  .svc-hero .svc-copy{text-align:left}
  .svc-hero h1{margin-left:0;font-size:clamp(34px,4.2vw,58px)}
  .svc-hero .sub{margin-left:0;max-width:520px}
  .svc-hero .ctas{justify-content:flex-start}
  .svc-hero .svc-hero-em{margin-left:0}
  .svc-vis{margin:0}
}
/* hero visual cards */
.v-card{position:relative;background:#fff;border-radius:30px 30px 30px 8px;padding:20px;box-shadow:0 34px 60px -34px color-mix(in srgb,var(--t2) 70%,#000 0%);text-align:left}
.v-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.v-top i{width:9px;height:9px;border-radius:50%;background:#e4dcee}
.v-top b{font:700 14px Poppins;margin-right:auto;margin-left:4px}
.v-pill{font:600 11px Poppins;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--t1) 16%,#fff);color:var(--t2)}
.v-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1.5px solid #f4eef8}
.v-row u{text-decoration:none;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 13px Poppins;background:linear-gradient(135deg,var(--t1),var(--t2))}
.v-row b{display:block;font:600 14px Poppins}.v-row span{font-size:12.5px;color:var(--muted)}
.v-meter{margin-top:8px;padding-top:12px;border-top:1.5px solid #f4eef8;display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.v-bar{height:8px;border-radius:99px;background:#efe9f6;overflow:hidden}.v-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--t1),var(--t2))}
.v-meter em{font-style:normal;font-weight:600;color:var(--text)}
.v-eg{position:absolute;right:16px;bottom:-12px;font:600 10.5px Poppins;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--muted);padding:4px 10px;border-radius:99px;box-shadow:0 8px 16px -10px rgba(90,40,90,.5)}
.v-addr{font:600 15px Poppins;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--t1) 12%,#fff);margin-bottom:12px}
.v-folders{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.v-folders span{font:600 12px Poppins;padding:14px 8px;border-radius:12px;background:#f6f1ff;text-align:center;border-bottom:3px solid var(--t1)}
.v-meet{padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff}
.v-meet b{display:block;font:700 14px Poppins}.v-meet span{font-size:12.5px;opacity:.9}
.v-devs{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.v-dev{display:grid;place-items:center;gap:6px;width:120px;padding:16px 8px;border-radius:20px;background:#f6f3fb}
.v-dev svg{width:44px;height:44px;fill:none;stroke:var(--t2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v-dev b{font:700 13px Poppins}.v-devs em{font:700 22px Poppins;font-style:normal;color:var(--t1)}
.v-badge{text-align:center;font:700 12.5px Poppins;padding:8px 14px;border-radius:99px;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff;margin:0 auto 14px;width:max-content}
.v-list,.v-check,.v-stat{list-style:none;display:grid;gap:8px;font-size:13.5px}
.v-list li,.v-check li{padding-left:24px;position:relative}
.v-list li::before,.v-check li::before{content:"\2713";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--t1) 18%,#fff);color:var(--t2);font:700 11px/18px Poppins;text-align:center}
.v-check{margin-bottom:14px;font-size:14.5px;font-weight:500}
.v-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.v-opt{padding:16px 12px;border-radius:18px;background:#f6f3fb;text-align:center}
.v-opt b{display:block;font:700 15px Poppins}.v-opt span{font-size:12px;color:var(--muted)}
.v-opt.on{background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff}.v-opt.on span{color:rgba(255,255,255,.85)}
.v-note{font-size:13px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--t1) 12%,#fff);font-weight:500}
.v-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.v-pipe>div{background:#f6f3fb;border-radius:14px;padding:10px 8px;display:grid;gap:6px;align-content:start;min-height:110px}
.v-pipe em{font:700 10.5px Poppins;font-style:normal;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.v-pipe s{display:block;height:30px;border-radius:8px;background:#fff;box-shadow:0 6px 12px -8px rgba(90,40,90,.5)}
.v-pipe .won{background:color-mix(in srgb,var(--t1) 16%,#fff)}.v-pipe .won s{border-left:4px solid var(--t1)}
.v-sig{display:grid;place-items:center;margin-bottom:12px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--t1) 12%,#fff)}
.v-sig svg{width:72px;height:72px;fill:none;stroke:var(--t2);stroke-width:1.8;stroke-linecap:round}
.v-stat li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:#f6f3fb;font-size:13.5px}
.v-stat .ok{font:600 12px Poppins;color:#1f9d63;background:#e2f6ec;padding:3px 10px;border-radius:99px}
@media(max-width:999px){.svc-vis{max-width:400px}.svc-hero .svc-copy{text-align:center}}

/* included list variants */
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks li{background:#fff;border-radius:22px!important;min-height:78px!important;padding:18px 20px 18px 62px!important;font-size:16px!important;box-shadow:0 16px 30px -24px rgba(90,40,90,.5)}
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks li::before{content:"\2713"!important;left:18px!important;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff!important;font:700 15px/30px Poppins;text-align:center}
.wrap.two:has(.sv-list.iv-icons),.wrap.two:has(.sv-list.iv-nums){max-width:1080px!important}
.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons li,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums li{display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-start;gap:14px;padding:24px 22px!important;border-radius:28px!important;min-height:150px!important;background:#fff;box-shadow:0 18px 34px -26px rgba(90,40,90,.55)}
.wrap.two:has(.sv-list.iv-icons) .sv-list li::before,.wrap.two:has(.sv-list.iv-nums) .sv-list li::before{display:none!important}
.sv-list .li-i{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--t1) 14%,#fff)}
.sv-list .li-i .gi{width:26px;height:26px}
.sv-list .li-n{font:800 34px/1 Poppins;background:linear-gradient(135deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line{grid-template-columns:1fr!important;max-width:640px;margin:0 auto;gap:0!important;position:relative}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:3px;border-radius:3px;background:linear-gradient(var(--t1),var(--t2));opacity:.35}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li{background:none!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;padding:14px 0 14px 60px!important;font-size:17px!important}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li::before{content:"\2713"!important;left:6px!important;top:50%!important;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--t1);color:var(--t1)!important;font:700 13px/22px Poppins;text-align:center;box-shadow:0 0 0 5px color-mix(in srgb,var(--t1) 12%,transparent)}
@media(max-width:900px){.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-template-columns:1fr!important}.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons li,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums li{min-height:0!important;flex-direction:row;align-items:center!important}}
@media(min-width:1000px){.svc-hero .crumbs{display:block;text-align:left;margin:0 0 14px;padding:0}.svc-hero .svc-hero-em{display:block;margin:0 0 12px}}

/* Why TechTotal: promise + how I work */
.promise{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pr-head img{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #fff,0 18px 30px -14px rgba(90,40,90,.55);margin-bottom:20px}
.pr-q{font:800 clamp(32px,4.2vw,52px)/1.05 Poppins;letter-spacing:-.03em;margin-bottom:16px}
.pr-q span{background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-s{font-size:17px;color:var(--muted);max-width:380px;line-height:1.6}
.pr-list{display:grid;gap:0}
.pr-row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;padding:26px 0 26px 4px;border-top:2px solid #f1e8f6}
.pr-row:last-child{border-bottom:2px solid #f1e8f6}
.pr-n{position:absolute;right:0;top:12px;font:800 54px/1 Poppins;color:rgba(122,77,255,.09)}
.pr-i{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.pr-i .ei{margin:0}.pr-i .gi{width:28px;height:28px}
.pr-row h3{font:700 21px Poppins;margin-bottom:4px}
.pr-row p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:480px}
.how-wrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.how-l{position:sticky;top:110px}
.how-l .eyebrow{margin-bottom:10px}
.how-l h2{font-size:clamp(32px,4vw,48px);margin-bottom:14px}
.how-l .sub{max-width:360px}
.how-sig{display:flex;align-items:center;gap:12px;margin-top:24px;font:600 15px Poppins}
.how-sig img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff}
.how-steps{list-style:none;position:relative;display:grid;gap:0;padding-left:0}
.how-steps::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:3px;border-radius:3px;background:repeating-linear-gradient(180deg,rgba(122,77,255,.45) 0 10px,transparent 10px 20px)}
.hstep{position:relative;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:center;padding:14px 0}
.hstep-i{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 16px 28px -16px rgba(90,40,90,.55);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.hstep:hover .hstep-i{transform:scale(1.1) rotate(-6deg)}
.hstep-i .ei{margin:0}.hstep-i .gi{width:28px;height:28px}
.hstep-k{font:600 11.5px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--a3)}
.hstep h3{font:700 22px Poppins;margin:2px 0 2px}
.hstep p{color:var(--muted);font-size:15.5px}
@media(max-width:900px){.promise,.how-wrap{grid-template-columns:1fr;gap:30px}.how-l{position:static}.pr-head{text-align:center}.pr-head img{margin-left:auto;margin-right:auto}.pr-s{margin:0 auto}.how-l{text-align:center}.how-l .sub{margin:0 auto}.how-sig{justify-content:center}}
@media(max-width:520px){.pr-row{grid-template-columns:1fr}.pr-i{grid-row:auto}.pr-n{top:6px}.hstep{grid-template-columns:54px 1fr;gap:16px}.hstep-i{width:54px;height:54px}.how-steps::before{left:26px}}
.hello{display:flex;align-items:center;gap:22px;max-width:760px;margin:0 auto;padding:18px 22px 18px 18px;border-radius:999px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 22px 40px -28px rgba(122,77,255,.6)}
.hello img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff;flex:none}
.hello-t{flex:1;min-width:0}
.hello h2{font:700 20px Poppins;margin:0 0 2px}
.hello p{font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.hello p a{color:var(--text);border-bottom:1.5px solid var(--a1)}
.hello .btn{flex:none}
@media(max-width:640px){.hello{flex-direction:column;text-align:center;border-radius:34px;padding:22px}.hello p{justify-content:center}}

/* process strips: clear sequence with numbers, arrows and a path that draws */
.pstrip{counter-reset:ps}
.pstrip .ps{counter-increment:ps}
.pstrip .ps-i::after{content:counter(ps);position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font:700 12px/24px Poppins;text-align:center;box-shadow:0 6px 12px -6px rgba(90,40,90,.6)}
.pstrip::after{content:"";position:absolute;left:10%;top:27px;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width 1.6s .4s cubic-bezier(.4,.1,.2,1)}
.pstrip.in::after{width:80%}
.pstrip.four-up::after{left:12%}.pstrip.four-up.in::after{width:76%}
.pstrip .ps:not(:last-child)::before{content:"";position:absolute;top:17px;right:-9px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 6px 12px -6px rgba(90,40,90,.6);z-index:2}
.pstrip .ps:not(:last-child){}
.pstrip .ps-arr{display:none}
.pstrip .ps:not(:last-child)::after{content:"";position:absolute;top:23px;right:-3px;width:7px;height:7px;border-top:2.5px solid var(--a2);border-right:2.5px solid var(--a2);transform:rotate(45deg);z-index:3}
@media(max-width:900px){
  .pstrip::after{left:26px;top:27px;width:3px;height:0;transition:height 1.6s .4s cubic-bezier(.4,.1,.2,1)}
  .pstrip.in::after{width:3px;height:calc(100% - 54px)}
  .pstrip .ps:not(:last-child)::before,.pstrip .ps:not(:last-child)::after{display:none}
}
@media(max-width:900px){
  .pstrip::after{display:none}
  .pstrip .ps:not(:last-child)::after{display:block;content:"";position:absolute;left:50%;bottom:-17px;top:auto;right:auto;width:9px;height:9px;margin-left:-5px;border-top:0;border-right:2.5px solid var(--a2);border-bottom:2.5px solid var(--a2);transform:rotate(45deg);z-index:3}
  .pstrip .ps:not(:last-child)::before{display:block;content:"";position:absolute;left:50%;bottom:-24px;top:auto;right:auto;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;box-shadow:0 6px 12px -6px rgba(90,40,90,.6);z-index:2}
  .pstrip .ps{margin-bottom:6px}
}

/* tailored middle sections on service pages */
.mid h3{font:700 19px Poppins}
.mid-three,.mid-two,.mid-month{display:grid;gap:16px;max-width:1040px;margin:0 auto}
.mid-three{grid-template-columns:repeat(3,1fr)}
.m3{background:#fff;border-radius:28px;padding:26px 24px;box-shadow:0 18px 34px -26px rgba(90,40,90,.55);position:relative;overflow:hidden}
.m3::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--t1),var(--t2))}
.m3-k{font:700 11.5px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.m3 h3{margin:6px 0 12px}
.m3 ul,.m2 ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--muted)}
.m3 li,.m2 li{padding-left:24px;position:relative}
.m3 li::before,.m2 li::before{content:"\2713";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--t1) 18%,#fff);color:var(--t2);font:700 10px/17px Poppins;text-align:center}
.mid-two{grid-template-columns:1fr 1fr}
.m2{background:#fff;border-radius:30px;padding:28px 28px;box-shadow:0 18px 34px -26px rgba(90,40,90,.55)}
.m2.alt{background:linear-gradient(135deg,color-mix(in srgb,var(--t1) 16%,#fff),color-mix(in srgb,var(--t2) 14%,#fff))}
.m2 h3{margin-bottom:14px}
.mid-flow{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap;max-width:1040px;margin:0 auto}
.mf{flex:1 1 220px;max-width:260px;background:#fff;border-radius:26px;padding:22px 20px;box-shadow:0 18px 34px -26px rgba(90,40,90,.55);position:relative}
.mf b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff;font:700 15px Poppins;margin-bottom:10px}
.mf h3{font-size:18px;margin-bottom:4px}.mf p{font-size:14.5px;color:var(--muted)}
.mf-a{align-self:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 8px 16px -8px rgba(90,40,90,.6);position:relative;flex:none}
.mf-a::after{content:"";position:absolute;left:11px;top:11px;width:9px;height:9px;border-top:2.5px solid var(--t2);border-right:2.5px solid var(--t2);transform:rotate(45deg)}
.mf-split{flex:1 1 300px;max-width:340px;display:grid;gap:12px}
.mf-split .mf{max-width:none}.mf.ok{border-left:6px solid #2fbf71}.mf.no{border-left:6px solid var(--t1)}
.mid-lead{max-width:640px;margin:0 auto;position:relative;display:grid;gap:0}
.mid-lead::before{content:"";position:absolute;left:19px;top:26px;bottom:26px;width:3px;border-radius:3px;background:linear-gradient(var(--t1),var(--t2))}
.ml{position:relative;padding:12px 0 12px 62px}
.ml::before{content:"";position:absolute;left:8px;top:18px;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--t1);box-shadow:0 0 0 5px color-mix(in srgb,var(--t1) 14%,transparent)}
.ml-t{font:700 18px Poppins;display:block;margin-bottom:2px}.ml p{color:var(--muted);font-size:15.5px}
.ml.win::before{background:var(--t1)}
.mid-layers{max-width:900px;margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center}
.mly-d{position:relative;width:240px;height:240px;margin:0 auto}
.mly-d i{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.mly-d .l4{width:240px;height:240px;background:color-mix(in srgb,var(--t2) 14%,#fff)}
.mly-d .l3{width:184px;height:184px;background:color-mix(in srgb,var(--t2) 24%,#fff)}
.mly-d .l2{width:128px;height:128px;background:color-mix(in srgb,var(--t1) 40%,#fff)}
.mly-d .l1{width:72px;height:72px;background:linear-gradient(135deg,var(--t1),var(--t2));box-shadow:0 12px 24px -10px rgba(20,184,166,.7)}
.mly-l{list-style:none;display:grid;gap:14px}
.mly-l li{padding-left:18px;border-left:4px solid var(--t1)}
.mly-l b{display:block;font:700 17px Poppins}.mly-l span{font-size:15px;color:var(--muted)}
.mid-month{grid-template-columns:repeat(4,1fr);position:relative}
.mm{background:#fff;border-radius:26px;padding:22px 20px;box-shadow:0 18px 34px -26px rgba(90,40,90,.55);position:relative}
.mm span{display:inline-block;font:700 11.5px Poppins;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--t1),var(--t2));padding:4px 12px;border-radius:99px;margin-bottom:10px}
.mm h3{font-size:18px;margin-bottom:4px}.mm p{font-size:14.5px;color:var(--muted)}
.procline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;max-width:900px;margin:0 auto;padding:16px 22px;border-radius:999px;background:#fff;box-shadow:0 16px 30px -24px rgba(90,40,90,.55)}
.procline span{font:600 14.5px Poppins}
.procline i{width:8px;height:8px;border-top:2.5px solid var(--t2,var(--a2));border-right:2.5px solid var(--t2,var(--a2));transform:rotate(45deg);margin:0 4px}
.procline em{flex-basis:100%;text-align:center;font-style:normal;font-size:13px;color:var(--muted)}
@media(max-width:900px){.mid-three,.mid-two{grid-template-columns:1fr}.mid-month{grid-template-columns:1fr 1fr}.mid-layers{grid-template-columns:1fr;gap:28px}.procline{border-radius:30px}}
@media(max-width:520px){.mid-month{grid-template-columns:1fr}.mf-a{transform:rotate(90deg)}}

/* interactive process */
.proc .pstrip{max-width:1080px}
.proc button.ps{background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:center;padding:6px 6px 10px;border-radius:22px;transition:background .3s,transform .3s}
.proc button.ps:hover{background:rgba(255,255,255,.55)}
.proc button.ps:focus-visible{outline:3px solid var(--a2);outline-offset:2px}
.proc .ps h3{font:700 16.5px Poppins;margin-bottom:4px;transition:color .3s}
.proc .ps p{font-size:13.5px;line-height:1.5;color:var(--muted)}
.proc .ps.on h3{color:var(--a2)}
.proc .ps.on .ps-i{transform:scale(1.18);box-shadow:0 0 0 6px rgba(122,77,255,.18),0 16px 28px -14px rgba(90,40,90,.6)}
.proc .ps.done .ps-i::after{background:linear-gradient(135deg,#2fbf71,#1f9d63)}
.proc .pstrip::after{transition:width .7s cubic-bezier(.4,.1,.2,1)}
.proc .pstrip.p1::after{width:0}.proc .pstrip.p2::after{width:20%}.proc .pstrip.p3::after{width:40%}.proc .pstrip.p4::after{width:60%}.proc .pstrip.p5::after{width:80%}
.proc .pstrip.in.p1::after{width:0}
.pp-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;max-width:860px;margin:26px auto 0}
.pp-box{background:#fff;border-radius:34px;padding:28px 34px;box-shadow:0 26px 48px -32px rgba(90,40,90,.6);min-height:250px;text-align:left}
.pdet{display:none}.pdet.on{display:block;animation:ppin .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes ppin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pp-k{font:700 11.5px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--a2)}
.pdet h3{font:800 26px Poppins;margin:4px 0 8px}
.pp-d{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:14px}
.pdet ul{list-style:none;display:grid;gap:8px;margin-bottom:16px;font-size:15.5px}
.pdet li{padding-left:28px;position:relative}
.pdet li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:rgba(255,90,95,.14);color:var(--a1);font:700 11px/19px Poppins;text-align:center}
.pp-g{padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#ffe9dc,#efe4ff);font-size:15px}
.pp-nav{position:relative;width:52px;height:52px;border-radius:50%;border:0;background:#fff;box-shadow:0 14px 26px -14px rgba(90,40,90,.6);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.pp-nav::after{content:"";position:absolute;left:21px;top:20px;width:11px;height:11px;border-top:3px solid var(--a2);border-right:3px solid var(--a2);transform:rotate(45deg)}
.pp-nav.prev::after{left:23px;transform:rotate(-135deg)}
.pp-nav:hover:not(:disabled){transform:scale(1.12)}
.pp-nav:disabled{opacity:.35;cursor:default}
.pp-nav:focus-visible{outline:3px solid var(--a2);outline-offset:3px}
.pp-hint{text-align:center;font-size:13.5px;color:var(--muted);margin-top:14px;transition:opacity .4s}
@media(max-width:900px){
  .proc .pstrip{grid-template-columns:repeat(5,1fr);gap:4px}
  .proc .pstrip::before{display:block!important;left:8%!important;right:8%!important;top:27px!important;bottom:auto!important;width:auto!important;height:3px!important;background:repeating-linear-gradient(90deg,rgba(122,77,255,.5) 0 10px,transparent 10px 20px)!important}
  .proc .pstrip::after{display:block!important;left:8%;top:27px;height:3px!important}
  .proc .pstrip.p2::after{width:21%!important}.proc .pstrip.p3::after{width:42%!important}.proc .pstrip.p4::after{width:63%!important}.proc .pstrip.p5::after{width:84%!important}.proc .pstrip.p1::after{width:0!important}
  .proc .pstrip .ps{display:block;background:none!important;box-shadow:none!important;padding:6px 2px;min-height:0}
  .proc .pstrip .ps p{display:none}
  .proc .pstrip .ps:not(:last-child)::before,.proc .pstrip .ps:not(:last-child)::after{display:none!important}
  .proc .ps h3{font-size:12.5px}
  .proc .ps-i{width:46px!important;height:46px!important;margin-bottom:8px!important}
  .pp-wrap{grid-template-columns:1fr 1fr;gap:12px}
  .pp-box{grid-column:1/-1;grid-row:1;padding:22px 20px}
  .pp-nav.prev{grid-row:2;justify-self:end}.pp-nav.next{grid-row:2;justify-self:start}
}

.pdet b{font:700 15px Poppins}
.proc .pstrip{align-items:start}
.proc .ps-i{z-index:2}

/* ===== included lists v2: lighter, smaller, no white tile grids ===== */
.wrap.two:has(.sv-list) .sv-list li{box-shadow:none!important}
.wrap.two:has(.sv-list.iv-pills) .sv-list.iv-pills{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px!important;max-width:880px;margin:0 auto}
.wrap.two:has(.sv-list.iv-pills) .sv-list.iv-pills li{display:inline-flex!important;min-height:0!important;padding:11px 20px 11px 44px!important;border-radius:99px!important;background:color-mix(in srgb,var(--t1) 12%,#fff)!important;font-size:15px!important;width:auto}
.wrap.two:has(.sv-list.iv-pills) .sv-list.iv-pills li::before{left:18px!important;color:var(--t2)!important}
.wrap.two:has(.sv-list.iv-bars) .sv-list.iv-bars{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px 44px!important;max-width:900px;margin:0 auto}
.wrap.two:has(.sv-list.iv-bars) .sv-list.iv-bars li{display:block!important;position:relative;min-height:0!important;padding:4px 0 4px 20px!important;border-radius:0!important;background:none!important;font-size:16px!important}
.wrap.two:has(.sv-list.iv-bars) .sv-list.iv-bars li::before{content:""!important;display:block!important;position:absolute;left:0!important;top:0!important;bottom:0;width:4px!important;height:auto!important;border-radius:4px;background:linear-gradient(var(--t1),var(--t2))!important;transform:scaleY(1);transform-origin:top;transition:transform .7s cubic-bezier(.3,1,.4,1)}
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 48px!important;max-width:900px;margin:0 auto}
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks li{min-height:0!important;padding:15px 0 15px 38px!important;border-radius:0!important;background:none!important;border-bottom:1.5px solid color-mix(in srgb,var(--t1) 22%,#fff);font-size:15.5px!important}
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks li::before{left:0!important;width:24px!important;height:24px!important;font:700 12px/24px Poppins!important}
.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-template-columns:1fr 1fr!important;gap:0 48px!important;max-width:900px!important;margin:0 auto}
.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons li,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums li{flex-direction:row!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:14px 0!important;border-radius:0!important;background:none!important;border-bottom:1.5px solid color-mix(in srgb,var(--t1) 22%,#fff);font-size:15.5px!important}
.sv-list.iv-icons .li-i{width:40px;height:40px;border-radius:12px;flex:none}
.sv-list.iv-icons .li-i .gi{width:22px;height:22px}
.sv-list.iv-nums .li-n{font-size:24px;flex:none;width:42px}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li{padding:9px 0 9px 58px!important;font-size:16px!important}
@media(max-width:700px){
  .wrap.two:has(.sv-list.iv-bars) .sv-list.iv-bars,.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks,.wrap.two:has(.sv-list.iv-icons) .sv-list.iv-icons,.wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-template-columns:1fr!important}
  .wrap.two:has(.sv-list.iv-pills) .sv-list.iv-pills{justify-content:flex-start}
}

/* scroll interactions: each list animates in its own way */
.sv-list.anim li{opacity:0;transition:opacity .6s ease,transform .7s cubic-bezier(.3,1.4,.5,1);transition-delay:var(--d,0s)}
.sv-list.anim.iv-pills li{transform:scale(.8)}
.sv-list.anim.iv-bars li{transform:translateX(-16px)}
.sv-list.anim.iv-bars li::before{transform:scaleY(0)}
.sv-list.anim.iv-checks li{transform:translateY(14px)}
.sv-list.anim.iv-checks li::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.9,.5,1);transition-delay:calc(var(--d,0s) + .2s)}
.sv-list.anim.iv-icons li{transform:translateX(-20px)}
.sv-list.anim.iv-icons li .li-i{transform:scale(.4) rotate(-20deg);transition:transform .6s cubic-bezier(.3,1.9,.5,1);transition-delay:calc(var(--d,0s) + .15s)}
.sv-list.anim.iv-nums li{transform:translateY(16px)}
.sv-list.anim.iv-line li{transform:translateX(16px)}
.sv-list.anim li.seen{opacity:1;transform:none}
.sv-list.anim.iv-bars li.seen::before{transform:scaleY(1)}
.sv-list.anim.iv-checks li.seen::before{transform:scale(1)}
.sv-list.anim.iv-icons li.seen .li-i{transform:none}
.sv-list.iv-line::after{content:"";position:absolute;left:19px;top:20px;width:3px;border-radius:3px;background:linear-gradient(var(--t1),var(--t2));height:calc((100% - 40px)*var(--prog,1))}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line::before{opacity:.18!important}
.sv-list.anim.iv-line li::before{transition:background .4s,color .4s,transform .4s cubic-bezier(.3,1.9,.5,1)}
.sv-list.anim.iv-line li.lit::before{background:var(--t1)!important;color:#fff!important;transform:translateY(-50%) scale(1.12)}
@media (prefers-reduced-motion:reduce){.sv-list.anim li{opacity:1;transform:none;transition:none}}

/* process: always five in a row, left to right */
.proc .pstrip,.proc .pstrip:not(.four-up){display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:8px!important;flex-wrap:nowrap}
@media(max-width:900px){.proc .pstrip .ps{flex:none!important;width:auto!important}}

/* round 2 mobile review */
.home-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:34px}
.home-cta .more{margin:0!important}
.hero2{padding-top:130px}

/* day counter: one "Day" label, then numbers */
.seven2.pill .days small{font:700 12px Poppins;letter-spacing:.14em;text-transform:uppercase;color:#6d3bff;margin-right:2px}
.seven2.pill .days i{width:32px!important;height:32px!important;padding:0!important;border-radius:50%!important;font:700 13px/32px Poppins!important;display:grid;place-items:center;white-space:nowrap}
.seven2.pill .days{gap:7px;align-items:center}
.seven2.pill .days em{white-space:nowrap}

/* tabs: obvious they are tappable and control what's below */
.ft-hint{display:none;text-align:center;font:600 13.5px Poppins;color:#6d3bff;margin:0 0 10px}
.ft-hint span{display:inline-block;animation:hintbob 1.8s ease-in-out 3}
@keyframes hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(max-width:999px){
  .ft-hint{display:block}
  .ft-b{position:relative;padding-right:46px!important}
  .ft-b::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid #6d3bff;border-bottom:2.5px solid #6d3bff;transform:rotate(45deg);transition:transform .35s}
  .ft-b.on::after,.ft-b[aria-selected="true"]::after{transform:rotate(-135deg);margin-top:-2px}
}

/* tighter finish to the home page */
#it{padding-bottom:20px!important}
.touch{padding:44px 28px 40px!important}
@media(max-width:700px){.touch{padding:36px 22px 34px!important}}
.touch-av{margin-bottom:10px}

/* calmer motion: no constant bobbing, movement only for emphasis */
.em,.svc-hero-em,.svx-em{animation:none!important}
.rows li .em{animation:none!important}

/* before / after rows (Microsoft 365) */
.ba{display:grid;gap:14px;max-width:900px;margin:0 auto}
.ba-r{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;gap:0}
.ba-b,.ba-n{padding:16px 20px;border-radius:22px}
.ba-b{background:rgba(255,255,255,.6);border:1.5px dashed color-mix(in srgb,var(--t2) 28%,#fff)}
.ba-n{background:#fff;box-shadow:0 14px 28px -22px rgba(90,40,90,.55);border-left:5px solid var(--t1)}
.ba small{display:block;font:700 10.5px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ba-n small{color:var(--t2)}
.ba p{font-size:15.5px;line-height:1.45;margin:0}
.ba-b p{color:var(--muted)}
.ba-arr{align-self:center;justify-self:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--t1),var(--t2));position:relative}
.ba-arr::after{content:"";position:absolute;left:8px;top:8px;width:7px;height:7px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:rotate(45deg)}
@media(max-width:700px){.ba-r{grid-template-columns:1fr;gap:0}.ba-arr{margin:-6px 0;z-index:1;transform:rotate(90deg)}}

/* calmer headings: smaller weight on long titles */
.cs-t h3{font-weight:600!important;font-size:clamp(21px,2.5vw,27px)!important;line-height:1.25!important}
.cs-n{display:inline-block;padding:3px 10px;border-radius:99px;background:rgba(122,77,255,.1);color:#6d3bff!important}
.page-hero:not(.hero2):not(.wh2) h1{font-weight:700}
@media(max-width:700px){
  .page-hero:not(.hero2):not(.wh2) h1{font-size:clamp(28px,7.6vw,36px)!important;line-height:1.14!important;letter-spacing:-.02em}
  .wh2 h1{font-size:clamp(28px,7.6vw,36px)!important}
  main h2:not(.fq-h):not(.pr-q){font-weight:700}
  .svx-h{font-weight:700!important;font-size:clamp(24px,6.4vw,30px)!important}
}

/* safety net: rings grow outwards once, then respond to the list */
.mly-d i{transform:translate(-50%,-50%) scale(0);transition:transform .9s cubic-bezier(.3,1.5,.5,1),box-shadow .4s,background .4s}
.mly-d.in i{transform:translate(-50%,-50%) scale(1)}
.mly-d.in .l1{transition-delay:.1s}.mly-d.in .l2{transition-delay:.35s}.mly-d.in .l3{transition-delay:.6s}.mly-d.in .l4{transition-delay:.85s}
.mid-layers[data-hi="1"] .l1{box-shadow:0 0 0 8px color-mix(in srgb,var(--t1) 35%,transparent)}
.mid-layers[data-hi="2"] .l2{box-shadow:0 0 0 8px color-mix(in srgb,var(--t1) 35%,transparent);background:color-mix(in srgb,var(--t1) 55%,#fff)}
.mid-layers[data-hi="3"] .l3{box-shadow:0 0 0 8px color-mix(in srgb,var(--t2) 30%,transparent);background:color-mix(in srgb,var(--t2) 40%,#fff)}
.mid-layers[data-hi="4"] .l4{box-shadow:0 0 0 8px color-mix(in srgb,var(--t2) 25%,transparent);background:color-mix(in srgb,var(--t2) 28%,#fff)}
.mly-l li{cursor:pointer;transition:border-color .3s,transform .3s}
.mly-l li.hi{border-left-color:var(--t2);transform:translateX(6px)}
.mly-l li.hi b{color:var(--t2)}
.s3-p1,.s3-p2,.wc,.hero2 .sh{animation:none!important}
.seven2.pill .seven-n small{display:none}.seven2.pill .seven-n b{font-size:54px}
.em2,.e2{display:inline-grid;place-items:center;width:1.5em;height:1.5em;vertical-align:middle}
.em2 .gi,.e2 .gi,.em2 .ei,.e2 .ei{margin:0!important}
.wt-i{display:grid!important;place-items:center}.wt-i .ei{display:flex;margin:0!important}

/* accordion on phones and tablets: demo opens under its tab */
@media(max-width:999px){
  .ft-stage{display:none}
  .ft-nav .ft-p{position:relative;inset:auto;display:none;opacity:1;transform:none;pointer-events:auto;min-height:0;margin:-4px 0 6px;padding:22px 16px;border-radius:30px;background:#fff;box-shadow:0 22px 40px -30px rgba(90,40,90,.55)}
  .ft-nav .ft-p.on{display:grid;animation:accin .45s cubic-bezier(.3,1.2,.5,1)}
  @keyframes accin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .ft-nav .mb{width:100%}
  .ft-hint::after{content:"";}
}
.pdet-nav::after,.pp-nav::after{left:50%!important;top:50%!important;width:11px!important;height:11px!important;margin:-5.5px 0 0 -5.5px!important;transform:translateX(-2.5px) rotate(45deg)!important}
.pdet-nav.prev::after,.pp-nav.prev::after{transform:translateX(2.5px) rotate(-135deg)!important}
.pdet-nav::after,.pp-nav::after{transform:translateX(-7.2px) rotate(45deg)!important}
.pdet-nav.prev::after,.pp-nav.prev::after{transform:translateX(1.7px) rotate(-135deg)!important}
.pdet-nav::after,.pp-nav::after{transform:translateX(-4.7px) rotate(45deg)!important}
.pdet-nav.prev::after,.pp-nav.prev::after{transform:translateX(3px) rotate(-135deg)!important}

/* interactive process line on service pages */
.plv{max-width:820px;margin:0 auto;text-align:center}
.plv-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.plv-s{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:99px;border:0;background:#fff;box-shadow:0 12px 22px -16px rgba(90,40,90,.55);font:600 14.5px Poppins;color:var(--text);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.plv-s b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f0e9fb;color:var(--t2,var(--a2));font:700 13px Poppins;transition:background .3s,color .3s}
.plv-s:hover{transform:translateY(-2px)}
.plv-s.on{background:linear-gradient(135deg,var(--t1,var(--a1)),var(--t2,var(--a2)));color:#fff}
.plv-s.on b{background:#fff;color:var(--t2,var(--a2))}
.plv-s.done b{background:var(--t1,var(--a1));color:#fff}
.plv-s:focus-visible{outline:3px solid var(--t2,var(--a2));outline-offset:2px}
.plv-a{width:8px;height:8px;border-top:2.5px solid var(--t2,var(--a2));border-right:2.5px solid var(--t2,var(--a2));transform:rotate(45deg);margin:0 4px;opacity:.7}
.plv-d{margin:16px auto 6px;max-width:560px;font-size:16px;line-height:1.55;min-height:50px;transition:opacity .2s}
.plv-n{font-size:13px;color:var(--muted)}
@media(max-width:600px){.plv-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plv-a{display:none}.plv-s{justify-content:flex-start}}

/* call-to-action tile: calmer spacing above and inside */
.cta{padding:48px 28px!important}
section:has(>.wrap>.cta){padding-top:28px!important;padding-bottom:64px!important}
.cta h2{margin-bottom:12px}.cta .sub{margin-bottom:24px!important}
@media(max-width:700px){.cta{padding:38px 22px!important}}
.ei{line-height:0!important}.ei .gi{display:block}
.fb-grid .ei,.hb-i>i .ei,.v-sig .ei{margin:0!important}
.fb-grid i{display:flex;justify-content:center}

/* 7-day timeline: agreement to live, with a bracket that says 7 days */
.s7{max-width:900px;margin:56px auto 0;padding:28px 30px 22px;border-radius:36px;background:linear-gradient(135deg,#ffe3d3,#efe4ff);box-shadow:0 22px 44px -30px rgba(122,77,255,.6);text-align:center}
.s7-h{font:700 clamp(18px,2.4vw,24px)/1.2 Poppins;margin:0}
.s7-h em{font:800 clamp(30px,4.4vw,40px)/1 Poppins;font-style:normal;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:4px}
.s7-s{font-size:14.5px;color:var(--muted);margin:6px 0 26px}
.s7-track{position:relative;max-width:760px;margin:0 auto}
.s7-line{position:absolute;left:46px;right:46px;top:19px;height:4px;border-radius:4px;background:rgba(122,77,255,.18);overflow:hidden}
.s7-line i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.s7.in .s7-line i{animation:s7fill 2.6s .4s cubic-bezier(.45,.1,.3,1) forwards}
@keyframes s7fill{to{width:100%}}
.s7-nodes{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.s7-d{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;font:700 15px Poppins;color:#6d3bff;box-shadow:0 8px 16px -10px rgba(90,40,90,.6);transition:background .3s,color .3s}
.s7.in .s7-d{animation:s7dot .35s forwards}
.s7.in .s7-d:nth-of-type(2){animation-delay:.9s}.s7.in .s7-d:nth-of-type(3){animation-delay:1.25s}.s7.in .s7-d:nth-of-type(4){animation-delay:1.6s}.s7.in .s7-d:nth-of-type(5){animation-delay:1.95s}.s7.in .s7-d:nth-of-type(6){animation-delay:2.3s}.s7.in .s7-d:nth-of-type(7){animation-delay:2.65s}
@keyframes s7dot{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1);background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}}
.s7-end{display:flex;flex-direction:column;align-items:center;min-width:92px}
.s7-end b{padding:10px 16px;border-radius:99px;background:#fff;font:700 13.5px Poppins;white-space:nowrap;box-shadow:0 8px 16px -10px rgba(90,40,90,.6)}
.s7-live b{color:#1f9d63;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.s7.in .s7-live b{animation:s7live .5s 3.0s cubic-bezier(.3,1.8,.5,1) both}
@keyframes s7live{from{transform:scale(1)}to{transform:scale(1.1);background:#e4f7ec}}
.s7-brace{position:relative;margin:18px 46px 0;height:14px;border:2.5px solid rgba(122,77,255,.45);border-top:0;border-radius:0 0 12px 12px}
.s7-brace span{position:absolute;left:50%;top:5px;transform:translateX(-50%);padding:3px 16px;background:#f5e9f6;border-radius:99px;font:700 13px Poppins;color:#6d3bff;white-space:nowrap}
@media(max-width:600px){
  .s7{padding:24px 16px 20px;margin-top:44px}
  .s7-d{width:30px;height:30px;font-size:13px}
  .s7-end{min-width:0}.s7-end b{padding:8px 10px;font-size:12px}
  .s7-line{left:34px;right:34px;top:13px}
  .s7-brace{margin:16px 34px 0}
}
@media(max-width:600px){
  .s7-h em{display:inline-block;white-space:nowrap;margin-left:0}
  .s7-h{font-size:19px}
  .s7-nodes{gap:2px}
  .s7-d{width:27px;height:27px;font-size:12px;flex:none}
  .s7-end b{padding:7px 9px;font-size:11.5px}
  .s7-line{left:30px;right:30px;top:11px}
  .s7-brace{margin:14px 30px 0}
}

/* repair or replace: one clear path that forks */
.rr{max-width:860px;margin:0 auto}
.rr-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.rr-s{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:26px;background:#fff;box-shadow:0 18px 34px -26px rgba(90,40,90,.55)}
.rr-s b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff;font:700 16px Poppins}
.rr-s h3{font-size:17.5px;margin-bottom:2px}.rr-s p{font-size:14.5px;color:var(--muted)}
.rr-fork{position:relative;height:46px;margin:0 auto;width:50%}
.rr-fork::before{content:"";position:absolute;left:50%;top:0;width:3px;height:22px;margin-left:-1.5px;background:linear-gradient(var(--t1),var(--t2));border-radius:3px}
.rr-fork i{position:absolute;top:22px;height:24px;width:50%;border-top:3px solid var(--t1);border-radius:0}
.rr-fork i:first-child{left:0;border-left:3px solid var(--t1);border-top-left-radius:16px}
.rr-fork i:last-child{right:0;border-right:3px solid var(--t2);border-top-right-radius:16px;border-top-color:var(--t2)}
.rr-out{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rr-o{padding:22px 24px;border-radius:26px;background:#fff;box-shadow:0 18px 34px -26px rgba(90,40,90,.55);text-align:left}
.rr-o span{display:inline-block;font:700 11.5px Poppins;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px;margin-bottom:10px}
.rr-o.ok span{background:#e2f6ec;color:#1f9d63}.rr-o.new span{background:color-mix(in srgb,var(--t1) 18%,#fff);color:var(--t2)}
.rr-o h3{font-size:19px;margin-bottom:4px}.rr-o p{font-size:15px;color:var(--muted)}
@media(max-width:700px){.rr-steps,.rr-out{grid-template-columns:1fr}.rr-fork{width:70%}}
.rr-fork{width:calc(50% + 8px);height:48px}
.rr-fork::before{height:26px}
.rr-fork i{top:26px;height:22px}
.rr-fork i:first-child{left:0}.rr-fork i:last-child{right:0}
.rr-o,.rr-s{height:100%}
@media(max-width:700px){.rr-fork{width:calc(100% - 100px)}.rr-fork i:first-child{left:0}}

/* about: line runs behind the icons, not through them */
.pstrip .ps-i{position:relative;z-index:2;background:#fff}
.pstrip::before{z-index:0}
.pstrip .ps{z-index:1}
.pstrip .ps-i::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--bg,#fffaf5);z-index:-1}
.section-tint .pstrip .ps-i::before,.plain.tint .pstrip .ps-i::before{background:#fff0e6}
/* about: dog + staff card sit a little further left */
@media(min-width:900px){.team{justify-content:flex-start;padding-left:6%}}
.how-sig{margin-top:22px}
@media(min-width:900px){
  .team{padding-left:0!important;justify-content:center!important}
  .wrap.two:has(>.team){grid-template-columns:.8fr 1.2fr!important;gap:30px!important}
}

/* process stages: equal-height buttons with a roomy, even highlight */
.proc .pstrip{align-items:stretch!important;gap:10px!important}
.proc button.ps{padding:16px 12px 18px!important;border-radius:26px!important;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border:1.5px solid transparent;transition:background .3s,border-color .3s,transform .3s}
.proc button.ps:hover,.proc button.ps.on{background:rgba(255,255,255,.7)!important;border-color:rgba(122,77,255,.2)}
.proc button.ps.on{box-shadow:0 18px 34px -26px rgba(90,40,90,.55)}
.proc .pstrip::before,.proc .pstrip::after{top:43px!important}
@media(max-width:900px){
  .proc button.ps{padding:10px 4px 12px!important;border-radius:20px!important}
  .proc .pstrip::before,.proc .pstrip::after{top:33px!important}
}
/* icon circles: keep them white, mask the path with a ring instead of an overlay */
.pstrip .ps-i::before{display:none!important}
.pstrip .ps-i{background:#fff!important;box-shadow:0 0 0 7px #fffaf5,0 14px 26px -14px rgba(90,40,90,.55)!important}
.plain.tint .pstrip .ps-i,.tint .pstrip .ps-i{box-shadow:0 0 0 7px #fff0e6,0 14px 26px -14px rgba(90,40,90,.55)!important}
.proc .ps.on .ps-i{box-shadow:0 0 0 7px #fff0e6,0 0 0 11px rgba(122,77,255,.18),0 16px 28px -14px rgba(90,40,90,.6)!important}

/* what you won't get / what you will */
.wn{max-width:860px;margin:0 auto;display:grid;gap:12px}
.wn-h,.wn-r{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;gap:0}
.wn-h{margin-bottom:2px}
.wn-h span{font:700 12px Poppins;letter-spacing:.14em;text-transform:uppercase;padding:0 6px}
.wn-hn{color:var(--muted)}.wn-hy{color:#1f9d63}
.wn-no,.wn-yes{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px;font:500 16px/1.4 Poppins}
.wn-no{background:rgba(255,255,255,.7);border:1.5px dashed rgba(90,40,90,.22);color:var(--muted)}
.wn-no span{text-decoration:line-through;text-decoration-color:rgba(255,90,95,.55);text-decoration-thickness:2px}
.wn-yes{background:#fff;box-shadow:0 14px 28px -22px rgba(90,40,90,.55);border-left:5px solid #2fbf71;color:var(--text);font-weight:600}
.wn-no i,.wn-yes i{flex:none;position:relative;width:26px;height:26px;border-radius:50%}
.wn-no i{background:#ffe4e4}
.wn-no i::before,.wn-no i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;border-radius:2px;background:#ff5a5f;transform:translate(-50%,-50%) rotate(45deg)}
.wn-no i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.wn-yes i{background:#2fbf71}
.wn-yes i::after{content:"";position:absolute;left:9px;top:5.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.wn-a{align-self:center;justify-self:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));position:relative}
.wn-a::after{content:"";position:absolute;left:8px;top:8px;width:7px;height:7px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:rotate(45deg)}
@media(max-width:700px){
  .wn-h{display:none}
  .wn-r{grid-template-columns:1fr;gap:0;position:relative}
  .wn-no{border-radius:22px 22px 6px 6px}.wn-yes{border-radius:6px 6px 22px 22px}
  .wn-a{margin:-4px 0;z-index:1;transform:rotate(90deg)}
  .wn-no::before{content:"Not this";position:absolute;right:16px;font:700 10.5px Poppins;letter-spacing:.12em;text-transform:uppercase;color:#ff5a5f}
  .wn-no{position:relative}
}
.wn-h,.wn-r{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)!important}
.wn-no,.wn-yes{box-sizing:border-box;width:100%}
.wn-a{width:auto;height:auto;background:none!important;border-radius:0}
.wn-a::after{left:50%;top:50%;width:9px;height:9px;margin:-5px 0 0 -7px;border-top:2.5px solid #b9a9cf;border-right:2.5px solid #b9a9cf;transform:rotate(45deg)}
@media(max-width:700px){.wn-a{margin:2px 0}.wn-a::after{margin:-6px 0 0 -4px;transform:rotate(135deg)}.wn-r{grid-template-columns:1fr!important}}
.wn-h span{font-size:13px;letter-spacing:.1em;padding:0 8px 4px}
.wn-hn{color:#d64550}
.wn-hn::before{content:"\2715  ";font-weight:700}
.wn-hy::before{content:"\2713  ";font-weight:700}
@media(max-width:700px){.wn-h{display:grid!important;grid-template-columns:1fr 1fr!important}.wn-h>span:nth-child(2){display:none}.wn-no::before{content:"Won’t get"!important}.wn-r .wn-yes{position:relative}.wn-r .wn-yes::before{content:"Will get";position:absolute;right:16px;font:700 10.5px Poppins;letter-spacing:.12em;text-transform:uppercase;color:#1f9d63}}
@media(max-width:700px){.wn-h{display:none!important}}
@media(max-width:700px){
  .wn-r .wn-yes{padding-top:30px}
  .wn-r .wn-yes::before{top:10px;right:16px}
  .wn-r .wn-no{padding-right:96px}
}

/* process stages: badge sits inside the highlight, no dead space */
.proc button.ps{padding:30px 12px 20px!important}
.proc .pstrip::before,.proc .pstrip::after{top:62px!important}
.proc .ps p{min-height:0}
@media(max-width:900px){
  .proc button.ps{padding:24px 4px 14px!important}
  .proc .pstrip::before,.proc .pstrip::after{top:47px!important}
}

/* home CTA row matches the hero: side by side, wraps only when it must */
.home-cta{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px!important;margin-top:34px}

/* process: chevrons sit on the dotted path in the gaps, never under the boxes */
@media(min-width:901px){
  .proc .pstrip{gap:24px!important}
  .proc .pstrip::before{left:calc((100% - 96px)/10)!important;right:calc((100% - 96px)/10)!important;z-index:2!important;pointer-events:none}
  .proc .pstrip::after{left:calc((100% - 96px)/10)!important;z-index:2!important;pointer-events:none}
  .proc .ps-i{z-index:3!important}
  .proc .pstrip.p1::after{width:0!important}
  .proc .pstrip.p2::after{width:calc((100% + 24px)/5)!important}
  .proc .pstrip.p3::after{width:calc((100% + 24px)/5*2)!important}
  .proc .pstrip.p4::after{width:calc((100% + 24px)/5*3)!important}
  .proc .pstrip.p5::after{width:calc((100% + 24px)/5*4)!important}
  .proc .pstrip .ps:not(:last-child)::before{right:-22px!important;top:53px!important;width:20px;height:20px;z-index:4}
  .proc .pstrip .ps:not(:last-child)::after{right:-16px!important;top:59px!important;z-index:5}
}
@media(min-width:901px){
  .proc .pstrip .ps,.proc button.ps{z-index:auto!important;position:relative}
  .proc .ps-i{position:relative;z-index:3!important}
}

/* contact: space between the photo and "Prefer to talk?" */
.prose .polaroid.side{margin:6px auto 46px!important}
.prose h2{margin-top:0}
@media(min-width:900px){.prose .polaroid.side{margin:6px auto 50px!important}}

/* hero chat: looks and behaves like a real messaging window */
.hc-head{position:relative}
.hc-back{width:10px;height:10px;border-left:2.5px solid #b9a9cf;border-bottom:2.5px solid #b9a9cf;transform:rotate(45deg);margin:0 4px 0 2px;flex:none}
.hc-day{align-self:center;font:600 11px Poppins;letter-spacing:.08em;color:var(--muted);background:#f4eef9;padding:4px 12px;border-radius:99px}
.hero-chat .msg{position:relative;padding-bottom:22px}
.hero-chat .msg.me{padding-bottom:14px}
.hero-chat .msg small{position:absolute;right:14px;bottom:6px;font:500 10px Poppins;opacity:.7;white-space:nowrap}
.hero-chat .msg.me span small{position:static;display:block;text-align:right;margin-top:4px}
.hero-chat .msg.me{padding-bottom:12px}
.hc-typing{align-self:flex-start;display:flex;gap:5px;padding:13px 16px;border-radius:20px 20px 20px 6px;background:#f4eef9;opacity:0;animation:hctype 1.2s .8s forwards,hchide 0s 2s forwards;height:0;margin:0;overflow:hidden}
.hc-typing i{width:7px;height:7px;border-radius:50%;background:#a995c8;animation:hcdot 1s infinite}
.hc-typing i:nth-child(2){animation-delay:.15s}.hc-typing i:nth-child(3){animation-delay:.3s}
@keyframes hctype{0%{opacity:0;height:0;padding:0 16px}15%,85%{opacity:1;height:40px;padding:13px 16px}100%{opacity:0;height:0;padding:0 16px}}
@keyframes hchide{to{display:none}}
@keyframes hcdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.hc-input{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:8px 8px 8px 18px;border-radius:99px;background:#f4eef9;font-size:13.5px;color:#9a8aa8}
.hc-input i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));position:relative}
.hc-input i::after{content:"";position:absolute;left:11px;top:13px;width:10px;height:10px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:rotate(45deg) translate(-1px,1px)}
.hero-chat .chat{min-height:0}
@media (prefers-reduced-motion:reduce){.hc-typing{display:none}}

/* stats: swipeable on phones, short instead of a tall stack */
.st-dots{display:none}
@media(max-width:760px){
  .stats4,.stats4.s3{display:flex!important;grid-template-columns:none;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 24px 10px;margin:0 -24px!important;max-width:none!important;scrollbar-width:none}
  .stats4::-webkit-scrollbar{display:none}
  .stats4 .st{flex:0 0 82%;scroll-snap-align:center;padding:20px 20px 18px;border-radius:30px 30px 30px 8px;gap:6px}
  .stats4 .st-n{font-size:40px}
  .stats4 .st-n.st-t{font-size:26px}
  .stats4 .st p{font-size:14.5px;line-height:1.5}
  .stats4 .st-src{font-size:12px}
  .st-dots{display:flex;justify-content:center;gap:8px;margin:2px 0 6px}
  .st-dots i{width:8px;height:8px;border-radius:50%;background:#dccdf0;transition:width .3s,background .3s;cursor:pointer}
  .st-dots i.on{width:22px;border-radius:99px;background:linear-gradient(90deg,var(--a1),var(--a2))}
}
.hero2 .hero-copy h1{margin-top:0}
@media(min-width:1000px){.hero2{padding-top:150px}}
.hero-chat .hc-day{opacity:0;animation:fadein .5s forwards}
.hero-chat .msg{opacity:0}
.hc-typing{animation:hctype 1.2s forwards,hchide 0s forwards!important}
@keyframes hchide{to{height:0;padding:0;margin:0;opacity:0}}
.hc-input i::after{left:50%!important;top:50%!important;width:10px!important;height:10px!important;margin:-5px 0 0 -5px!important;transform:translateX(-2.5px) rotate(45deg)!important}

/* ===== one shared chevron, centred by construction (mask, not borders) ===== */
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5L15.5 12L8.5 18.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hc-input i::after,.pp-nav::after,.ba-arr::after,.wn-a::after,.mf-a::after,.ft-b::after,
.proc .pstrip .ps:not(:last-child)::after,.pstrip .ps:not(:last-child)::after{
  content:""!important;position:absolute!important;border:0!important;box-sizing:border-box;
  background:currentColor!important;-webkit-mask:var(--chev) center/100% 100% no-repeat;mask:var(--chev) center/100% 100% no-repeat;
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;margin:0!important;
  width:var(--cs,14px)!important;height:var(--cs,14px)!important;transform:translate(-50%,-50%) var(--rot,rotate(0))!important}
.hc-input i{color:#fff;--cs:18px}
.pp-nav{color:var(--a2);--cs:24px}
.pp-nav.prev{--rot:scaleX(-1)}
.ba-arr{color:#fff;--cs:16px}
.wn-a{color:#b9a9cf;--cs:20px}
.mf-a{color:var(--t2);--cs:18px}
@media(max-width:700px){.ba-arr{transform:none!important;--rot:rotate(90deg)}.wn-a{transform:none!important}.wn-a::after{--rot:rotate(90deg)}.mf-a{transform:none!important}.mf-a::after{--rot:rotate(90deg)}}
/* plain chevron elements */
.hc-back,.plv-a{border:0!important;background:currentColor!important;-webkit-mask:var(--chev) center/100% 100% no-repeat;mask:var(--chev) center/100% 100% no-repeat}
.hc-back{color:#b9a9cf;width:20px!important;height:20px!important;transform:scaleX(-1)!important;margin:0!important}
.plv-a{color:var(--t2,var(--a2));width:16px!important;height:16px!important;margin:0 2px!important;transform:none!important;opacity:.8}
/* tab accordion chevron: points down, flips up when open */
.ft-b{color:#6d3bff}
.ft-b::after{--cs:16px;--rot:rotate(90deg);right:20px!important;left:auto!important;margin:0!important;transform:translateY(-50%) var(--rot)!important;top:50%!important}
.ft-b.on::after,.ft-b[aria-selected="true"]::after{--rot:rotate(-90deg)}
/* process stage chevrons: inside the 20px circle that sits in the gap */
.proc .pstrip .ps:not(:last-child)::before{width:22px!important;height:22px!important;right:-23px!important;top:52px!important}
.proc .pstrip .ps:not(:last-child)::after{color:var(--a2);--cs:14px;left:auto!important;right:-19px!important;top:63px!important;transform:translate(0,-50%)!important;width:14px!important;height:14px!important}
@media(max-width:900px){
  .pstrip .ps:not(:last-child)::before{width:24px!important;height:24px!important}
  .pstrip .ps:not(:last-child)::after{color:var(--a2);--cs:14px;--rot:rotate(90deg);left:50%!important;right:auto!important;bottom:-21px!important;top:auto!important;transform:translateX(-50%) rotate(90deg)!important;width:14px!important;height:14px!important}
}

/* corrections: previous-step arrow, and the About strip arrows */
.pp-nav.prev::after,.pdet-nav.prev::after{transform:translate(-50%,-50%) scaleX(-1)!important}
@media(min-width:901px){
  .pstrip .ps:not(:last-child)::before{content:"";position:absolute;right:-19px!important;top:17px!important;width:20px!important;height:20px!important;border-radius:50%;background:#fff;box-shadow:0 6px 12px -6px rgba(90,40,90,.6);z-index:4}
  .pstrip .ps:not(:last-child)::after{content:""!important;position:absolute!important;right:-16px!important;left:auto!important;top:27px!important;width:14px!important;height:14px!important;transform:translate(0,-50%)!important;color:var(--a2);background:currentColor!important;-webkit-mask:var(--chev) center/100% 100% no-repeat;mask:var(--chev) center/100% 100% no-repeat;border:0!important;z-index:5}
  .proc .pstrip .ps:not(:last-child)::before{right:-23px!important;top:52px!important;width:22px!important;height:22px!important}
  .proc .pstrip .ps:not(:last-child)::after{right:-19px!important;top:63px!important}
}
@media(max-width:900px){
  .pstrip .ps:not(:last-child)::after{bottom:-19px!important}
}
/* path sits exactly through the icon centres */
@media(min-width:901px){
  .proc .pstrip::before,.proc .pstrip::after{top:56.5px!important}
  .proc .pstrip .ps:not(:last-child)::before{top:47px!important}
  .proc .pstrip .ps:not(:last-child)::after{top:58px!important}
  .pstrip:not(.proc .pstrip)::before{top:25.5px!important}
}
@media(max-width:900px){.proc .pstrip::before,.proc .pstrip::after{top:46.5px!important}}

/* hero chat v2: JS-driven arrival, tighter bubbles */
.hero-chat .chat>.hc-off{display:none!important}
.hero-chat .hc-day{opacity:1;animation:none}
.hero-chat .msg{opacity:1;animation:hcpop .5s cubic-bezier(.3,1.5,.5,1) both!important;transform-origin:left bottom;width:fit-content}
.hero-chat .msg.you{transform-origin:right bottom;align-self:flex-end}
@keyframes hcpop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.hero-chat .msg.me{padding:11px 16px 8px}
.hero-chat .msg.me span small{margin-top:2px;font-size:9.5px;line-height:1}
.hero-chat .msg.you{padding:11px 16px 22px}
.hc-typing{display:flex;gap:5px;align-items:center;width:fit-content;height:auto!important;margin:0!important;padding:13px 16px!important;opacity:1!important;animation:hcpop .35s both!important;border-radius:20px 20px 20px 6px;background:#f4eef9;overflow:visible}
.hc-typing.you{align-self:flex-end;border-radius:20px 20px 6px 20px;background:#ffe3dc}
.hc-typing i{width:7px;height:7px;border-radius:50%;background:#a995c8;animation:hcdot 1s infinite}
.hc-typing.you i{background:#f2958c}
.hc-typing i:nth-child(2){animation-delay:.15s}.hc-typing i:nth-child(3){animation-delay:.3s}
/* numbered lists read down the left column, then down the right */
@media(min-width:701px){
  .wrap.two:has(.sv-list.iv-nums) .sv-list.iv-nums{grid-auto-flow:column!important;grid-template-rows:repeat(var(--rows,3),auto)!important}
}

/* AI page: compact card rows instead of a wide empty left column */
.aic-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1040px;margin:0 auto}
.aic{flex:1 1 280px;max-width:330px;display:flex;gap:14px;align-items:flex-start;padding:20px 20px;border-radius:26px;background:#fff;box-shadow:0 16px 30px -24px rgba(90,40,90,.5)}
.aic-grid.c4 .aic{flex:1 1 220px;max-width:250px;flex-direction:column;gap:12px}
.aic-i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.aic-i .ei{margin:0}.aic-i .gi{width:24px;height:24px}
.aic h3{font:700 17px/1.25 Poppins;margin-bottom:4px}
.aic p{font-size:14.5px;line-height:1.5;color:var(--muted)}
.aic-grid.c3 .aic{max-width:330px}
@media(max-width:700px){.aic,.aic-grid.c4 .aic{max-width:none;flex:1 1 100%;flex-direction:row}}
body .plain .wrap>.lgs:only-child .lg-row,.plain .wrap>.lgs:only-child{justify-content:center;text-align:center}

/* startup page hero card: a checklist that completes itself */
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
.v-day .v-count{counter-reset:n var(--n)}
.v-day .v-count::before{content:counter(n) " of 4"}
.svc-vis.in .v-day .v-count{animation:vcount 2.8s .6s steps(4,end) forwards}
@keyframes vcount{from{--n:0}to{--n:4}}
.v-tasks{list-style:none;display:grid;gap:8px;margin:2px 0 14px}
.v-tasks li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#f6f3fb;transition:background .4s}
.v-tasks .vt-i{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#fff;box-shadow:0 6px 12px -8px rgba(90,40,90,.5)}
.v-tasks .vt-i .ei{margin:0}.v-tasks .vt-i .gi{width:18px;height:18px}
.v-tasks b{flex:1;font:600 14.5px Poppins}
.vt-ok{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:2px dashed #d3c6e6;transition:all .3s}
.vt-ok::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0)}
.svc-vis.in .v-tasks li{animation:vtrow .5s calc(.7s + var(--i)*.7s) both}
.svc-vis.in .vt-ok{animation:vtok .45s calc(.9s + var(--i)*.7s) cubic-bezier(.3,1.8,.5,1) forwards}
.svc-vis.in .vt-ok::after{animation:vtick .3s calc(1.05s + var(--i)*.7s) forwards}
@keyframes vtrow{0%{background:#f6f3fb}40%{background:color-mix(in srgb,var(--t1) 20%,#fff);transform:translateX(4px)}100%{background:color-mix(in srgb,var(--t1) 10%,#fff);transform:none}}
@keyframes vtok{0%{transform:scale(.6)}100%{transform:scale(1);background:linear-gradient(135deg,var(--t1),var(--t2));border:2px solid transparent}}
@keyframes vtick{to{transform:rotate(45deg) scale(1)}}
.v-day .v-bar i{width:0}
.svc-vis.in .v-day .v-bar i{animation:vbar 2.8s .7s steps(4,end) forwards}
@keyframes vbar{to{width:100%}}
.v-go{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:12px;border-radius:18px;background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff;opacity:0;transform:scale(.8)}
.v-go span{display:inline-flex}.v-go .ei{margin:0}.v-go .gi{width:22px;height:22px;stroke:#fff}
.v-go b{font:700 15px Poppins}
.svc-vis.in .v-go{animation:vgo .6s 3.7s cubic-bezier(.3,1.8,.5,1) forwards}
.svc-vis.in .v-go span{animation:vrocket 1.2s 4.1s ease-out}
@keyframes vgo{to{opacity:1;transform:none}}
@keyframes vrocket{0%{transform:translate(0,0)}40%{transform:translate(6px,-8px) rotate(8deg)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.v-go{opacity:1;transform:none}.v-day .v-bar i{width:100%}.v-day .v-count::before{content:"4 of 4"}}
/* cards: content always vertically centred, never stranded at the top of a taller tile */
.aic{align-items:center}
.aic-grid.c4 .aic{align-items:flex-start;justify-content:center}
.aic>div{align-self:center}
.aic-grid.c3,.aic-grid.c4{align-items:stretch}

/* ===== ticks: drawn SVG checks, centred by construction ===== */
:root{
 --tick-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.2l3.8 3.8 7.2-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --tick-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.2l3.8 3.8 7.2-8' fill='none' stroke='%236d3bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --tick-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.2l3.8 3.8 7.2-8' fill='none' stroke='%23ff5a5f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* white tick on a gradient circle */
.wf-ticks li::before,
.wrap.two:has(.sv-list.iv-checks) .sv-list.iv-checks li::before{content:""!important;color:transparent!important;font-size:0!important;background-image:var(--tick-w),linear-gradient(135deg,var(--t1,var(--a1)),var(--t2,var(--a2)))!important;background-size:72% 72%,100% 100%!important;background-position:center,center!important;background-repeat:no-repeat!important}
.wf-ticks li::before{width:30px!important;height:30px!important;top:-3px!important;box-shadow:0 6px 12px -6px rgba(122,77,255,.6)}
.wf-ticks li{padding-left:44px!important;min-height:30px;display:flex;align-items:center}
/* tinted circles with a coloured tick */
.sv-list li::before,.m3 li::before,.m2 li::before,.v-list li::before,.v-check li::before,.pdet li::before{content:""!important;color:transparent!important;font-size:0!important;background-image:var(--tick-p)!important;background-size:72% 72%!important;background-position:center!important;background-repeat:no-repeat!important}
.pdet li::before{background-image:var(--tick-c)!important}
.wrap.two:has(.sv-list.iv-pills) .sv-list.iv-pills li::before{background-image:var(--tick-p)!important}
/* timeline in "What's included": line runs exactly through the circle centres */
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li::before{content:""!important;box-sizing:border-box!important;left:6px!important;width:28px!important;height:28px!important;top:50%!important;transform:translateY(-50%)!important;font-size:0!important;color:transparent!important;background-color:#fff!important;background-image:var(--tick-p)!important;background-size:62% 62%!important;background-position:center!important;background-repeat:no-repeat!important;border:3px solid var(--t1)!important}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li.lit::before{background-color:var(--t1)!important;background-image:var(--tick-w)!important;transform:translateY(-50%) scale(1.1)!important}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line::before{left:18.5px!important;width:3px!important}
.sv-list.iv-line::after{left:18.5px!important;width:3px!important}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li{padding-left:58px!important}

/* tiles: content centred, no stranded blank space */
.rr-o,.mm,.wt,.price-pair .pbub,.m3,.m2{display:flex;flex-direction:column;justify-content:center}
.rr-o{align-items:flex-start}
.sv-list.iv-line{position:relative}
.sv-list.iv-line::before,.sv-list.iv-line::after{z-index:0}
.sv-list.iv-line li{position:relative;z-index:1}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li::before{background-size:84% 84%!important;z-index:2}
.wrap.two:has(.sv-list.iv-line) .sv-list.iv-line li.lit::before{background-size:84% 84%!important}

/* FAQ page: search + category tabs, one group at a time */
.fq-bar{max-width:860px;margin:0 auto 26px;display:grid;gap:16px}
.fq-search{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:99px;background:#fff;box-shadow:0 16px 30px -24px rgba(90,40,90,.55);border:1.5px solid transparent;transition:border-color .3s}
.fq-search:focus-within{border-color:var(--a2)}
.fq-sg{flex:none;position:relative;width:18px;height:18px;border:2.5px solid #b9a9cf;border-radius:50%}
.fq-sg::after{content:"";position:absolute;right:-6px;bottom:-5px;width:8px;height:2.5px;border-radius:2px;background:#b9a9cf;transform:rotate(45deg)}
.fq-search input{flex:1;border:0;outline:0;background:none;font:500 16px Inter,Poppins,sans-serif;color:var(--text);min-width:0}
.fq-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fq-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:99px;border:0;background:#fff;box-shadow:0 10px 20px -16px rgba(90,40,90,.55);font:600 14.5px Poppins;color:var(--text);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.fq-tab:hover{transform:translateY(-2px)}
.fq-ti{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f3ecff}
.fq-ti .ei{margin:0}.fq-ti .gi{width:17px;height:17px}
.fq-tab em{font:700 11.5px Poppins;font-style:normal;color:var(--muted);background:#f3ecff;border-radius:99px;padding:2px 8px}
.fq-tab.on{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
.fq-tab.on .fq-ti{background:rgba(255,255,255,.95)}
.fq-tab.on em{background:rgba(255,255,255,.25);color:#fff}
.fq-panel{display:none}
.fq-panel.on{display:block;animation:ppin .4s cubic-bezier(.3,1.2,.5,1)}
body.fq-searching .fq-panel{display:none}
body.fq-searching .fq-panel.has{display:block;animation:none}
body.fq-searching .fq-tabs{opacity:.45}
.fq-gh{display:flex;align-items:center;justify-content:flex-start;gap:12px;font:700 22px/1.2 Poppins;margin:0 0 14px;max-width:860px;margin-left:auto;margin-right:auto}
.fq-gh .fq-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:#ffeadb;flex:none}
.fq-gh .fq-ic .ei{margin:0;display:flex}.fq-gh .fq-ic .gi{width:24px;height:24px}
.fq-gh .fq-t{display:block}
.fq-empty{text-align:center;color:var(--muted);max-width:860px;margin:10px auto 18px}
.fq-empty a{color:var(--a2);text-decoration:underline}
.fq-panels .faq{margin-left:auto;margin-right:auto}
.faq .it[hidden]{display:none}
@media(max-width:640px){.fq-tab{padding:9px 13px 9px 10px;font-size:13.5px}.fq-tab em{display:none}}
.fq-panels .faq,.faq-page .fq-panels .faq{margin-top:0!important}
.fq-bar{margin-bottom:18px}
.fq-panel .fq-gh{margin-top:8px}
body.fq-searching .fq-tab.on{background:#fff;color:var(--text)}
body.fq-searching .fq-tab.on .fq-ti{background:#f3ecff}body.fq-searching .fq-tab.on em{background:#f3ecff;color:var(--muted)}
/* checklist boxes: true squares, aligned to the first line of the question */
.ck{align-items:center}
.ck .box{padding:0!important;width:30px!important;height:30px!important;box-sizing:border-box;margin:0!important;box-shadow:none!important;background:#fff}
.ck input:checked+.box{background:linear-gradient(135deg,#ff5a5f,#7a4dff)!important}
.ck .qtxt{display:block;flex:1;min-width:0}
.ck .box svg{width:18px;height:18px}

/* contact: details as compact cards */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;background:#fff;box-shadow:0 14px 28px -22px rgba(90,40,90,.55);text-decoration:none;color:var(--text);border-bottom:0!important;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;min-width:0}
a.ct-card:hover{transform:translateY(-3px);box-shadow:0 20px 34px -22px rgba(122,77,255,.6)}
.ct-card.wide{grid-column:1/-1}
.ct-i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ffe3d3,#efe4ff)}
.ct-i .ei{margin:0;display:flex}.ct-i .gi{width:22px;height:22px}
.ct-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ct-t small{font:600 10.5px Poppins;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ct-t b{font:600 15px Poppins;color:var(--text);overflow-wrap:anywhere}
@media(max-width:560px){.ct-grid{grid-template-columns:1fr}}

/* contact page tidy */
.cq{position:relative}
.cq input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cf-chips .cq span{display:inline-flex;align-items:center;gap:8px}
.cf-chips .cq span .ei{margin:0}.cf-chips .cq span .gi{width:18px;height:18px}
.cf-chips{gap:8px}
.cq span{padding:9px 15px;font-size:14px}
.cform{gap:12px;padding:28px 26px 26px}
.cf-step{margin-top:10px}
.cf-two{gap:12px}
/* right column: photo and details sit together, vertically centred against the form */
.wrap.two:has(.cform){align-items:center}
.wrap.two:has(.cform) .prose{display:flex;flex-direction:column;align-items:center}
.prose .polaroid.side{width:min(240px,70vw)!important;margin:6px auto 34px!important}
.prose h2{font-size:24px!important;margin:0 0 14px!important;align-self:flex-start}
.ct-grid{width:100%}
.ct-card{padding:12px 14px}
.ct-i{width:38px;height:38px;border-radius:12px}
@media(max-width:900px){.prose h2{align-self:center;text-align:center}}
.cq input{clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;border:0;padding:0;margin:-1px;appearance:none;-webkit-appearance:none}
@media(min-width:900px){
  .wrap.two:has(.cform){align-items:start}
  .wrap.two:has(.cform) .prose{position:sticky;top:110px;padding-top:6px}
}

/* contact details: one tidy panel */
.ct-panel{width:100%;background:#fff;border-radius:26px;box-shadow:0 18px 34px -26px rgba(90,40,90,.55);padding:6px 8px;overflow:hidden}
.ct-row{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:18px;text-decoration:none;color:var(--text);border-bottom:0!important;transition:background .25s}
.ct-row+.ct-row{border-top:1.5px solid #f4eef9;border-radius:0 0 18px 18px}
a.ct-row:hover{background:#faf6ff}
.ct-row .ct-t{flex:1;min-width:0}
.ct-go{flex:none;font:700 12.5px Poppins;color:#6d3bff;background:#f3ecff;padding:7px 14px;border-radius:99px;transition:background .25s,color .25s;white-space:nowrap}
a.ct-row:hover .ct-go{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
.ct-t b{font-size:15px}
@media(max-width:420px){.ct-go{display:none}}
.foot-logo{display:block;width:240px;height:auto;max-width:100%}
@media(max-width:700px){.foot-logo{width:210px}}

/* mobile polish round: free-year band, 7-day strip, steps, arrows, phone frames, menu contacts */
.fb-top{margin:22px 0 0}
.fb-grid{margin-top:2px}
.nf-i{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;display:inline-grid;place-items:center;box-shadow:0 8px 14px -8px rgba(90,40,90,.55)}
.nf-i .gi{width:18px;height:18px}
nav ul .nav-foot a{display:flex;align-items:center;justify-content:center;gap:12px}
.page-hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px}
.shotp .ph{box-sizing:border-box;padding:26px 0 22px;background:#fffcf4}
.shotp .ph:has(img[src*="heating"]){background:#fff}
.shotp .ph img{border-radius:0}
@media(max-width:700px){
  .s7-s{margin:14px 0 28px}
  .s7-nodes{gap:7px}
  .s7-d{width:25px;height:25px;font-size:11.5px}
  .s7-end b{padding:6px 7px;font-size:10.5px}
  .s7-line{left:30px;right:30px;top:10px}
  .vr{gap:44px}
  .vr::after{top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;font-size:15px}
  .wn-a{display:none}
  .wn-r{margin-bottom:6px}
  .proc button.ps:hover,.proc button.ps.on{background:none!important;border-color:transparent!important;box-shadow:none!important}
  .proc .ps.on .ps-i{box-shadow:0 0 0 3px #fff0e6,0 0 0 5px rgba(122,77,255,.5),0 12px 20px -12px rgba(90,40,90,.6)!important}
  .pstrip.four-up{gap:44px!important}
}
@media(max-width:700px){
  .s7{padding:24px 12px 20px}
  .s7-nodes{gap:5px}
  .s7-d{width:22px;height:22px;font-size:10.5px}
  .s7-end b{padding:6px 6px;font-size:10px}
  .s7-line{left:28px;right:28px;top:9px}
}
@media(max-width:700px){.touch{padding-bottom:46px!important}.touch-links+.btn{margin-top:4px}}
nav ul .nav-foot a{width:236px;justify-content:flex-start}
.pstrip:not(.proc .pstrip)::after{display:none!important}
.ct-row,.ct-row+.ct-row{border-radius:18px;border-top:0}
.ct-row+.ct-row{margin-top:6px}
.mm{justify-content:flex-start}
.mm span{align-self:flex-start}
.rr-o,.wt,.price-pair .pbub,.m3,.m2,.mm{justify-content:flex-start}