@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_home/fonts/inter-latin-variable.3100e775.woff2) format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
body{margin:0;background:#FDFDFD}
.page{font:400 16px/1.35 Inter,sans-serif;letter-spacing:-.32px;color:#535862;background:#FDFDFD;width:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:#181D27;text-decoration:none;transition:color .3s ease}a:hover{color:#7A5AF8}
.container{max-width:1312px;margin:0 auto;padding:0 16px;box-sizing:border-box;position:relative}
.h1{font:500 80px/1.1 Inter,sans-serif;letter-spacing:-4px;color:#000;margin:0}
.h2{font:500 48px/1.1 Inter,sans-serif;letter-spacing:-2.4px;color:#000;margin:0}
.h3{font:500 24px/1.25 Inter,sans-serif;letter-spacing:-.96px;color:#000;margin:0}
.h4{font:500 18px/1.35 Inter,sans-serif;letter-spacing:-.36px;color:#181D27;margin:0}
.lead{font-size:18px;line-height:1.35;letter-spacing:-.36px;color:#535862;margin:0}
.txt{font-size:16px;line-height:1.35;letter-spacing:-.32px;color:#535862;margin:0}
.hl{color:#7A5AF8}
.sub-box{display:inline-block;padding:7px 16px;border-radius:8px;background:#EBE9FE;color:#3E1C96;font:500 14px/1.3 Inter,sans-serif;letter-spacing:-.28px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:12px;border:4px solid #E9EAEB;background:#7A5AF8;color:#fff !important;font:500 16px/1.35 Inter,sans-serif;letter-spacing:-.32px;cursor:pointer;transition:background .3s ease;box-sizing:border-box}
.btn:hover{background:#181D27}
.btn-t{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:4px solid transparent;border-radius:12px;color:#181D27 !important;font:500 16px/1.35 Inter,sans-serif;letter-spacing:-.32px}
.btn-t:hover{color:#7A5AF8 !important}
.glossy::before{content:'';position:absolute;top:0;left:-200%;width:200%;height:100%;transform:skewX(-20deg);background-image:linear-gradient(to right,transparent,rgba(255,255,255,.35),transparent);z-index:1;pointer-events:none}
.glossy:hover::before{animation:pxl_btn_shine 1.8s ease .1s}
@keyframes pxl_btn_shine{100%{left:200%}}
.cb{position:absolute;left:0;right:0;height:2px;overflow:hidden;pointer-events:none;background:linear-gradient(90deg,#FDFDFD 0%,rgba(253,253,253,0) 50%,#FDFDFD 100%),repeating-linear-gradient(90deg,#E9EAEB 0 12px,transparent 12px 24px)}
.cb::after{content:'';position:absolute;top:0;width:64px;height:2px;background:linear-gradient(90deg,#7A5AF8 -51.04%,#f7f8f8 100%)}
.cb.top::after{left:0;transform:scaleX(-1);animation:line_running_top 10s infinite;will-change:left}
.cb.bottom::after{right:0;animation:line_running_bottom 10s infinite;will-change:right}
@keyframes line_running_top{0%{left:0}100%{left:100%}}
@keyframes line_running_bottom{0%{right:0}100%{right:100%}}
.glowwrap{isolation:isolate;position:relative}
.glowbox{position:relative;background:#fff;border-radius:16px}
.glowbox::before{content:'';position:absolute;width:calc(100% - 28px);height:calc(100% - 28px);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:16px;background:linear-gradient(299deg,rgba(173,157,255,.88) 0%,rgba(158,229,255,.88) 49.19%,rgba(220,160,255,.88) 98.39%);filter:blur(28px);z-index:-1;pointer-events:none}
.tcard{border:1px solid #D5D7DA;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:24px;transition:all .3s ease;box-sizing:border-box}
.tcard:hover,.tcard.on{border-color:transparent;background:#fff;box-shadow:0 4px 16px 0 rgba(24,29,39,.12)}
.tcard.dim{opacity:.6}
.ai-lg{display:block;width:26px;height:26px;border-radius:7px;object-fit:contain}
.ai-cb{top:-80px;left:16px;right:16px}@media (max-width:1024px){.ai-cb{top:-55px}}@media (max-width:767px){.ai-cb{top:-40px}}
.mq-cb{top:-70px;left:16px;right:16px}@media (max-width:1024px){.mq-cb{top:-48px}}@media (max-width:767px){.mq-cb{top:-36px}}
.hv{position:relative;max-width:1180px;margin:0 auto;border-radius:32px;overflow:hidden;aspect-ratio:1920/1156;background:#F5F3FF;border:1px solid #E9EAEB}.hv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}@media (max-width:640px){.hv{border-radius:16px;aspect-ratio:1062/1080}.hv-v{object-position:left center}}
@media (min-width:768px){.ai-cards .ai-g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.navlinks{align-items:center;gap:4px !important}.dn{position:relative}.navbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;font:500 16px/1 Inter,sans-serif;letter-spacing:-.32px;color:#181D27;border-radius:10px;cursor:pointer}.navbtn .dn-cv{transition:transform .2s ease;color:#717680}.dn:hover .navbtn,.dn:focus-within .navbtn{background:#F5F3FF;color:#3E1C96}.dn:hover .dn-cv,.dn:focus-within .dn-cv{transform:rotate(180deg)}.drop{position:absolute;top:calc(100% + 12px);left:0;z-index:60;background:#fff;border:1px solid #E9EAEB;border-radius:18px;box-shadow:0 18px 50px -20px rgba(24,29,39,.28),0 6px 16px -10px rgba(24,29,39,.16);padding:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none;text-align:left}.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}.dn:hover .drop,.dn:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.dn-r{left:auto;right:0}.dn-wide{width:600px}.dn-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.dn-g2{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:340px}.dn-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;text-decoration:none;color:#181D27;transition:background .15s}.dn-i:hover,.dn-w:hover{background:#F5F3FF}.dn-i b{font:500 14.5px/1.2 Inter,sans-serif;white-space:nowrap}.dn-ic{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E9EAEB;overflow:hidden;box-sizing:border-box}.dn-ic img{display:block}.dn-rl{padding:10px 12px}.dn-made{width:336px;padding:8px}.dn-w{display:flex;gap:13px;padding:12px;border-radius:12px;text-decoration:none;color:#181D27}.dn-w b{display:block;font:600 15px/1.3 Inter,sans-serif}.dn-w em{display:block;font-style:normal;font-size:13px;color:#535862;line-height:1.4;margin-top:2px}.dn-wic{flex:none;width:40px;height:40px;border-radius:11px;background:#F5F3FF;color:#7A5AF8;border:1px solid #EBE9FE;display:flex;align-items:center;justify-content:center}.mmenu .md{border-radius:8px}.mmenu .md summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 12px;border-radius:8px;font:500 16px/1.35 Inter,sans-serif;color:#181D27;cursor:pointer}.mmenu .md summary::-webkit-details-marker{display:none}.mmenu .md summary:hover{background:#F5F5F5}.mmenu .md[open] summary{color:#3E1C96}.mmenu .md[open] summary span{transform:rotate(180deg)}.md-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:4px 4px 10px}.md-g.md-1{grid-template-columns:minmax(0,1fr)}.md-g .dn-i b{white-space:normal;font-size:14px}.mmenu{max-height:calc(100vh - 140px);overflow-y:auto}
.sfoot{margin-top:160px;background:#0E1120;color:#C4C7D4;padding:88px 0 40px;letter-spacing:normal}.sf-grid{display:grid;grid-template-columns:repeat(7,auto);justify-content:space-between;gap:40px 24px}.sf-col a{white-space:nowrap}.sf-col{display:flex;flex-direction:column;gap:14px;min-width:0}.sf-col b{font:700 15px/1.3 Inter,sans-serif;color:#fff;margin-bottom:10px}.sf-col a{font:400 15px/1.4 Inter,sans-serif;color:#C4C7D4;text-decoration:none;transition:color .2s ease}.sf-col a:hover{color:#fff}.sf-bottom{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:56px}.sf-brand{max-width:540px}.sf-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 21px/1 Inter,sans-serif;letter-spacing:-.5px;color:#fff}.sf-brand p{margin:20px 0 0;font:400 15px/1.6 Inter,sans-serif;color:#C4C7D4}.sf-socs{display:flex;gap:10px}.sf-soc{width:38px;height:38px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}.sf-soc svg{display:block;width:20px;height:20px}.sf-soc:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.35)}.sf-copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#8A8FA3}.sf-legal{display:flex;gap:20px}.sf-legal a{color:#8A8FA3;text-decoration:none}.sf-legal a:hover{color:#fff}@media (max-width:1024px){.sfoot{margin-top:100px;padding:64px 0 32px}.sf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:767px){.sf-col a{white-space:normal}.sfoot{margin-top:72px;padding:48px 0 28px}.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}.sf-col{gap:12px}.sf-col a,.sf-col b{font-size:14px}.sf-bottom{flex-direction:column;align-items:flex-start;margin-top:40px}.sf-copy{flex-direction:column}}
.tcard.wc{cursor:default}.tcard.wc .tag{font-size:16px}.tcard.wc:hover{transform:translateY(-4px)}
.tag{display:inline-block;padding:5px 8px;border-radius:8px;font:400 14px/1.3 Inter,sans-serif;letter-spacing:-.28px;width:fit-content}
.tag.g{background:#D1FADF;color:#054F31}.tag.p{background:#FCE7F6;color:#851651}.tag.v{background:#EBE9FE;color:#3E1C96}.tag.n{background:#E9EAEB;color:#181D27}
.icon{width:48px;height:48px;border-radius:8px;background:#EBE9FE;display:flex;align-items:center;justify-content:center;color:#7A5AF8;flex:none}
.node{display:flex;align-items:center;gap:8px;padding:4px 16px 4px 4px;background:#fff;border-radius:50px;box-shadow:0 4px 16px rgba(24,29,39,.12);font:500 14px/1.3 Inter,sans-serif;letter-spacing:-.28px;color:#181D27;white-space:nowrap;position:relative;border:1.5px solid transparent;transition:all .3s ease;box-sizing:border-box}
.node i{width:40px;height:40px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-style:normal;flex:none}
.node:hover{border-color:#E9EAEB;box-shadow:none}
.node:hover::before{content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(299deg,rgba(173,157,255,.88) 0%,rgba(158,229,255,.88) 49.19%,rgba(220,160,255,.88) 98.39%);filter:blur(6px);z-index:-1}
.circle{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(24,29,39,.12);display:flex;align-items:center;justify-content:center;position:absolute;z-index:2}
.circle span{width:40px;height:40px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font:700 13px/1 Inter,sans-serif;color:#181D27}
.demo{position:relative}
.demo::before{content:'';background:linear-gradient(45deg,#ad9dff,#9ee5ff 50%,#dca0ff);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:-1;border-radius:16px;opacity:.88;filter:blur(12px)}
.cursor{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.cursor b{display:inline-block;padding:10px 16px;border-radius:6px;color:#fff;font:500 13px/1.2 Inter,sans-serif;letter-spacing:-.26px;box-shadow:0 8px 20px rgba(24,29,39,.12);white-space:nowrap}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.mq ul{display:flex;gap:64px;margin:0;padding:0;list-style:none;width:max-content;animation:marquee-rtl 25s linear infinite;will-change:transform}
.mq:hover ul{animation-play-state:paused}
.mq li{flex:none;display:flex;align-items:center;gap:10px;font:600 24px/1 Inter,sans-serif;letter-spacing:-.8px;color:#181D27;white-space:nowrap}
.mq li i{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 13px/1 Inter,sans-serif;font-style:normal;color:#fff}
@keyframes marquee-rtl{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.agbox{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#F5F3FF;border:1px solid #EBE9FE;border-radius:20px;padding:28px 30px;text-align:left}.ag-t{flex:0 0 250px;font:500 22px/1.25 Inter,sans-serif;letter-spacing:-.44px;color:#181D27}.ag{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;margin:0;padding:0;list-style:none}.ag li{position:relative}.ag li i svg{width:24px;height:24px;display:block;color:#fff}@media (max-width:1024px){ul.ag{max-width:360px}}@media (max-width:767px){ul.ag{max-width:330px}}@media (max-width:400px){ul.ag{max-width:292px}}.ag li i{width:54px;height:54px;border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 18px/1 Inter,sans-serif;font-style:normal;color:#fff;box-shadow:0 6px 14px rgba(24,29,39,.16);transition:transform .25s ease,box-shadow .25s ease;cursor:default}.ag li:hover i{transform:translateY(-4px);box-shadow:0 12px 22px rgba(24,29,39,.22)}.ag li span{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);background:#181D27;color:#fff;font:500 12px/1 Inter,sans-serif;padding:6px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:2}.ag li:hover span{opacity:1;transform:translate(-50%,0)}@media (max-width:1280px){.ag li i{width:48px;height:48px;font-size:16px}.ag{gap:12px}.agbox{gap:28px}}@media (max-width:1024px){.agbox{flex-direction:column;align-items:center;text-align:center;padding:32px 24px;gap:24px}.ag-t{flex:none}.ag{justify-content:center;max-width:420px}}@media (max-width:767px){.agbox{padding:26px 16px;border-radius:16px;gap:20px}.ag-t{font-size:19px;max-width:240px}.ag{gap:10px;max-width:330px}.ag li i{width:44px;height:44px;font-size:15px}}@media (max-width:400px){.ag{max-width:282px}.ag li i{width:40px;height:40px;font-size:14px;border-radius:7px}}
@keyframes marquee-ttb{0%{transform:translateY(-50%)}100%{transform:translateY(0%)}}
@keyframes marquee-btt{0%{transform:translateY(0%)}100%{transform:translateY(-50%)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.2}}
.twinkle{animation:twinkle 1.2s ease-in-out .2s infinite}
.twinkle.d2{animation-delay:.4s}.twinkle.d3{animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bob{animation:bob 6s ease-in-out infinite}.bob.d2{animation-duration:7s;animation-delay:.6s}.bob.d3{animation-duration:5.5s;animation-delay:1.2s}
@keyframes runseg{from{stroke-dashoffset:0}to{stroke-dashoffset:-700}}
.curve-base{fill:none;stroke:#E9EAEB;stroke-width:2;stroke-dasharray:6 6}
.curve-run{fill:none;stroke:#7A5AF8;stroke-width:2;stroke-linecap:round;stroke-dasharray:48 652;animation:runseg 6s linear infinite}
.curve-run.d2{animation-delay:-2s}.curve-run.d3{animation-delay:-4s}
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,7vh,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
.js .wow:not(.in){opacity:0}
.wow.in{animation:fadeInUp 1.25s cubic-bezier(.22,1,.36,1) both}
.d300{animation-delay:.3s !important}.d600{animation-delay:.6s !important}.d900{animation-delay:.9s !important}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1024px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.h1{font-size:48px;letter-spacing:-2.4px}.h2{font-size:36px;letter-spacing:-2px}.hide-md{display:none !important}}
@media (max-width:767px){.grid3,.grid2{grid-template-columns:minmax(0,1fr)}.h1{font-size:40px;letter-spacing:-1.6px}.h2{font-size:28px;letter-spacing:-.96px}.navlinks{display:none !important}}

.node-i i{width:40px;height:40px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-style:normal}

/* hero clip words — BrightHub text-animation "clip": reveal 600ms, hold 1500ms, collapse 600ms */
.rot{position:relative;display:inline-block;vertical-align:top;width:4.6em;height:1.2em;text-align:left;overflow:hidden;transition:width .6s cubic-bezier(.65,0,.35,1)}
.rot > b{position:absolute;left:0;top:0;font-weight:500;white-space:nowrap;color:#7A5AF8;padding:0 .12em .1em .16em;background:linear-gradient(90deg,rgba(105,56,239,.2) -28.95%,rgba(105,56,239,.06) 100%);opacity:0}
.rot > b.cur{opacity:1}
.rot::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;border-radius:99px;background:#7A5AF8;z-index:2}
@keyframes clipword{0%{clip-path:inset(0 100% 0 0);opacity:1}3.7%{clip-path:inset(0 0 0 0)}13%{clip-path:inset(0 0 0 0);opacity:1}16.6%{clip-path:inset(0 100% 0 0);opacity:1}16.7%,100%{clip-path:inset(0 100% 0 0);opacity:0}}
.tab{border:0;background:transparent;padding:9px 16px;border-radius:8px;font:400 16px/1.35 Inter,sans-serif;letter-spacing:-.32px;color:#535862;cursor:pointer;transition:all .3s ease}
.tab:hover{color:#181D27}.tab.on{background:#7A5AF8;color:#fff}
.onlbl{color:#7A5AF8}.off{color:#535862}
.ev{font:500 10px/1.25 Inter,sans-serif;border-radius:6px;padding:6px 7px;background:#F2EEFC;color:#3B2A8C;animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#A4A7AE;margin-right:5px;animation:dotb 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes dotb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.bar{height:2px;background:#7A5AF8;transform-origin:left;animation:barGrow 3.5s linear 1.8s both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.prompt{background:#F5F5F5;border-radius:12px;padding:12px;font:400 13px/1.45 Inter,sans-serif;letter-spacing:-.26px;color:#181D27}

/* Buffer "Fuel your social media success" card colors (from Buffer screenshot): white 7px frame, pastel fill */
.tcard.bf{background:var(--c);border:7px solid #fff;border-radius:20px;box-shadow:0 0 0 1px #EEECE8;padding:24px}
.tcard.bf:hover{border-color:#fff;background:var(--c);box-shadow:0 0 0 1px #EEECE8,0 4px 16px rgba(24,29,39,.12)}
.tcard.bf .h4,.tcard.bf .h3{color:#1A1A1A}
.tcard.bf .txt{color:#2E2E33}
.tcard.bf .prompt{background:rgba(255,255,255,.7)}
.tcard.bf .node-i i{background:#fff}
.tcard.bf .tag.n{background:rgba(255,255,255,.7)}

/* BrightHub banner-box (Key Features) */
.bgrid{display:grid;gap:16px;isolation:isolate}
.bgrid.r3{grid-template-columns:repeat(3,minmax(0,1fr))}.bgrid.r2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
@media (max-width:1024px){.bgrid.r3,.bgrid.r2{grid-template-columns:minmax(0,1fr)}}
.bbox{position:relative;background:#fff;border-radius:16px;padding:24px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}
.bbox::before{content:'';position:absolute;width:calc(100% - 28px);height:calc(100% - 28px);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:16px;background:linear-gradient(299deg,rgba(173,157,255,.88) 0%,rgba(158,229,255,.88) 49.19%,rgba(220,160,255,.88) 98.39%);filter:blur(28px);z-index:-1;pointer-events:none}
.bbox .art{height:280px;position:relative;display:flex;align-items:center;justify-content:center}
.bbox .bt{margin-top:30px}
.bbox .bd{margin:12px 0 0;max-width:382px}
.sh{background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(24,29,39,.12)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:99px;background:#F5F5F5;font:400 12px/1.2 Inter,sans-serif;letter-spacing:-.24px;color:#181D27}
.ev2{font:500 10.5px/1.3 Inter,sans-serif;border-radius:7px;padding:7px 8px;background:#F5F5F5;color:#181D27}
.vm{overflow:hidden;height:190px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.vm-track{display:flex;flex-direction:column;gap:8px}
.vm-track.up{animation:marquee-btt 15s linear infinite}.vm-track.down{animation:marquee-ttb 15s linear infinite}
.vm:hover .vm-track{animation-play-state:paused}
.vchip{display:flex;align-items:center;gap:8px;background:#fff;border:.5px solid #EFEFEF;border-radius:12px;padding:8px 12px;font:500 13px/1 Inter,sans-serif;color:#181D27;box-shadow:0 1px 1px -.5px rgba(0,0,0,.04),0 3px 3px -1.5px rgba(0,0,0,.04),0 24px 24px -12px rgba(0,0,0,.04)}
.vchip i{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:700 10px/1 Inter,sans-serif;font-style:normal;color:#fff}
@keyframes draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
.draw{stroke-dasharray:900;animation:draw 2.4s cubic-bezier(.22,1,.36,1) .4s both}
/* BrightHub tabs style-1 (pricing switch) */
.seg{display:inline-flex;border:1px solid #D5D7DA;padding:8px;gap:8px;border-radius:12px}
.seg button{border:0;background:transparent;padding:9px 16px;border-radius:8px;color:#535862;font:400 16px/1.35 Inter,sans-serif;letter-spacing:-.32px;cursor:pointer;transition:all .3s ease}
.seg button.on{background:#7A5AF8;color:#fff}
/* BrightHub pricing style-1 active */
.price{position:relative;padding:32px;border-radius:16px;background:#fff;border:1px solid #fff;box-sizing:border-box}
.price::before{content:'';background:linear-gradient(299deg,rgba(173,157,255,.88) 0%,rgba(158,229,255,.88) 49.19%,rgba(220,160,255,.88) 98.39%);border-radius:16px;filter:blur(28px);z-index:-1;position:absolute;width:calc(100% - 28px);height:calc(100% - 28px);top:50%;left:50%;transform:translate(-50%,-50%)}
.feat{padding:26px 0 0;margin:24px 0 48px;list-style:none;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.feat::before{content:'';background:linear-gradient(90deg,rgba(233,234,235,0) 0%,#E9EAEB 50%,rgba(233,234,235,0) 100%);width:100%;height:2px;top:0;position:absolute}
.feat li{display:flex;color:#181D27;align-items:center;gap:6px}
@media (max-width:767px){.feat{grid-template-columns:minmax(0,1fr)}}
/* BrightHub accordion style-1 */
.acc{position:relative;border:1px solid #D5D7DA;background:#FDFDFD;border-radius:16px;transition:border-color .3s ease}
.acc.active{border-color:#fff;background:#fff}
.acc.active::before{content:'';background:linear-gradient(299deg,rgba(173,157,255,.88) 0%,rgba(158,229,255,.88) 49.19%,rgba(220,160,255,.88) 98.39%);border-radius:16px;filter:blur(28px);z-index:-1;position:absolute;width:calc(100% - 28px);height:calc(100% - 28px);top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-t{width:100%;border:0;background:transparent;text-align:left;font:500 18px/1.35 Inter,sans-serif;letter-spacing:-.36px;color:#181D27;padding:24px 56px 24px 24px;cursor:pointer;position:relative;transition:padding .4s ease}
.acc.active .acc-t{padding-bottom:16px}
.acc-a{position:absolute;right:24px;top:50%;width:14px;height:14px;transform:translateY(-50%)}
.acc.active .acc-a{top:34px}
.acc-a::before,.acc-a::after{content:'';position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;background:#181D27;transition:transform .3s ease}
.acc-a::after{transform:rotate(90deg)}
.acc.active .acc-a::after{transform:rotate(0deg)}
.acc-c{font-size:16px;color:#535862;padding:0 24px 24px;margin:0;animation:accIn .4s ease both}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* BrightHub footer panel */
.fpanel{position:relative;border-radius:6px 0 0 6px;padding:80px 64px;background-image:linear-gradient(90deg,#6938EF33 0%,#6938EF00 100%);display:flex;flex-wrap:wrap;gap:40px 0}
.fpanel::before{content:'';position:absolute;left:0;top:0;width:6px;height:100%;background:#7A5AF8;border-radius:6px 0 0 6px}
.flink{display:flex;flex-direction:column;gap:12px}
.flink b{font:500 18px/1.35 Inter,sans-serif;letter-spacing:-.36px;color:#181D27;margin-bottom:4px}
.flink a{font-size:16px;color:#535862;letter-spacing:-.32px}
.flink a:hover{color:#7A5AF8}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid #E9EAEB;background:#fff;display:flex;align-items:center;justify-content:center;color:#181D27;transition:all .3s ease}
.soc:hover{background:#7A5AF8;border-color:#7A5AF8;color:#fff}
@media (max-width:767px){.fpanel{padding:60px 15px}}


/* ===== Layout classes (desktop values) ===== */
.sec{padding-top:160px}
.sec-ai{padding-top:160px;position:relative}
.ai-head{position:relative;min-height:0}
.ai-copy{max-width:none;margin:0 auto;text-align:center;padding-top:0;position:relative;z-index:3}.ai-copy .txt{max-width:560px;margin-left:auto;margin-right:auto}@media (min-width:1025px){.ai-copy .h2{white-space:nowrap}}
.ai-cards{margin-top:56px}
.how{margin-top:96px;text-align:center}
.demo-wrap{margin-left:300px;position:relative}
.steps{max-width:880px;margin:32px 0 0 300px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;font-size:14px}
.mq-wrap{margin-top:140px;text-align:center}
.cal{display:flex;height:500px}
.cal-col{height:370px}
.fh{font:500 40px/1.2 Inter,sans-serif;letter-spacing:-2px;color:#000;margin:0}
.fleft{flex:1 1 37%;min-width:280px;padding-right:40px;box-sizing:border-box}
.flinks{flex:1 1 62%;min-width:280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px 24px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.media-row{display:flex;gap:12px;width:100%;max-width:520px;align-items:center}
.faq-left{flex:1 1 380px;min-width:0;position:sticky;top:30px}
.show-md{display:none !important}
.hamb{display:none;width:44px;height:44px;border-radius:8px;border:1px solid #E9EAEB;background:#fff;align-items:center;justify-content:center;cursor:pointer;color:#181D27;padding:0}
.mmenu{position:absolute;left:16px;right:16px;top:100%;z-index:50;background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(24,29,39,.12);padding:12px;display:flex;flex-direction:column;animation:mIn .25s ease both}
.mmenu a.ml{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 12px;border-radius:8px;font:500 16px/1.35 Inter,sans-serif;color:#181D27}
.mmenu a.ml:hover{background:#F5F5F5}
@keyframes mIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mclaude{display:none}
.rot > b{box-shadow:inset 4px 0 0 #7A5AF8}
.rot::before{display:none}

/* ===== Tablet ≤1024 ===== */
@media (max-width:1024px){
.navlinks{display:none !important}
.hamb{display:inline-flex}
.hide-md{display:none !important}
.show-md{display:flex !important}
.sec,.sec-ai{padding-top:110px}
.ai-head{min-height:0}
.ai-copy{padding-top:0;max-width:640px}
.ai-cards{margin-top:56px}
.how{margin-top:72px}
.demo-wrap{margin-left:0}
.steps{margin:24px 0 0;max-width:none}
.mq-wrap{margin-top:96px}
.mq li{font-size:20px}
.mq ul{gap:44px}
.bgrid.r3{grid-template-columns:repeat(2,minmax(0,1fr))}
.bgrid.r3 > :nth-child(3){grid-column:span 2}
.grid3.g3keep{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-l2{gap:0 .3em !important}
.rotwrap{width:100%;justify-content:center}
.spark{display:none}
.bgrid.r2{grid-template-columns:minmax(0,1fr)}
.mclaude{display:block;margin:16px auto 0;max-width:640px}
.fleft{flex-basis:100%;padding-right:0}
.flinks{flex-basis:100%}
.faq-left{flex-basis:100%;position:static}
.fpanel{padding:64px 32px}
}

/* ===== Mobile ≤767 ===== */
@media (max-width:767px){
.container{padding:0 16px}
.site-header{height:72px !important}
.login{display:none !important}
.ann{font-size:12px !important;gap:6px !important;padding:8px 12px !important}
.ann .ann-av{display:none !important}
.h1{font-size:40px;letter-spacing:-1.6px;line-height:1.12}
.h2{font-size:30px;letter-spacing:-1.2px}
.h3{font-size:20px;letter-spacing:-.6px}
.lead{font-size:16px;letter-spacing:-.32px}
.hero{padding-top:32px !important}
.hero-l2{gap:0 !important}
.spark{display:none}
.hero-cta{flex-direction:column;align-items:stretch !important;gap:4px !important}
.hero-cta .btn{width:100%}
.hero-cta .btn-t{justify-content:center}
.hero-cta .ncc{justify-content:center;margin-top:8px}
.ask{font-size:22px !important;letter-spacing:-.6px !important}
.seg-hero .tab{font-size:14px;padding:10px 12px}
.cal{height:330px}
.cal-col{height:230px}
.cal .ev{font-size:8.5px;padding:4px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;font-size:13px}
.mq-wrap{margin-top:72px}
.mq-wrap p{margin-bottom:32px !important;font-size:16px !important}
.mq li{font-size:17px;gap:8px}
.mq li i{width:26px;height:26px;font-size:11px}
.mq ul{gap:32px}
.sec,.sec-ai{padding-top:80px}
.sec .txt[style*="margin: 0 auto 55px"],.sec .txt[style*="margin: 0 auto 40px"]{margin-bottom:32px !important}
.tcard{padding:16px;gap:16px}
.tcard.bf{padding:16px;border-width:6px}
.tab{min-height:44px}
.bgrid.r3,.bgrid.r2{grid-template-columns:minmax(0,1fr)}
.bgrid.r3 > :nth-child(3){grid-column:auto}
.grid3.g3keep{grid-template-columns:minmax(0,1fr)}
.bbox{min-height:0;padding:20px}
.bbox .art{height:auto;padding:16px 0 8px}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.media-row{flex-direction:column;align-items:stretch}
.price{padding:20px}
.price-num{font-size:36px !important}
.seg{padding:6px;gap:4px}
.seg button{font-size:14px;padding:10px 12px;min-height:44px}
.acc-t{font-size:16px;padding:16px 48px 16px 16px}
.acc.active .acc-t{padding-bottom:12px}
.acc-a{right:16px}
.acc.active .acc-a{top:26px}
.acc-c{font-size:14px;padding:0 16px 16px}
.footer-wrap{margin-top:80px !important}
.fpanel{padding:40px 20px;border-radius:6px}
.fh{font-size:28px;letter-spacing:-.96px}
.flinks{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.flink b{font-size:16px}
.flink a{font-size:15px}
.fpanel .glossy{width:100%;justify-content:center;box-sizing:border-box}
.copy{flex-direction:column;align-items:flex-start}
.price-tags{flex-direction:column;align-items:flex-start !important}
}

/* ===== Small phones ≤400 ===== */
@media (max-width:400px){
.h1{font-size:34px;letter-spacing:-1.2px}
.h2{font-size:27px}
.seg-hero .tab{font-size:13px;padding:10px 9px}
.cal .ev{font-size:7.5px}
}

@media (max-width:767px){.rotwrap{width:100%;justify-content:center}}

/* ---- Added for the static build (nothing visible changes) ---- */
.hero-h1{margin:0;font:inherit;letter-spacing:inherit;color:inherit}
[hidden]{display:none!important}
html.js-failed .wow:not(.in){opacity:1}

/* ---- The two demo videos under the Agentic / Classic switch (owner, 2026-11-12) ----
   Each video's poster is the first frame of that video, drawn as the video's own background: a phone gets the poster of its
   (phone) video, and a visitor without JavaScript still sees the first one. The Classic video is hidden until its tab is
   chosen, and its rule applies only while it is shown (:not([hidden])): a browser may fetch the background of a hidden
   element it still styles, and this keeps the Classic poster from being fetched by everyone who never chooses that tab.
   The phone box takes the shape of the phone videos (1080 x 964): the design's 1062 x 1080 is taller and would cut the
   right edge off them. */
.hv-a{background:url(/_home/assets/ihateposting-demo-agentic-poster.6db44949.jpg) center/cover no-repeat}
.hv-c:not([hidden]){background:url(/_home/assets/ihateposting-demo-classic-poster.dbb35a0f.jpg) center/cover no-repeat}
@media (max-width:640px){.hv{aspect-ratio:1080/964}.hv-a{background-image:url(/_home/assets/ihateposting-demo-agentic-mobile-poster.dd883633.jpg)}.hv-c:not([hidden]){background-image:url(/_home/assets/ihateposting-demo-classic-mobile-poster.beb53f53.jpg)}}

/* ---- The demo videos in the AI-agent cards and in "Automate everything" (owner, 2026-11-12) ----
   A poster picture holds the place and sets the size (it is an <img>, so it loads lazily and shows without JavaScript); the
   video lies over it. The words of the request that "Automate everything" drew as a picture stay in the page as visually
   hidden text (.vh, the same rule the guides use). */
.pv{position:relative}
.pv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Links with no page yet are hidden (owner, 2026-11-11: "hide all this # links ... display none") ----
   A link whose target is still "#" has nothing to open, so it is not shown. Bind it in src/links.mjs
   and it appears by itself. A dropdown, phone-menu group or footer column left with no visible link
   goes with them, so no empty shell is shown. To show everything again, delete this block. */
a[href="#"]{display:none!important}
.dn:not(:has(a:not([href="#"]))),details.md:not(:has(a:not([href="#"]))),.sf-col:not(:has(a:not([href="#"]))),.sf-socs:not(:has(a:not([href="#"]))){display:none}
/* The design's footer grid has seven fixed tracks, so with columns hidden the rest would bunch to the left.
   On desktop the tracks follow the columns that are shown; with all seven it renders exactly as designed. */
@media (min-width:1025px){.sf-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto}}