/* ==========================================================================
   crosspostr.com — hand-built replacement for the Framer site
   Breakpoints: desktop ≥1200px · tablet 810–1199px · mobile <810px
   ========================================================================== */

/* ---------- Fonts (self-hosted, no Framer dependency) ---------- */
@font-face{font-family:"Inter";src:url("../fonts/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-700i.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url("../fonts/InterDisplay-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-600.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --purple:#815bf4;
  --purple-2:#8771ff;
  --ink:#101011;
  --ink-2:#2b2b2c;
  --grey:#606266;
  --grey-2:#a7a7a7;
  --mist:#f0f2f6;
  --white:#fff;
  --display:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Switzer","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --feat:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
  --container:1350px;
  --gutter:30px;
  --radius:30px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink-2);font-family:var(--body);font-size:16px;line-height:1.4;font-feature-settings:var(--feat)}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type presets (mirroring the Framer text styles) ---------- */
.t-h1{font-family:var(--display);font-weight:600;font-size:90px;line-height:1em;letter-spacing:-.04em;color:var(--ink)}
.t-h2{font-family:var(--display);font-weight:700;font-size:46px;line-height:1.1em;letter-spacing:-.04em;color:var(--ink)}
.t-h2-light{font-family:var(--display);font-weight:500;font-size:48px;line-height:1.1em;letter-spacing:-.04em;color:var(--ink)}
.t-step{font-family:var(--display);font-weight:700;font-size:48px;line-height:1.1em;letter-spacing:-.04em;color:var(--purple)}
.t-step-title{font-family:var(--display);font-weight:700;font-size:48px;line-height:1.1em;letter-spacing:-.04em;color:var(--ink)}
.t-h5{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1em;letter-spacing:-.04em;color:var(--ink)}
.t-h6{font-family:var(--display);font-weight:600;font-size:43px;line-height:1.1em;letter-spacing:-.02em;color:var(--ink)}
.t-lead{font-family:var(--body);font-weight:500;font-size:21px;line-height:1.4em;letter-spacing:-.02em;color:var(--ink-2)}
.t-lead-purple{font-family:var(--body);font-weight:500;font-size:20px;line-height:1.4em;letter-spacing:-.02em;color:var(--purple)}
.t-body{font-family:var(--body);font-weight:500;font-size:16px;line-height:1.4em;letter-spacing:-.02em;color:var(--ink-2)}
.t-small{font-family:var(--body);font-weight:500;font-size:14px;line-height:1.4em;letter-spacing:-.02em;color:var(--ink-2)}
.t-btn{font-family:var(--body);font-weight:500;font-size:18px;line-height:1.4em;letter-spacing:-.02em}
.t-lead p+p,.t-body p+p{margin-top:20px}

@media (max-width:1199px){
  .t-h1{font-size:70px}
  .t-h2{font-size:40px;letter-spacing:0}
  .t-h2-light{font-size:40px;letter-spacing:0}
  .t-step,.t-step-title{font-size:40px;letter-spacing:0}
  .t-h5{font-size:26px}
  .t-h6{font-size:34px}
  .t-lead{font-size:19px}
  .t-lead-purple{font-size:18px}
  .t-btn{font-size:17px}
}
@media (max-width:809px){
  .t-h1{font-size:40px;letter-spacing:0}
  .t-h2{font-size:28px;letter-spacing:-.01em}
  .t-h2-light{font-size:28px;letter-spacing:-.01em}
  .t-step,.t-step-title{font-size:28px;letter-spacing:-.01em}
  .t-h5{font-size:20px;letter-spacing:-.01em}
  .t-h6{font-size:22px;letter-spacing:-.01em}
  .t-lead{font-size:23px}
  .t-lead-purple{font-size:16px}
  .t-btn{font-size:16px}
}

/* ---------- Desktop zoom ----------
   Scales the whole page down on desktop (like browser zoom at 80%).
   Tablet and mobile breakpoints are untouched. */
@media (min-width:1200px){
  body{zoom:.8}
}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:1199px){.container{padding:0 20px}}
@media (max-width:809px){.container{padding:0 15px}}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:30px;cursor:pointer;position:relative;overflow:hidden;color:var(--mist);transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{padding:12px 10px 12px 28px;background:linear-gradient(rgb(161,140,249) 0%,rgb(99,41,216) 100%)}
.btn-primary .arrow{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:30px;background:var(--mist);overflow:hidden;flex:none}
.btn-primary .arrow img{width:15px;height:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.btn-primary .arrow img+img{position:absolute;left:-13px;top:50%;margin-top:-5px;opacity:0}
.btn-primary:hover .arrow img:first-child{transform:translateX(24px);opacity:0}
.btn-primary:hover .arrow img+img{transform:translateX(21px);opacity:1}
.btn-dark{padding:12px 28px;background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);box-shadow:rgba(16,16,17,.6) 0 6px 20px}
.btn-dark-sm{padding:10px 20px;background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);box-shadow:rgba(16,16,17,.32) 0 3px 14px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--white);padding:16px 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.site-header .logo img{height:40px;width:auto}
@media (max-width:809px){
  .site-header{padding:10px 0}
  .site-header .container{padding:8px 15px}
  .site-header .logo img{height:34px}
}

/* ---------- Reveal / appear animations ---------- */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1);transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}
[data-words] .w{display:inline-block;opacity:0;filter:blur(5px);transform:translateY(10px);transition:opacity .6s ease,filter .6s ease,transform .6s ease}
[data-words].is-in .w{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-words] .w{opacity:1;filter:none;transform:none;transition:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:0 0 140px;background:linear-gradient(180deg,var(--white) .45%,rgba(129,91,244,.3) 24.3%,rgba(129,91,244,.3) 78.8%,var(--white) 100%)}
.hero .container{display:flex;flex-direction:column;align-items:center}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:840px;text-align:center}
.tagline{display:inline-flex;align-items:center;gap:10px;padding:4px 15px 4px 4px;border-radius:30px;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:30px;background:var(--ink);color:var(--mist);font-size:14px}
.hero h1{max-width:840px}
.hero-sub{max-width:70%;color:var(--grey)}
.hero-sub strong{font-weight:500;color:var(--ink-2)}
.platforms{display:flex;flex-direction:column;align-items:center;gap:14px}
.icon-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 20px;padding-bottom:20px}
.icon-stack img{width:64px;height:64px;border-radius:8px;object-fit:cover;transition:transform .3s ease}
.icon-stack img:hover{transform:translateY(-4px) scale(1.06)}
.hero .icon-stack{transform:scale(.8);margin:-8px 0 -20px}
.hero-image{width:100%;margin-top:40px}
.hero-image img{width:100%;height:auto}
@media (max-width:1199px){
  .hero{padding:50px 0 90px}
  .hero-sub{max-width:600px}
  .hero-image{margin-top:24px}
}
@media (max-width:809px){
  .hero{padding:0 0 80px}
  .hero-content{gap:20px}
  .hero-sub{max-width:100%}
  .icon-stack{gap:10px;padding:0}
  .hero .icon-stack{transform:none;margin:0}
  .icon-stack img{width:48px;height:48px}
  .hero-image{margin-top:12px}
}

/* ---------- Feature section ---------- */
.feature{padding:156px 0;overflow:hidden}
.feature .container{display:flex;flex-direction:column;align-items:center;gap:60px}
.feature .section-title{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:80%}
.feature-video{width:100%;max-width:1535px;aspect-ratio:1535/403}
.feature-video video{width:100%;height:100%;object-fit:cover}
.feature-logo{width:400px;max-width:100%;height:auto;margin-top:-30px}
@media (max-width:1199px){
  .feature{padding:48px 0}
  .feature .container{gap:50px}
  .feature-logo{width:341px}
}
@media (max-width:809px){
  .feature .section-title{max-width:92%}
  .feature-logo{width:266px}
}

/* ---------- Integration / steps ---------- */
.steps{padding:0 0 140px}
.steps .container{display:flex;flex-direction:column;gap:100px}
.step{display:flex;align-items:center;gap:80px;width:100%}
.step-box{flex:1 0 0;display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 80px;border-radius:var(--radius);background:linear-gradient(180deg,#2b1a8f 1.8%,var(--purple) 100%)}
.step-box>img{width:100%;height:593px;object-fit:contain;transition:transform .5s ease}
.step-box.narrow>img{width:90%}
.step:hover .step-box>img{transform:translateY(-6px)}
.step-content{flex:.85 0 0;display:flex;flex-direction:column;gap:60px}
.step-title{display:flex;flex-direction:column;gap:0}
.step-copy{display:flex;flex-direction:column;gap:15px}
.step-copy p+p{margin-top:20px}
.step-copy .t-lead-purple{margin-top:0}
.step-box.flow{padding:80px;align-items:stretch}
.flow-card{width:100%;padding:37px 6px;border-radius:var(--radius);background:var(--white);box-shadow:0 4px 30px rgba(45,30,133,.1);display:flex;flex-direction:column;align-items:center;gap:0}
.flow-visual{width:100%;display:flex;flex-direction:column;align-items:center}
.flow-app{width:100px;height:100px;filter:drop-shadow(0 1px 3px #7d4ff1)}
.flow-app img{width:100%;height:100%;object-fit:contain}
.flow-paths{width:100%;max-width:540px;height:178px;margin-top:-10px;padding:0 20px}
.flow-paths svg{width:100%;height:100%;overflow:visible}
.flow-paths .base{stroke:rgba(82,53,239,.2);stroke-width:1.5;fill:none;stroke-linecap:round}
.flow-paths .dash{stroke:var(--purple);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-dasharray:30 100;animation:dashflow 2.2s linear infinite}
.flow-paths .dash:nth-child(4){animation-delay:-.4s}
.flow-paths .dash:nth-child(6){animation-delay:-.8s}
.flow-paths .dash:nth-child(8){animation-delay:-1.2s}
.flow-paths .dash:nth-child(10){animation-delay:-1.6s}
.flow-paths .dash:nth-child(12){animation-delay:-2s}
@keyframes dashflow{from{stroke-dashoffset:130}to{stroke-dashoffset:0}}
.flow-card .icon-stack{margin-top:-6px}
@media (max-width:1199px){
  .steps{padding:120px 0}
  .steps .container{gap:80px}
  .step{gap:60px;padding:0 24px}
  .step-box{padding:0 80px;justify-content:center}
  .step-box>img{width:371px;max-width:100%;height:auto;aspect-ratio:.72973}
  .step-content{flex:1 0 0}
  .step-box.flow{padding:40px;min-height:509px;justify-content:center}
}
@media (max-width:809px){
  .steps{padding:120px 24px}
  .steps .container{padding:0}
  .step{flex-direction:column;align-items:flex-start;gap:60px;padding:0}
  .step-box{width:100%;padding:0 24px}
  .step-box>img{width:100%;height:442px;object-fit:contain}
  .step.reverse .step-box{order:0}
  .step.reverse .step-content{order:1}
  .step-content{width:100%;gap:30px}
  .step-box.flow{padding:20px}
  .flow-paths{height:150px}
}

/* ---------- Testimonial ---------- */
.testimonial{padding:0 0 0}
.testimonial .container{display:flex;flex-direction:column;gap:100px}
.testimonial-grid{display:flex;align-items:flex-start;gap:150px;padding-top:60px}
.testimonial-head{flex:.85 0 0;display:flex;flex-direction:column;gap:6px}
.rotator{position:relative;display:block;height:1.15em;overflow:hidden}
.rotator span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.rotator span.is-active{opacity:1;transform:none}
.rotator span.is-out{opacity:0;transform:translateY(-100%)}
.testimonial-card{flex:1 0 0;display:flex;flex-direction:column;gap:20px}
.avatars{display:flex;align-items:center;gap:4px}
.avatar{width:42px;height:42px;padding:0;border:0;background:none;cursor:pointer;opacity:.4;transition:opacity .3s,transform .3s,width .3s,height .3s}
.avatar:nth-child(odd){transform:rotate(-8deg)}
.avatar:nth-child(even){transform:rotate(8deg)}
.avatar img{width:100%;height:100%;border-radius:5px;border:2px solid transparent;object-fit:cover;transition:border-color .3s}
.avatar.is-active{opacity:1;width:52px;height:52px}
.avatar.is-active img{border-color:var(--purple)}
.quote{position:relative;min-height:2.8em}
.quote .t-lead,.quote .t-small{transition:opacity .3s}
@media (max-width:1199px){
  .testimonial .container{padding:0 20px}
  .testimonial-grid{gap:60px;padding-top:0}
}
@media (max-width:809px){
  .testimonial .container{padding:0 15px}
  .testimonial-grid{flex-direction:column;gap:40px}
  .testimonial-head,.testimonial-card{width:100%;flex:none}
}

/* ---------- Pricing ---------- */
.pricing{padding:200px 0 100px}
.pricing .container{display:flex;flex-direction:column;align-items:center;gap:50px}
.pricing .section-title{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:600px}
.pricing .section-title p{color:var(--grey)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(50px,1fr));gap:30px;width:100%;max-width:1140px}
.plan{display:flex;flex-direction:column;padding:6px;border-radius:var(--radius);background:var(--mist);transition:transform .35s ease,box-shadow .35s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(45,30,133,.08)}
.plan-top{display:flex;flex-direction:column;gap:19px;padding:30px 30px 54px;border-radius:25px;background:var(--white)}
.plan-top>img{width:100px;height:100px;border-radius:22px;object-fit:cover}
.plan-meta{display:flex;flex-direction:column;gap:18px;padding-bottom:24px}
.plan-meta .title{display:flex;flex-direction:column;gap:5px}
.plan-meta .title p{color:var(--grey)}
.plan-price{display:flex;align-items:flex-end;gap:5px}
.plan-price .t-h2{color:#000}
.plan-price .t-body{color:var(--grey);padding-bottom:6px}
.plan-features{display:flex;flex-direction:column;gap:10px;padding:30px}
.plan-features .t-small{color:var(--grey)}
.plan-features ul{display:flex;flex-direction:column;gap:5px}
.plan-features li{position:relative;padding-left:2ch}
.plan-features li::before{content:"•";position:absolute;left:0}
@media (max-width:1199px){
  .pricing{padding:120px 0}
  .pricing .container{padding:0 20px;max-width:750px}
  .pricing-grid{grid-template-columns:repeat(2,minmax(50px,1fr))}
  .plan:last-child{grid-column:span 2}
}
@media (max-width:809px){
  .pricing{padding:120px 0 60px}
  .pricing .container{padding:0 24px}
  .pricing .section-title p{max-width:80%}
  .pricing-grid{grid-template-columns:1fr;gap:20px}
  .plan:last-child{grid-column:auto}
  .plan-top{padding:15px 15px 30px;gap:20px}
  .plan-features{padding:15px}
}

/* ---------- CTA ---------- */
.cta{padding:140px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--white) .45%,rgba(135,113,255,.3) 24.3%,rgba(135,113,255,.3) 100%)}
.cta .container{display:flex;flex-direction:column;align-items:center;gap:60px;max-width:1210px}
.cta-icon{width:60px;height:60px;margin-bottom:-50px}
.cta .section-title{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:600px}
.cta-buttons{display:flex;justify-content:center;gap:20px;width:100%}
.cta-image{width:100%;aspect-ratio:2.47826;overflow:hidden;perspective:1000px}
.cta-image img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:30px 30px 0 0;box-shadow:0 -10px 60px rgba(45,30,133,.15)}
@media (max-width:1199px){
  .cta{padding-top:120px}
  .cta .container{gap:50px;padding:0 20px}
}
@media (max-width:809px){
  .cta .container{gap:50px;padding:0 15px}
}

/* ---------- Footer ---------- */
.site-footer{background:#0e0e0e;color:var(--white)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;min-height:68px;max-width:1120px;padding:0 40px}
.footer-links{display:flex;align-items:center;gap:20px}
.footer-link{position:relative;display:block;height:25px;overflow:hidden;font-family:"Open Runde",var(--body);font-weight:600;font-size:16px;line-height:1.6em;letter-spacing:-.01em;color:#f5f5f5}
.footer-link span{display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.footer-link span+span{color:#ff4726}
.footer-link:hover span{transform:translateY(-25px)}
.footer-credit{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:-.02em}
.footer-credit img{height:14px;width:auto;object-fit:contain;transition:opacity .25s}
.footer-credit:hover img{opacity:.8}
@media (max-width:1199px){
  .site-footer .container{min-height:92px;padding:20px 20px;justify-content:center;gap:40px}
}
@media (max-width:809px){
  .site-footer .container{flex-direction:column;padding:33px 15px;gap:14px}
  .footer-links{flex-wrap:wrap;justify-content:center}
}

/* ---------- Legal pages ---------- */
.legal{padding:80px 0 140px}
.legal .container{max-width:860px;display:flex;flex-direction:column;gap:28px}
.legal .t-h2{margin-bottom:-12px}
.legal .updated{color:var(--grey);font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.legal h2{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-transform:uppercase;margin-top:12px}
.legal p{font-family:var(--body);font-weight:500;font-size:18px;line-height:1.5em;letter-spacing:-.02em;color:var(--ink-2)}
.legal ul{display:flex;flex-direction:column;gap:6px}
.legal li{position:relative;padding-left:2ch;font-size:18px;line-height:1.5em;letter-spacing:-.02em}
.legal li::before{content:"•";position:absolute;left:0}
.legal a{color:var(--purple);text-decoration:underline}
@media (max-width:809px){.legal{padding:40px 0 80px}.legal p,.legal li{font-size:16px}}