/* FAFO service-page hero visuals: crafted example UI (not diagrams).
   Example business everywhere: Ironbark Roofing Co. (fictional). Sizes are em of the stage,
   which scales with the figure width (container units). FAFO colours only on chrome + callouts. */
.vx{margin:0;container-type:inline-size;--sh:0 0 0 1px rgba(255,255,255,.1),0 2em 3.4em -1em #000;--g:#1F3A2E;--c:#C8692B;--cr:#F6F1E8;--k:#1A1C19;--st:#F5A524}
.vx-s{position:relative;max-width:40em;height:var(--h,30em);margin-inline:auto;font-size:clamp(10.5px,2.6cqw,14.5px);line-height:1.35}
.vx-s::before{content:"";position:absolute;inset:8% 4% 2% 12%;z-index:0;background:radial-gradient(closest-side,rgba(123,44,255,.34),transparent),radial-gradient(28% 32% at 70% 74%,rgba(0,217,255,.15),transparent)}
.vx-s>*{position:absolute;z-index:1}
.vx-s svg{display:block}
.vx-s i{font-style:normal}
.vx-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;gap:6px 10px;margin-top:18px;font:500 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vx-cap b{font-weight:500;color:var(--ice);border:1px solid var(--violet);border-radius:999px;padding:3px 9px}
/* chrome */
.vx-win{border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.vx-bar{display:flex;align-items:center;gap:.45em;height:2.4em;padding:0 1em;background:#1C1B26;color:#A3A9B6;font-size:.7em}
.vx-bar>i{width:.8em;height:.8em;border-radius:50%;background:#3B3A48}
.vx-url{display:flex;align-items:center;gap:.5em;margin:0 auto;padding:.3em 1.2em;border-radius:999px;background:#2A2936;white-space:nowrap}
.vx-url svg{width:.8em;height:.9em}
.vx-ph{padding:.4em;border-radius:2.1em;background:#09090D;box-shadow:inset 0 0 0 1px #3A3A46,0 0 0 1px rgba(255,255,255,.05),0 2.4em 4em -1em #000}
.vx-scr{position:relative;height:100%;border-radius:2.85em;overflow:hidden;display:flex;flex-direction:column}
.vx-scr::before{content:"";position:absolute;z-index:5;top:1.3em;left:50%;width:6.4em;height:1.9em;margin-left:-3.2em;border-radius:999px;background:#000}
.u{font-size:.6em}
/* FAFO callouts */
.vx-n{z-index:4;display:flex}
.vx-n>span{display:flex;align-items:center;gap:.6em;padding:.4em .9em .4em .4em;border-radius:999px;background:rgba(14,12,26,.9);border:1px solid rgba(123,44,255,.75);box-shadow:0 .8em 2em -.6em #000,0 0 1.4em -.3em rgba(123,44,255,.55);color:var(--ice);font:500 max(10px,.66em)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.vx-n b{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--violet);font-weight:500}
.vx-n::after{content:"";position:absolute;top:50%;left:100%;width:var(--l,2em);height:7px;margin-top:-3.5px;background:radial-gradient(circle,var(--cyan) 2.5px,transparent 3px) 100% 50%/7px 7px no-repeat,linear-gradient(90deg,var(--violet),var(--cyan)) 0 50%/calc(100% - 3px) 1px no-repeat}
.vx-n.l::after{left:auto;right:100%;transform:scaleX(-1)}
.vx-n.d::after{top:100%;left:1.3em;width:7px;height:var(--l);margin:0;background:radial-gradient(circle,var(--cyan) 2.5px,transparent 3px) 50% 100%/7px 7px no-repeat,linear-gradient(var(--violet),var(--cyan)) 50% 0/1px calc(100% - 3px) no-repeat}
/* Ironbark site */
.ib{background:var(--cr);color:var(--k)}
.ib-nav{display:flex;align-items:center;gap:1.6em;padding:1.1em 1.8em;border-bottom:1px solid #E4DCCD}
.ib-logo{display:flex;align-items:center;gap:.45em;font:800 1.3em/.9 var(--display);font-stretch:70%;letter-spacing:.05em;color:var(--g)}
.ib-logo svg{width:1.6em;height:1.3em;color:var(--c)}
.ib-logo small{display:block;font-size:.48em;letter-spacing:.3em;color:var(--c)}
.ib-links{display:flex;gap:1.5em;margin-left:auto;color:#5A6058}
.ib-call{padding:.6em 1em;border-radius:6px;background:var(--g);color:#fff;font-weight:600}
.ib-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6em;padding:2em 1.8em}
.ib-eye{font-weight:600;font-size:.8em;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.ib-h{display:block;margin:.45em 0;font:800 2.9em/.92 var(--display);font-stretch:68%;text-transform:uppercase;color:var(--g)}
.ib p{margin:0 0 1.3em;color:#4A5048;font-size:1.05em}
.ib-cta{position:relative;display:inline-block;padding:.8em 1.1em;margin:0 .4em .4em 0;border-radius:6px;background:var(--c);color:#fff;font-weight:600}
.ib-cta.o{background:none;box-shadow:inset 0 0 0 1.5px var(--g);color:var(--g)}
.ib-pic{position:relative;min-height:20em;border-radius:10px;overflow:hidden}
.ib-pic>svg,.ib-mp>svg{position:absolute;inset:0;width:100%;height:100%}
.ib-bk{position:absolute;left:1em;right:1em;bottom:1em;padding:1em;border-radius:10px;background:#fff;box-shadow:0 1em 2em -1em rgba(0,0,0,.6)}
.ib-bk>b{display:flex;justify-content:space-between;margin-bottom:.7em;color:var(--g)}
.ib-bk>b small{color:#6B7068;font-weight:400}
.ib-d,.ib-t{display:flex;gap:.4em;margin-bottom:.5em}
.ib-d i,.ib-t i{flex:1;padding:.45em 0;border:1px solid #E2DACB;border-radius:6px;text-align:center;color:#5A6058}
.ib-d b{display:block;font-size:1.3em;color:var(--k)}
.ib .on{background:var(--g);border-color:var(--g);color:#fff}
.ib .on b{color:#fff}
.ib-go{position:relative;display:block;padding:.75em;border-radius:6px;background:var(--c);color:#fff;font-weight:600;text-align:center}
.ib-tr{display:flex;gap:1.8em;padding:1em 1.8em;background:#EEE6D7;color:var(--g);font-weight:600}
.ib-tr span::before{content:"✓ ";color:var(--c)}
.ib-m .ib-nav{justify-content:space-between;padding:3.4em 1.4em .9em}
.ib-bg{width:1.6em;height:1em;background:linear-gradient(var(--g) 0 0) 0 0/100% 2px no-repeat,linear-gradient(var(--g) 0 0) 0 50%/100% 2px no-repeat,linear-gradient(var(--g) 0 0) 0 100%/70% 2px no-repeat}
.ib-mp{position:relative;height:11em}
.ib-m .ib-c{padding:1.3em 1.4em}
.ib-m .ib-h{font-size:2.3em}
.ib-sk{display:flex;gap:.5em;margin-top:auto;padding:.9em 1em 1.7em;background:#fff;box-shadow:0 -.5em 1.4em rgba(0,0,0,.1)}
.ib-sk i{position:relative;flex:1;padding:.9em 0;border-radius:6px;background:var(--g);color:#fff;font-weight:600;text-align:center}
.ib-sk i+i{background:var(--c)}
.pl::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--c);opacity:0}
.vx--web{--h:31em}
.vx--web .vx-win{left:0;top:1.6em;width:31em}
.vx--web .ib-bk{right:7.2em}
.vx--web .vx-ph{right:0;top:8em;width:11.4em;height:23em}
.vx--web .n1{left:8em;top:-.6em;--l:6.6em}
.vx--web .n2{left:15.4em;top:8.1em;--l:0}
.vx--web .n3{right:12.4em;top:28em;--l:1.6em}
/* search */
.se{background:#fff;color:#1E2430}
.se-b{padding:1.4em 1.8em 1.6em}
.se-q{display:flex;align-items:center;gap:.7em;padding:.75em 1.2em;border-radius:999px;box-shadow:0 .15em .7em rgba(20,30,60,.14),inset 0 0 0 1px #E3E6EE;font-size:1.15em}
.se-q svg{width:1.1em;height:1.1em;color:#6B7280}
.se-tb{display:flex;gap:1.7em;margin:.9em .4em 1.1em;color:#6B7280;border-bottom:1px solid #ECEEF3}
.se-tb span{padding-bottom:.55em}
.se-tb .on{color:#1E2430;font-weight:600;box-shadow:inset 0 -2px #4338CA}
.se-ai{padding:1.1em 1.3em;border:1.5px solid transparent;border-radius:12px;background:linear-gradient(#F7F6FF,#F7F6FF) padding-box,linear-gradient(120deg,#8B5CF6,#06B6D4) border-box}
.se-ah{display:flex;align-items:center;gap:.5em;margin-bottom:.55em;color:#4338CA;font-weight:600}
.se-ah svg{width:1.2em;height:1.2em}
.se-ai p{margin:0 0 .9em;font-size:1.08em;line-height:1.5}
.se-ai mark{padding:0 .2em;border-radius:3px;background:#E6E0FF;color:inherit;font-weight:600}
.se-ai sup{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#E3E6EE;font-size:.7em;line-height:1}
.se-src{display:flex;flex-wrap:wrap;gap:.6em}
.se-src span,.se-u{display:flex;align-items:center;gap:.5em}
.se-src span{padding:.35em .8em .35em .35em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #DAD5F5;font-size:.92em}
.fv{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--g);color:#fff;font:800 .8em/1 var(--display);font-stretch:70%}
.fv.b{background:#64748B}
.se-r{margin-top:1.2em}
.se-u{color:#4B5563;font-size:.92em}
.se-r b{display:block;margin:.3em 0 .2em;color:#2B3FBF;font-size:1.25em;font-weight:500}
.se-r p{margin:0;color:#4B5563}
.mp{width:17.5em;border-radius:14px;overflow:hidden;background:#fff;color:#1E2430;box-shadow:var(--sh)}
.mp-m{height:6.2em}
.mp-m svg{width:100%;height:100%}
.mp-l{display:grid;gap:.25em;padding:1em 1.3em;border-top:1px solid #ECEEF3;color:#4B5563}
.mp-l b{color:#1E2430;font-size:1.15em}
.mp-l em{font-style:normal;color:#1E2430}
.st{color:var(--st);letter-spacing:.05em}
.st s{color:#D6D3CC;text-decoration:none}
.ok{color:#15803D}
.mp-a{display:flex;gap:.5em;margin-top:.4em}
.mp-a i{padding:.4em .9em;border-radius:999px;box-shadow:inset 0 0 0 1px #D9DEE7;color:#2B3FBF;font-weight:600}
.mp-a i:first-child{background:#2B3FBF;color:#fff;box-shadow:none}
.mp-l.f{-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.vx--seo{--h:30em}
.vx--seo .vx-win{left:0;top:0;width:30em}
.vx--seo .mp{right:0;bottom:0}
.vx--seo .n1{left:18em;top:4.9em;--l:2em}
.vx--seo .n2{right:18.9em;top:21.3em;--l:1.4em}
/* SMS phone */
.sm{background:#0E0F13;color:#ECEDEF}
.sm-tp{display:grid;justify-items:center;gap:.2em;padding:3.4em 1em .9em;background:#17181E;border-bottom:1px solid #24252D}
.sm-tp small{color:#8C8F99}
.av{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--a,var(--g));color:#fff;font-weight:600;font-size:1em}
.sm-tp .av{width:3.6em;height:3.6em;font:800 1em/1 var(--display);font-stretch:70%;background:linear-gradient(140deg,#3A6B55,var(--g))}
.sm-th{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.4em;padding:1em .9em .6em;overflow:hidden}
.sm-th>*{max-width:82%;padding:.65em .95em;border-radius:1.2em;font-size:1.05em}
.sm-i{align-self:flex-start;background:#25262E;border-bottom-left-radius:.4em}
.sm-o{align-self:flex-end;background:#1E7A5C;border-bottom-right-radius:.4em}
.sm-ts{align-self:center;padding:.3em 0;color:#8C8F99;font-size:.88em}
.sm-x{align-self:center;display:flex;gap:.45em;align-items:center;background:#1A1B21;color:#FF8A99;font-size:.92em}
.sm-x svg{width:1.1em;height:1.1em}
.sm-k{display:flex;gap:.8em;align-items:center;background:var(--cr);color:var(--k)}
.sm-k b{display:block;color:var(--g)}
.cal{display:grid;place-items:center;flex:none;width:2.8em;padding:.3em 0;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #E2DACB;color:var(--c);font-size:.8em;font-weight:600;line-height:1.1}
.cal b{color:var(--k);font-size:1.6em}
.sm-in{margin:.2em .9em 1.6em;padding:.7em 1.1em;border-radius:999px;box-shadow:inset 0 0 0 1px #2A2B33;color:#6B6E78}
.crm{width:16em;border-radius:14px;overflow:hidden;background:#fff;color:#1F2430;box-shadow:var(--sh)}
.crm-h{display:flex;justify-content:space-between;padding:1em 1.2em;border-bottom:1px solid #EDEFF3;color:#6B7280}
.crm-h b{color:#1F2430}
.crm-g{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:1em 1.2em;background:#F6F7F9}
.crm-g small{display:block;margin-bottom:.5em;color:#6B7280;font-size:.85em;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.crm-g span{display:block;margin-bottom:.45em;padding:.55em .6em;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #E5E7EB;font-size:.9em}
.crm-g span i{display:block;color:#6B7280}
.crm-g .on{box-shadow:0 0 0 1.5px var(--c),0 .6em 1.2em -.6em rgba(200,105,43,.7)}
.crm-f{display:flex;justify-content:space-between;padding:.9em 1.2em;color:#6B7280}
.crm-f b{color:#15803D}
.vx--auto{--h:31em}
.vx--auto .vx-ph{left:3.5em;top:0;width:15.4em;height:31em}
.vx--auto .crm{right:0;top:13.4em}
.vx--auto .n1{left:20.4em;top:10.4em;--l:5.4em}
.vx--auto .n2{left:20.4em;top:25em;--l:4.6em}
/* reviews */
.rv,.rv-c{color:#1F2430}
.rv{width:28em;border-radius:14px;overflow:hidden;background:#FBFAF7;box-shadow:var(--sh)}
.rv-h{display:flex;align-items:center;gap:.7em;padding:1em 1.4em;border-bottom:1px solid #ECE8DF}
.rv-h .fv{width:2.2em;height:2.2em;font-size:1em}
.rv-h>span:last-child{margin-left:auto;color:#6B7280}
.rv-h em{font-style:normal;font-weight:600;color:#1F2430}
.rv-c{margin:1em 1.4em;padding:1.1em 1.2em;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #ECE8DF,0 .5em 1.2em -.8em rgba(0,0,0,.25)}
.rv-w{display:flex;align-items:center;gap:.6em}
.rv-w small{margin-left:auto;color:#6B7280}
.rv-c>p{margin:.7em 0;color:#374151;line-height:1.45}
.rv-r{padding:.8em 1em;border-left:3px solid var(--c);border-radius:0 8px 8px 0;background:#F6F1E8}
.rv-r p{margin:.3em 0 .6em;color:#374151}
.rv-t{color:#15803D;font-weight:600;font-size:.88em;letter-spacing:.06em;text-transform:uppercase}
.rv-fl{padding:.2em .6em;border-radius:999px;background:#FDECEC;color:#B42318;font-size:.85em;font-weight:600}
.rv-bt{display:flex;gap:.5em}
.rv-bt i{padding:.45em .9em;border-radius:6px;box-shadow:inset 0 0 0 1px #D6D0C4;font-weight:600;color:var(--g)}
.rv-bt .on{background:var(--g);color:#fff;box-shadow:none}
.tst{display:flex;gap:.8em;align-items:flex-start;width:19em;padding:1em 1.1em;border-radius:14px;background:rgba(32,31,44,.94);color:#ECEDEF;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1.6em 3em -1em #000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tst-i{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:9px;background:#1E7A5C}
.tst-i svg{width:1.3em;height:1.3em}
.tst b{display:block}
.tst small{color:#A3A9B6;font-size:.86em}
.tst q{display:block;margin-top:.4em;color:#C9CDD6;font-size:.92em}
.vx--rep{--h:29.5em}
.vx--rep .rv{left:0;top:5.4em;width:25.4em}
.vx--rep .tst{right:0;top:0}
.vx--rep .n1{right:0;top:15.4em;--l:1em}
.vx--rep .n2{right:20.4em;top:1.5em;--l:1.4em}
/* services overview */
.vx--svc{--h:29.5em}
.vx--svc .f1{left:0;top:.6em;width:24em}
.vx--svc .ib-hero{grid-template-columns:1fr 1fr}
.vx--svc .f2 .u,.vx--svc .f3 .u,.vx--svc .f4 .u{font-size:.68em}
.vx--svc .ib-pic{min-height:13em}
.vx--svc .f2{right:0;top:4em;width:16.5em}
.vx--svc .f3{left:1.6em;top:19em;width:15em}
.vx--svc .f4{right:.4em;top:16.8em;width:17em}
.f2 .se,.f3 .sm,.f4 .rv-c{border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.f2 .se-b{padding:1.2em}
.f3 .sm-th{padding:1.2em}
.f4 .rv-c{margin:0}
.vx-k{position:absolute;z-index:2;top:-.85em;left:1.2em;padding:.4em .8em;border-radius:999px;background:var(--void);border:1px solid rgba(123,44,255,.8);color:var(--ice);font:500 max(10px,.6em)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
/* Social media page: content calendar */
.sc{width:27em;border-radius:14px;overflow:hidden;background:#FBFAF7;color:#1F2430;box-shadow:var(--sh)}
.sc-h{display:flex;align-items:center;gap:.7em;padding:1em 1.4em;border-bottom:1px solid #ECE8DF}
.sc-h .fv{width:2.2em;height:2.2em;font-size:1em;background:#3B2A1E;color:#F3C77B}
.sc-h>span:last-child{margin-left:auto;color:#6B7280;font-size:.9em}
.sc-g{display:grid;gap:.55em;padding:1em 1.2em 1.2em}
.sc-d{display:grid;grid-template-columns:2.6em 1fr;align-items:center;gap:.6em}
.sc-d small{font-weight:600;color:#6B7280;letter-spacing:.06em;text-transform:uppercase;font-size:.8em}
.sc-p{display:flex;align-items:center;gap:.6em;padding:.6em .8em;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #ECE8DF;font-weight:500;font-size:.95em;min-width:0}
.sc-p em{flex:none;font-style:normal;padding:.2em .55em;border-radius:6px;font-size:.78em;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.sc-p--photo em{background:#FDEBD3;color:#8A4B0F}.sc-p--story em{background:#E3F1EC;color:#1E6B53}.sc-p--reel em{background:#EDE4FB;color:#5B2AA6}
.sc-p i{margin-left:auto;flex:none;color:#15803D;font-size:.8em;font-weight:600}
.sc-p i.wait{color:#B45309}
.vx--soc{--h:28.5em}
.vx--soc .sc{left:0;top:5.2em}
.vx--soc .tst{right:0;top:0}
.vx--soc .n1{right:0;top:22.4em;--l:1.2em}
.vx--soc .n2{right:20.4em;top:1.5em;--l:1.4em}
/* Video page: edit window + exports */
.vd{width:29em;border-radius:14px;overflow:hidden;background:#14131C;color:#D9DCE3;box-shadow:var(--sh)}
.vd-f{position:relative;aspect-ratio:16/9;overflow:hidden}
.vd-f svg{width:100%;height:100%}
.vd-cc{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);padding:.25em .6em;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font-weight:600;white-space:nowrap;font-size:.95em}
.vd-rec{position:absolute;top:.8em;right:.9em;display:flex;align-items:center;gap:.45em;padding:.25em .6em;border-radius:5px;background:rgba(0,0,0,.55);font:500 .8em/1 var(--mono);color:#fff}
.vd-rec i{width:.6em;height:.6em;border-radius:50%;background:#EF4444}
.vd-tl{position:relative;padding:.8em .9em 1em;display:grid;gap:.45em;background:#1A1924;border-top:1px solid #2A2936}
.vd-tr,.vd-au{display:flex;gap:2px}
.vd-tr span{flex:0 0 var(--w);min-width:0;padding:.55em .5em;border-radius:4px;background:linear-gradient(#3B2E6E,#2C2457);box-shadow:inset 0 0 0 1px rgba(167,139,250,.35);font-size:.72em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#E6E0FF}
.vd-au span{flex:1;padding:.4em .5em;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(0,217,255,.35) 0 2px,transparent 2px 5px),#16313A;font-size:.68em;color:#BFF4FF}
.vd-ph{position:absolute;top:.4em;bottom:.4em;left:var(--x);width:2px;background:#F5A524;box-shadow:0 0 6px #F5A524}
.vd-out{display:grid;gap:.55em;width:17.5em;padding:1em 1.1em;border-radius:14px;background:rgba(32,31,44,.96);color:#ECEDEF;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1.6em 3em -1em #000;font-size:.92em}
.vd-out b{font:500 .78em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vd-out span{display:flex;align-items:center;gap:.7em}
.vd-out i{flex:none;display:block;border:1.5px solid var(--cyan);border-radius:2px}
.vd-out .r169{width:1.6em;height:.9em}.vd-out .r916{width:.62em;height:1.1em;margin-inline:.49em}.vd-out .r11{width:1em;height:1em;margin-inline:.3em}.vd-out .r169.sm{width:1.2em;height:.68em;margin-inline:.2em}
.vx--vid{--h:33em}
.vx--vid .vd{left:0;top:2.6em;width:27.5em}
.vx--vid .vd-out{right:0;top:21.4em;width:16.5em}
.vx--vid .n1{right:0;top:18.2em;--l:0}
.vx--vid .n1::after{display:none}
.vx--vid .n2{right:0;top:0;--l:0}
.vx--vid .n2::after{display:none}
/* phones: recompose */
@container (max-width:440px){
 .vx--web .vx-s{--h:27em}.vx--web .vx-win{width:27em}.vx--web .ib-links,.vx--web .ib-tr,.vx--web .vx-win .ib-bk{display:none}.vx--web .vx-ph{top:7em;width:11em;height:20em}.vx--web .n2{display:none}.vx--web .n1{top:-1.4em}.vx--web .n3{right:12.3em;top:24.1em}
 .vx--seo .vx-s{--h:31em}.vx--seo .vx-win{width:100%}.vx--seo .se-r{display:none}.vx--seo .mp{left:5%;right:5%;width:auto}.vx--seo .mp-l.f{display:none}.vx--seo .n1{left:auto;right:.3em;top:5.2em}.vx--seo .n2{display:none}
 .vx--auto .vx-ph{left:0}.vx--auto .crm{top:auto;bottom:1em;right:0;width:14.6em}.vx--auto .crm-g>div:last-child{display:none}.vx--auto .crm-g{grid-template-columns:1fr 1fr}.vx--auto .n1{left:auto;right:0;top:10.3em;--l:4em}.vx--auto .n2{display:none}
 .vx--rep .vx-s{--h:28em}.vx--rep .rv{width:100%;top:5.6em}.vx--rep .tst{left:6%;right:6%;width:auto}.vx--rep .n1{top:25.8em;right:.6em;--l:0}.vx--rep .n2{display:none}
 .vx--svc .vx-s{--h:36.5em}.vx--svc .f1{width:90%}.vx--svc .f2{top:13em;width:16em}.vx--svc .f3{left:0;top:19.6em}.vx--svc .f4{width:15.5em;top:25.4em;right:0}
 .vx--soc .vx-s{--h:30em}.vx--soc .sc{width:100%;top:5.8em}.vx--soc .tst{left:6%;right:6%;width:auto}.vx--soc .n1{top:27.6em;right:.6em;--l:0}.vx--soc .n1::after{display:none}.vx--soc .n2{display:none}
 .vx--vid .vx-s{--h:31em}.vx--vid .vd{width:100%;top:2.8em}.vx--vid .vd-out{left:8%;right:8%;width:auto;top:auto;bottom:0}.vx--vid .n1{display:none}
 .vx-cap{font-size:.66rem;letter-spacing:.08em}
}
@media (prefers-reduced-motion:no-preference){
 .vi{animation:vxi .9s var(--ease-out) both;animation-delay:calc(var(--d,0)*1s)}
 .vx-n{animation:vxi .7s var(--ease-out) both;animation-delay:calc(var(--d,1.3)*1s)}
 .pl::after{animation:vxr 2.4s 2s ease-out infinite}
 @keyframes vxi{from{opacity:0;transform:translateY(14px)}}
 @keyframes vxr{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25,1.6)}}
}
/* code editor figure (SEO page) */
.vx-code{margin:0;border-radius:14px;overflow:hidden;background:#11101A;box-shadow:0 0 0 1px var(--line),0 2em 3.4em -1.6em #000}
.vx-code .vx-bar{font-size:.72rem;height:36px}
.vx-code .vx-url{margin:0 0 0 1em;border-radius:6px 6px 0 0;align-self:flex-end;padding:.6em 1.1em;background:#11101A;color:var(--ice)}
.vx-code pre{margin:0;padding:16px 16px 16px 0;overflow-x:auto;font:400 .78rem/1.75 var(--mono);color:var(--steel);counter-reset:ln}
.vx-code pre span.l{display:block;counter-increment:ln}
.vx-code pre span.l::before{content:counter(ln);display:inline-block;width:3.2em;padding-right:1.2em;text-align:right;color:#4A4D5E}
.vx-code .k{color:var(--cyan)}.vx-code .s{color:#F2C9A0}.vx-code .t{color:#A78BFA}.vx-code .m{color:var(--muted)}
.vx-code figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);background:#16141F;color:var(--muted);font-size:.82rem}
.vx-code figcaption b{color:var(--ok);font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vx-code figcaption b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
/* services hero: text + visual side by side on wide screens */
@media (min-width:1080px){
 .page-hero .wrap:has(>.vx){grid-template-columns:minmax(0,1fr) minmax(0,470px);column-gap:56px;align-items:center}
 .page-hero .wrap:has(>.vx)>:not(.vx){grid-column:1}
 .page-hero .wrap:has(>.vx)>.vx{grid-column:2;grid-row:1/span 4}
 .page-hero .wrap:has(>.vx) h1{font-size:clamp(2.6rem,1rem + 4.2vw,4.4rem)}
}
.page-hero .wrap>.vx{margin-top:28px}
@media (min-width:1080px){.page-hero .wrap>.vx{margin-top:0}}