:root { --mf-ink:#15172a; --mf-muted:#626780; --mf-line:#e8e7f1; --mf-soft:#f7f8fc; --mf-purple:#6d4aff; --mf-blue:#148bd2; --mf-green:#0e9f78; }
.mf-hero { overflow:hidden; padding-block:clamp(4rem,8vw,7.25rem); background:radial-gradient(circle at 80% 20%,rgba(109,74,255,.16),transparent 32%),linear-gradient(145deg,#fbfaff 0%,#f4f8ff 60%,#f5fffb 100%); }
.mf-hero-grid { display:grid; grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr); align-items:center; gap:clamp(2.5rem,6vw,6rem); }
.mf-eyebrow { display:inline-flex; margin-bottom:.8rem; color:var(--mf-purple); font-size:.76rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.mf-hero h1,.mf-section h2,.mf-final h2 { color:var(--mf-ink); font-weight:900; letter-spacing:-.035em; line-height:1.08; }
.mf-hero h1 { max-width:760px; margin:0; font-size:clamp(2.65rem,5.5vw,5.2rem); }
.mf-hero-copy>p { max-width:700px; margin:1.4rem 0; color:var(--mf-muted); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.8; }
.mf-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.mf-text-cta { display:inline-flex; align-items:center; gap:.45rem; padding:.7rem .35rem; color:var(--mf-purple); font-weight:850; text-decoration:none; }
.mf-proof-line { display:flex; align-items:center; gap:.65rem; font-size:.9rem!important; font-weight:750; }.mf-proof-line span { display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%; background:#dff8ed; color:#147a53; }
.mf-browser-frame { overflow:hidden; margin:0; border:1px solid rgba(212,210,230,.9); border-radius:1.25rem; background:#fff; box-shadow:0 30px 80px rgba(42,40,78,.14); }
.mf-frame-bar { display:flex; align-items:center; gap:.35rem; min-height:2.1rem; padding:.5rem .8rem; border-bottom:1px solid var(--mf-line); background:#f6f7fb; color:#777b90; font-size:.72rem; }.mf-frame-bar i { width:.52rem; height:.52rem; border-radius:50%; background:#d6d7e0; }.mf-frame-bar span { margin-inline-start:.35rem; }
.mf-browser-frame img,.mf-phone-frame img { display:block; width:100%; height:auto; }
.mf-hero-proof { transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); }.mf-hero-proof img { aspect-ratio:1672/941; object-fit:contain; }
.mf-ecosystem { border-block:1px solid var(--mf-line); background:#fff; }.mf-ecosystem>.container-xl { display:flex; align-items:center; gap:2rem; padding-block:1.4rem; }.mf-ecosystem strong { white-space:nowrap; color:var(--mf-ink); }.mf-ecosystem-items { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; }.mf-ecosystem-items span { position:relative; color:#52566d; font-size:.9rem; font-weight:800; }.mf-ecosystem-items span+span::before { content:'+'; position:absolute; inset-inline-start:-1.25rem; color:var(--mf-purple); }
.mf-section { padding-block:clamp(4.5rem,8vw,7.5rem); }.mf-soft { background:var(--mf-soft); }.mf-section-head { max-width:850px; margin:0 auto clamp(2.4rem,5vw,4.4rem); text-align:center; }.mf-section-head.is-left { margin-inline:0; text-align:start; }.mf-section-head h2,.mf-section h2 { margin:0; font-size:clamp(2rem,4vw,3.6rem); }.mf-section-head p,.mf-section p { color:var(--mf-muted); line-height:1.8; }.mf-section-head p { max-width:760px; margin:1rem auto 0; font-size:1.08rem; }.mf-section-head.is-left p { margin-inline:0; }
.mf-store-proof-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr); align-items:center; gap:clamp(1.25rem,4vw,3.4rem); max-width:1180px; margin-inline:auto; }.mf-proof-card figcaption,.mf-admin-shot figcaption,.mf-phone-frame figcaption { padding:.8rem 1rem; color:#30344b; font-size:.9rem; font-weight:850; text-align:center; }.mf-phone-frame { overflow:hidden; margin:0; border:8px solid #171a2c; border-radius:2rem; background:#fff; box-shadow:0 28px 70px rgba(34,34,68,.18); }.mf-store-proof-grid>.mf-phone-frame { max-width:330px; justify-self:center; }
.mf-capability-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:3rem; }.mf-capability-list>span { display:flex; align-items:flex-start; gap:.6rem; padding:1rem 1.1rem; border:1px solid var(--mf-line); border-radius:1rem; background:#fff; color:#41465d; font-size:.92rem; font-weight:700; }.mf-capability-list i { color:var(--mf-green); font-style:normal; }
.mf-feature-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.9rem; }.mf-feature-grid article { min-height:115px; padding:1.15rem; border:1px solid #e4e3ed; border-radius:1rem; background:#fff; box-shadow:0 10px 26px rgba(45,47,74,.04); }.mf-feature-grid span { display:block; margin-bottom:.8rem; color:var(--mf-purple); }.mf-feature-grid strong { color:#272b42; font-size:.94rem; line-height:1.45; }
.mf-product-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(480px,1fr); align-items:center; gap:clamp(2.5rem,6vw,6rem); }.mf-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.mf-group-grid article { padding:1.25rem; border:1px solid var(--mf-line); border-radius:1.1rem; background:#fff; }.mf-group-grid h3 { color:var(--mf-ink); font-size:1rem; }.mf-group-grid ul,.mf-three-grid ul { padding-inline-start:1.2rem; color:var(--mf-muted); line-height:1.8; }.mf-admin-shot img { aspect-ratio:1672/941; object-fit:contain; }
.mf-admin-section { color:#fff; background:linear-gradient(135deg,#16192f,#242b53); }.mf-admin-section h2,.mf-admin-section p { color:#fff; }.mf-admin-grid,.mf-seo-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(2rem,6vw,6rem); }.mf-chip-grid,.mf-chip-list { display:flex; flex-wrap:wrap; gap:.7rem; }.mf-chip-grid span,.mf-chip-list span { padding:.68rem .9rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.09); color:inherit; font-size:.88rem; font-weight:750; }.mf-seo-grid .mf-chip-grid span { border-color:#d9d8e9; background:#fff; color:#40445a; }
.mf-process-flow,.mf-shipping-flow { display:flex; align-items:center; justify-content:center; gap:1.7rem; margin:1rem auto 3rem; }.mf-process-flow span,.mf-shipping-flow span { position:relative; padding:.9rem 1.2rem; border:1px solid var(--mf-line); border-radius:999px; background:#fff; color:#292d44; font-weight:850; }.mf-process-flow span+span::before,.mf-shipping-flow span+span::before { content:'→'; position:absolute; inset-inline-start:-1.35rem; color:var(--mf-purple); }.mf-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }.mf-detail-grid article { padding:1rem; border-radius:1rem; background:#f7f8fc; color:#41465d; font-weight:700; }.mf-detail-grid span { margin-inline-end:.4rem; color:var(--mf-green); }
.mf-shipping { color:#fff; background:linear-gradient(145deg,#082e3a,#0c4d50 55%,#16645b); }.mf-shipping h2,.mf-shipping p { color:#fff; }.mf-shipping-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); }.mf-shipping-flow { justify-content:flex-start; flex-wrap:wrap; }.mf-shipping-flow span { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; }.mf-shipping-flow span+span::before { color:#7ee5cb; }.mf-contract-note { margin-top:2rem; padding:1.3rem; border:1px solid rgba(255,255,255,.2); border-radius:1rem; background:rgba(255,255,255,.08); }.mf-contract-note p { margin:.5rem 0 0; font-size:.92rem; }.mf-shipping-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.mf-shipping-cards article { padding:1rem; border:1px solid rgba(255,255,255,.15); border-radius:1rem; background:rgba(255,255,255,.08); font-weight:750; }.mf-shipping-cards span { margin-inline-end:.5rem; color:#7ee5cb; }
.mf-sc { color:#fff; background:radial-gradient(circle at 15% 20%,rgba(109,74,255,.32),transparent 28%),#13162b; }.mf-sc h2,.mf-sc p { color:#fff; }.mf-sc .mf-eyebrow { color:#bdb0ff; }.mf-phone-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:clamp(1.2rem,4vw,3rem); max-width:960px; margin-inline:auto; }.mf-phone-rail .mf-phone-frame { max-width:280px; justify-self:center; }.mf-phone-rail figcaption { color:#fff; background:#1d2038; }.mf-sc-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; margin-top:3rem; }.mf-sc-footer>div:last-child { display:flex; align-items:center; gap:1rem; }.mf-sc-footer small { color:#c8cad7; }
.mf-marketing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.mf-marketing-grid article { padding:1.6rem; border:1px solid var(--mf-line); border-radius:1.25rem; background:#fff; box-shadow:0 16px 45px rgba(38,40,64,.06); }.mf-integration-name { display:grid; place-items:center; width:3rem; height:3rem; margin-bottom:1.3rem; border-radius:.9rem; background:#efedff; color:var(--mf-purple); font-weight:900; }.mf-marketing-grid h3 { color:var(--mf-ink); }.mf-marketing-grid article>div { display:flex; flex-wrap:wrap; gap:.45rem; }.mf-marketing-grid article>div span { padding:.4rem .58rem; border-radius:.5rem; background:#f3f4f8; color:#555a70; font-size:.76rem; font-weight:750; }
.mf-three-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }.mf-three-grid article { padding:2rem; border:1px solid var(--mf-line); border-radius:1.3rem; background:#fff; }.mf-three-grid small { color:#75798d; }
.mf-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }.mf-steps article { padding:1.4rem; border:1px solid var(--mf-line); border-radius:1rem; background:#fff; }.mf-steps span { display:block; margin-bottom:.8rem; color:var(--mf-purple); font-weight:900; }.mf-steps strong { color:var(--mf-ink); }
.mf-faq-grid { display:grid; grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr); gap:clamp(2rem,7vw,7rem); }.mf-faq details { border-bottom:1px solid var(--mf-line); }.mf-faq summary { padding:1.1rem 0; color:var(--mf-ink); font-weight:850; cursor:pointer; }.mf-faq details p { margin-top:0; }.mf-final { padding-block:3.2rem; color:#fff; background:linear-gradient(120deg,#6846ff,#177fc2); }.mf-final>.container-xl { display:flex; align-items:center; justify-content:space-between; gap:2rem; }.mf-final h2,.mf-final p { color:#fff; }.mf-final h2 { margin:0; font-size:clamp(1.8rem,4vw,3.2rem); }.mf-final p { margin:.65rem 0 0; }
@media (max-width:1100px) { .mf-hero-grid,.mf-product-layout { grid-template-columns:1fr; }.mf-hero-proof { max-width:850px; transform:none; }.mf-feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.mf-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .mf-ecosystem>.container-xl { align-items:flex-start; flex-direction:column; gap:1rem; }.mf-ecosystem-items { flex-wrap:wrap; justify-content:flex-start; }.mf-ecosystem-items span+span::before { display:none; }.mf-capability-list,.mf-admin-grid,.mf-shipping-grid,.mf-seo-grid,.mf-faq-grid { grid-template-columns:1fr; }.mf-marketing-grid { grid-template-columns:1fr; }.mf-sc-footer { grid-template-columns:1fr; }.mf-three-grid { grid-template-columns:1fr; }.mf-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px) { .mf-store-proof-grid,.mf-phone-rail { display:flex; overflow-x:auto; align-items:flex-start; gap:1rem; margin-inline:-.75rem; padding:0 .75rem 1rem; scroll-snap-type:x mandatory; scrollbar-width:thin; }.mf-store-proof-grid>* { flex:0 0:min(88vw,620px); scroll-snap-align:center; }.mf-store-proof-grid>.mf-phone-frame { flex-basis:min(72vw,330px); }.mf-phone-rail .mf-phone-frame { flex:0 0:min(72vw,290px); scroll-snap-align:center; }.mf-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.mf-process-flow { justify-content:flex-start; overflow-x:auto; padding-bottom:.6rem; }.mf-process-flow span { flex:0 0 auto; }.mf-shipping-flow { justify-content:flex-start; }.mf-sc-footer>div:last-child { align-items:flex-start; flex-direction:column; } }
@media (max-width:576px) { .mf-hero { padding-block:3.2rem; }.mf-hero h1 { font-size:clamp(2.25rem,12vw,3.35rem); }.mf-hero-actions { align-items:stretch; flex-direction:column; }.mf-hero-actions .btn,.mf-text-cta { justify-content:center; width:100%; }.mf-hero-proof { margin-top:.5rem; }.mf-capability-list,.mf-feature-grid,.mf-group-grid,.mf-detail-grid,.mf-shipping-cards,.mf-steps { grid-template-columns:1fr; }.mf-feature-grid article { min-height:auto; }.mf-final>.container-xl { align-items:stretch; flex-direction:column; }.mf-final .btn { width:100%; } }