Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .cs-hero-wrapper {\r\n --cs-bg: #120a1f;\r\n --cs-text: #f1eefc;\r\n --cs-text-muted: rgba(230, 224, 250, 0.78);\r\n --cs-accent: #c084fc;\r\n --cs-accent-2: #a855f7;\r\n\r\n background: var(--cs-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .cs-hero-wrapper * { box-sizing: border-box; }\r\n\r\n .cs-hero-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 56px;\r\n }\r\n\r\n .cs-hero-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: csFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .cs-eyebrow {\r\n display: inline-block;\r\n color: var(--cs-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .cs-heading {\r\n color: var(--cs-text);\r\n font-size: clamp(32px, 4vw, 46px);\r\n font-weight: 700;\r\n line-height: 1.15;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .cs-text {\r\n color: var(--cs-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .cs-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .cs-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .cs-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .cs-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================================\r\n Buffer-style image frame: colored, glowing background box.\r\n Main screenshot fills it edge-to-edge (object-fit: cover, so\r\n no blank margins). A second image floats on top as a card,\r\n overlapping the bottom-right, with its own shadow\/border.\r\n ============================================================ *\/\r\n .cs-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: csFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .cs-image-main {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes csFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .cs-hero-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .cs-text { max-width: 100%; }\r\n .cs-hero-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"cs-hero-wrapper\">\r\n <div class=\"cs-hero-inner\">\r\n\r\n <div class=\"cs-hero-content\">\r\n <span class=\"cs-eyebrow\">Mail 2 Post<\/span>\r\n <h1 class=\"cs-heading\">Snap it. Email it. It's posted.<\/h1>\r\n <p class=\"cs-text\">Snapped a photo at an event? Email it to publish@socials.ink with a subject and a short note \u2014 we'll turn it into a finished post: a cover image plus a written caption, sent back to you to review, edit, and publish.<\/p>\r\n <a class=\"cs-cta\" href=\"#\">\r\n <span>Learn more<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"cs-image-frame\">\r\n <img decoding=\"async\" class=\"cs-image-main\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/mail2post.png\" alt=\"Mail 2 Post \u2014 approved senders and email settings\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cd96f26 e-con e-atomic-element e-flexbox-base e-ebcad87 \" data-id=\"cd96f26\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cd96f26\">\n \t\t<div class=\"elementor-element elementor-element-49c2104 elementor-widget elementor-widget-html\" data-id=\"49c2104\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .mb-wrapper {\r\n --mb-bg: #120a1f;\r\n --mb-text: #f1eefc;\r\n --mb-text-muted: rgba(230, 224, 250, 0.72);\r\n --mb-accent: #c084fc;\r\n\r\n background: var(--mb-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .mb-wrapper * { box-sizing: border-box; }\r\n\r\n .mb-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n }\r\n\r\n .mb-heading {\r\n text-align: center;\r\n color: var(--mb-text);\r\n font-size: clamp(28px, 3.6vw, 40px);\r\n font-weight: 700;\r\n margin: 0 0 16px;\r\n }\r\n .mb-sub {\r\n text-align: center;\r\n color: var(--mb-text-muted);\r\n font-size: 16px;\r\n max-width: 600px;\r\n margin: 0 auto 56px;\r\n line-height: 1.6;\r\n }\r\n\r\n .mb-benefits {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 36px;\r\n }\r\n\r\n .mb-benefit {\r\n text-align: left;\r\n padding: 28px 22px;\r\n border-radius: 18px;\r\n border: 1px solid rgba(255,255,255,0.06);\r\n background: linear-gradient(160deg, rgba(124,58,237,0.05) 0%, rgba(18,10,31,0) 60%);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: mbFadeUp 0.7s ease forwards;\r\n transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;\r\n }\r\n .mb-benefit:nth-child(1) { animation-delay: 0.05s; }\r\n .mb-benefit:nth-child(2) { animation-delay: 0.15s; }\r\n .mb-benefit:nth-child(3) { animation-delay: 0.25s; }\r\n .mb-benefit:nth-child(4) { animation-delay: 0.35s; }\r\n\r\n .mb-benefit:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(192, 132, 252, 0.4);\r\n background: linear-gradient(160deg, rgba(124,58,237,0.12) 0%, rgba(18,10,31,0) 70%);\r\n }\r\n\r\n .mb-icon-wrap {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 16px;\r\n background: rgba(168, 85, 247, 0.1);\r\n border: 1px solid rgba(192, 132, 252, 0.25);\r\n margin-bottom: 20px;\r\n transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n .mb-benefit:hover .mb-icon-wrap {\r\n transform: scale(1.08) rotate(-4deg);\r\n background: rgba(168, 85, 247, 0.2);\r\n box-shadow: 0 0 30px rgba(168, 85, 247, 0.35);\r\n }\r\n .mb-icon-wrap svg {\r\n width: 30px;\r\n height: 30px;\r\n color: #c4b5fd;\r\n transition: color 0.4s ease;\r\n }\r\n .mb-benefit:hover .mb-icon-wrap svg {\r\n color: #e9d5ff;\r\n }\r\n\r\n .mb-benefit-heading {\r\n color: var(--mb-text);\r\n font-size: 19px;\r\n font-weight: 700;\r\n margin: 0 0 10px;\r\n line-height: 1.3;\r\n }\r\n .mb-benefit-text {\r\n color: var(--mb-text-muted);\r\n font-size: 14.5px;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n @keyframes mbFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .mb-benefits {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 24px;\r\n }\r\n }\r\n @media (max-width: 560px) {\r\n .mb-benefits {\r\n grid-template-columns: 1fr;\r\n }\r\n .mb-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"mb-wrapper\">\r\n <div class=\"mb-inner\">\r\n\r\n <h2 class=\"mb-heading\">Why teams love Mail 2 Post<\/h2>\r\n <p class=\"mb-sub\">No app, no login, no extra steps \u2014 just send a photo and let socials.ink handle the rest.<\/p>\r\n\r\n <div class=\"mb-benefits\">\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"9.5\" y=\"14.5\" width=\"35\" height=\"25\" rx=\"3.5\"><\/rect><path d=\"M9.5 17 27 30.5 44.5 17\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Post straight from your inbox<\/h3>\r\n <p class=\"mb-benefit-text\">No app to open, no dashboard to log into. Snap a photo, attach it to an email, and send \u2014 that's the whole workflow.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"9.5\" y=\"9.5\" width=\"35\" height=\"35\" rx=\"3.5\"><\/rect><circle cx=\"20\" cy=\"20.5\" r=\"3.5\"><\/circle><path d=\"M44.5 33 33 22 15 40\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Automatically on-brand<\/h3>\r\n <p class=\"mb-benefit-text\">Your subject line and short note become a finished cover image and caption, styled to match your project's brand kit.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M27 8.5 43 15v11c0 12-7 18.5-16 20-9-1.5-16-8-16-20V15L27 8.5Z\"><\/path><path d=\"M20.5 27.5 25 32l9-10\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Only approved senders<\/h3>\r\n <p class=\"mb-benefit-text\">Every project has its own publish address. Only email addresses you've approved can send posts in \u2014 no surprises.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M37.5 12 42 16.5 20.5 38 13 40.5 15.5 33 37.5 12Z\"><\/path><path d=\"M32.5 17 37 21.5\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">You review before it's live<\/h3>\r\n <p class=\"mb-benefit-text\">The finished post comes back to you first \u2014 edit the caption, swap the image, or approve it as-is before it publishes.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8598ef4 e-con e-atomic-element e-flexbox-base e-bb142e6 \" data-id=\"8598ef4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8598ef4\">\n \t\t<div class=\"elementor-element elementor-element-0fc552b elementor-widget elementor-widget-html\" data-id=\"0fc552b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fd-wrapper {\r\n --fd-bg: #120a1f;\r\n --fd-text: #f1eefc;\r\n --fd-text-muted: rgba(230, 224, 250, 0.78);\r\n --fd-accent: #c084fc;\r\n\r\n background: var(--fd-bg);\r\n padding: 90px 24px 100px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .fd-wrapper * { box-sizing: border-box; }\r\n\r\n .fd-inner {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .fd-eyebrow {\r\n display: inline-block;\r\n color: var(--fd-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 18px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n opacity: 0;\r\n transform: translateY(16px);\r\n animation: fdFadeUp 0.6s ease forwards;\r\n }\r\n\r\n .fd-heading {\r\n color: var(--fd-text);\r\n font-size: clamp(32px, 4.8vw, 54px);\r\n font-weight: 800;\r\n line-height: 1.15;\r\n margin: 0 0 20px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fdFadeUp 0.7s ease 0.08s forwards;\r\n }\r\n\r\n .fd-text {\r\n color: var(--fd-text-muted);\r\n font-size: 18px;\r\n line-height: 1.65;\r\n max-width: 640px;\r\n margin: 0 auto 56px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fdFadeUp 0.7s ease 0.16s forwards;\r\n }\r\n\r\n .fd-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 40px 80px rgba(0,0,0,0.55), 0 0 90px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(30px) scale(0.97);\r\n animation: fdFadeUp 0.8s ease 0.26s forwards;\r\n transition: transform 0.5s ease, box-shadow 0.5s ease;\r\n }\r\n .fd-image-frame:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.3), 0 50px 90px rgba(0,0,0,0.6), 0 0 110px rgba(124,58,237,0.35);\r\n }\r\n .fd-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes fdFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 700px) {\r\n .fd-wrapper { padding: 60px 20px 70px; }\r\n .fd-text { margin-bottom: 40px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fd-wrapper\">\r\n <div class=\"fd-inner\">\r\n\r\n <span class=\"fd-eyebrow\">Mail 2 Post<\/span>\r\n <h2 class=\"fd-heading\">Post better, together<\/h2>\r\n <p class=\"fd-text\">Snap a photo, email it in, and let socials.ink handle the rest \u2014 an on-brand cover image and caption, ready for you to review and publish.<\/p>\r\n\r\n <div class=\"fd-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_14_18-AM.png\" alt=\"Mail 2 Post \u2014 send a photo by email, get back a finished post\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-79131e9 e-con e-atomic-element e-flexbox-base e-f056488 \" data-id=\"79131e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"79131e9\">\n \t\t<div class=\"elementor-element elementor-element-75e089e elementor-widget elementor-widget-html\" data-id=\"75e089e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .il-wrapper {\r\n --il-bg: #120a1f;\r\n --il-text: #f1eefc;\r\n --il-text-muted: rgba(230, 224, 250, 0.78);\r\n --il-accent: #c084fc;\r\n\r\n background: var(--il-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .il-wrapper * { box-sizing: border-box; }\r\n\r\n .il-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .il-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: ilFadeUp 0.8s ease forwards;\r\n }\r\n .il-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .il-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: ilFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .il-eyebrow {\r\n display: inline-block;\r\n color: var(--il-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .il-heading {\r\n color: var(--il-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .il-text {\r\n color: var(--il-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .il-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .il-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .il-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .il-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n @keyframes ilFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .il-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .il-text { max-width: 100%; }\r\n .il-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"il-wrapper\">\r\n <div class=\"il-inner\">\r\n\r\n <div class=\"il-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_33_29-AM.png\" alt=\"Mail 2 Post \u2014 send a photo by email, get a ready post\">\r\n <\/div>\r\n\r\n <div class=\"il-content\">\r\n <span class=\"il-eyebrow\">From email to post<\/span>\r\n <h2 class=\"il-heading\">Your inbox is your content studio<\/h2>\r\n <p class=\"il-text\">No app to open, no dashboard to log into. Attach a photo to an email, add a short note, and socials.ink turns it into a ready-to-publish post \u2014 cover image and caption included.<\/p>\r\n <a class=\"il-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-85e923d e-con e-atomic-element e-flexbox-base e-f25e406 \" data-id=\"85e923d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"85e923d\">\n \t\t<div class=\"elementor-element elementor-element-50107b9 elementor-widget elementor-widget-html\" data-id=\"50107b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .ir-wrapper {\r\n --ir-bg: #120a1f;\r\n --ir-text: #f1eefc;\r\n --ir-text-muted: rgba(230, 224, 250, 0.78);\r\n --ir-accent: #c084fc;\r\n\r\n background: var(--ir-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .ir-wrapper * { box-sizing: border-box; }\r\n\r\n .ir-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .ir-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: irFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .ir-eyebrow {\r\n display: inline-block;\r\n color: var(--ir-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .ir-heading {\r\n color: var(--ir-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .ir-text {\r\n color: var(--ir-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .ir-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .ir-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .ir-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .ir-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n .ir-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: irFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n .ir-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes irFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .ir-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .ir-text { max-width: 100%; }\r\n .ir-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"ir-wrapper\">\r\n <div class=\"ir-inner\">\r\n\r\n <div class=\"ir-content\">\r\n <span class=\"ir-eyebrow\">Review & publish<\/span>\r\n <h2 class=\"ir-heading\">Your post, ready before you even ask<\/h2>\r\n <p class=\"ir-text\">No back-and-forth, no waiting on a designer. The moment you hit send, socials.ink drafts the cover image and caption \u2014 you just open the link, tweak if you like, and publish.<\/p>\r\n <a class=\"ir-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"ir-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_40_49-AM.png\" alt=\"Mail 2 Post \u2014 post ready to review and publish\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-25e6333 e-con e-atomic-element e-flexbox-base e-0a0079d \" data-id=\"25e6333\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"25e6333\">\n \t\t<div class=\"elementor-element elementor-element-74a05ec elementor-widget elementor-widget-html\" data-id=\"74a05ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .il2-wrapper {\r\n --il2-bg: #120a1f;\r\n --il2-text: #f1eefc;\r\n --il2-text-muted: rgba(230, 224, 250, 0.78);\r\n --il2-accent: #c084fc;\r\n\r\n background: var(--il2-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .il2-wrapper * { box-sizing: border-box; }\r\n\r\n .il2-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .il2-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: il2FadeUp 0.8s ease forwards;\r\n }\r\n .il2-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .il2-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: il2FadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .il2-eyebrow {\r\n display: inline-block;\r\n color: var(--il2-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .il2-heading {\r\n color: var(--il2-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .il2-text {\r\n color: var(--il2-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .il2-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .il2-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .il2-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .il2-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n @keyframes il2FadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .il2-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .il2-text { max-width: 100%; }\r\n .il2-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"il2-wrapper\">\r\n <div class=\"il2-inner\">\r\n\r\n <div class=\"il2-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_46_59-AM.png\" alt=\"Mail 2 Post \u2014 every post organized in one place\">\r\n <\/div>\r\n\r\n <div class=\"il2-content\">\r\n <span class=\"il2-eyebrow\">All in one place<\/span>\r\n <h2 class=\"il2-heading\">Every post you send in, right where you can see it<\/h2>\r\n <p class=\"il2-text\">No hunting through old emails. Every post you send by mail lands in one organized queue \u2014 see what's pending review, what's approved, and what's already live.<\/p>\r\n <a class=\"il2-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cb5f178 e-con e-atomic-element e-flexbox-base e-2ec2efe \" data-id=\"cb5f178\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cb5f178\">\n \t\t<div class=\"elementor-element elementor-element-7ee528d elementor-widget elementor-widget-html\" data-id=\"7ee528d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .tq-wrapper {\r\n --tq-bg: #120a1f;\r\n --tq-text: #f1eefc;\r\n --tq-text-muted: rgba(230, 224, 250, 0.78);\r\n --tq-accent: #c084fc;\r\n\r\n background: var(--tq-bg);\r\n padding: 80px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n\r\n .tq-wrapper * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .tq-card {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n text-align: center;\r\n padding: 70px 50px;\r\n border-radius: 28px;\r\n background: linear-gradient(160deg, #2c1653 0%, #150c28 100%);\r\n border: 1px solid rgba(192,132,252,0.25);\r\n box-shadow:\r\n 0 0 0 1px rgba(192,132,252,.10),\r\n 0 30px 60px rgba(0,0,0,.50),\r\n 0 0 80px rgba(124,58,237,.20);\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: tqFadeUp .8s ease forwards;\r\n }\r\n\r\n .tq-mark {\r\n color: rgba(192,132,252,.35);\r\n font-size: 80px;\r\n line-height: 1;\r\n font-family: Georgia, serif;\r\n margin: 0 0 12px;\r\n }\r\n\r\n .tq-quote {\r\n color: var(--tq-text);\r\n font-size: clamp(20px,2.4vw,28px);\r\n font-weight: 600;\r\n line-height: 1.5;\r\n margin: 0 0 40px;\r\n }\r\n\r\n .tq-author {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n }\r\n\r\n .tq-avatar {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg,#a855f7,#7c3aed);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-weight: 700;\r\n font-size: 18px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .tq-author-text {\r\n text-align: left;\r\n }\r\n\r\n .tq-name {\r\n color: var(--tq-text);\r\n font-weight: 700;\r\n font-size: 16px;\r\n margin: 0;\r\n }\r\n\r\n .tq-company {\r\n display: none;\r\n }\r\n\r\n @keyframes tqFadeUp {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width:700px){\r\n .tq-card{\r\n padding:50px 28px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"tq-wrapper\">\r\n <div class=\"tq-card\">\r\n\r\n <div class=\"tq-mark\">“<\/div>\r\n\r\n <p class=\"tq-quote\">\r\n Mail 2 Post is a lifesaver during events. I just email a photo from my phone and by the time I'm back at my desk, the post is already drafted and waiting for me to approve.\r\n <\/p>\r\n\r\n <div class=\"tq-author\">\r\n\r\n <div class=\"tq-avatar\">SK<\/div>\r\n\r\n <div class=\"tq-author-text\">\r\n <p class=\"tq-name\">Sadia Khan<\/p>\r\n <p class=\"tq-company\"><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e628795 e-con e-atomic-element e-flexbox-base e-a3efd0c \" data-id=\"e628795\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e628795\">\n \t\t<div class=\"elementor-element elementor-element-5be98a8 elementor-widget elementor-widget-html\" data-id=\"5be98a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .rc-wrapper {\r\n --rc-bg: #120a1f;\r\n --rc-text: #f1eefc;\r\n --rc-text-muted: rgba(230, 224, 250, 0.72);\r\n --rc-accent: #c084fc;\r\n\r\n background: var(--rc-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .rc-wrapper * { box-sizing: border-box; }\r\n\r\n .rc-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n }\r\n\r\n .rc-eyebrow {\r\n display: block;\r\n color: var(--rc-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 14px;\r\n }\r\n\r\n .rc-heading {\r\n color: var(--rc-text);\r\n font-size: clamp(28px, 3.6vw, 42px);\r\n font-weight: 700;\r\n margin: 0 0 14px;\r\n max-width: 700px;\r\n }\r\n\r\n .rc-sub {\r\n color: var(--rc-text-muted);\r\n font-size: 16px;\r\n max-width: 560px;\r\n margin: 0 0 50px;\r\n line-height: 1.6;\r\n }\r\n\r\n .rc-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n .rc-card {\r\n display: block;\r\n text-decoration: none !important;\r\n border-radius: 18px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.07);\r\n background: rgba(255,255,255,0.02);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: rcFadeUp 0.7s ease forwards;\r\n transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n .rc-card:nth-child(1) { animation-delay: 0.05s; }\r\n .rc-card:nth-child(2) { animation-delay: 0.15s; }\r\n .rc-card:nth-child(3) { animation-delay: 0.25s; }\r\n\r\n .rc-card:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(192, 132, 252, 0.4);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(124,58,237,0.2);\r\n }\r\n\r\n .rc-card-image {\r\n height: 200px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(160deg, #3b1d6e 0%, #1a0f30 100%);\r\n }\r\n .rc-card-image svg {\r\n width: 56px;\r\n height: 56px;\r\n color: rgba(192, 132, 252, 0.55);\r\n transition: transform 0.4s ease, color 0.4s ease;\r\n }\r\n .rc-card:hover .rc-card-image svg {\r\n transform: scale(1.1);\r\n color: rgba(216, 180, 254, 0.85);\r\n }\r\n\r\n .rc-card-content {\r\n padding: 24px 22px 28px;\r\n }\r\n .rc-card-title {\r\n color: var(--rc-text);\r\n font-size: 18px;\r\n font-weight: 700;\r\n margin: 0 0 10px;\r\n line-height: 1.35;\r\n }\r\n .rc-card-text {\r\n color: var(--rc-text-muted);\r\n font-size: 14.5px;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n @keyframes rcFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .rc-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"rc-wrapper\">\r\n <div class=\"rc-inner\">\r\n\r\n <span class=\"rc-eyebrow\">Resources<\/span>\r\n <h2 class=\"rc-heading\">Get the most out of Mail 2 Post<\/h2>\r\n <p class=\"rc-sub\">Guides and tips to help you post faster, straight from your inbox.<\/p>\r\n\r\n <div class=\"rc-grid\">\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect><path d=\"m3 7 9 6 9-6\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Getting started with Mail 2 Post<\/h3>\r\n <p class=\"rc-card-text\">A step-by-step walkthrough of approving senders, sending your first photo, and reviewing the post it creates.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z\"><\/path><path d=\"m9 12 2 2 4-4\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Keeping your inbox secure<\/h3>\r\n <p class=\"rc-card-text\">How approved senders work, and best practices for managing who's allowed to post on behalf of your project.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20V10\"><\/path><path d=\"M18 20V4\"><\/path><path d=\"M6 20v-4\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Writing subject lines that work<\/h3>\r\n <p class=\"rc-card-text\">Tips for writing a short note and subject line that help the AI generate a caption that actually sounds like you.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f2009fb e-con e-atomic-element e-flexbox-base e-5b3f5bd \" data-id=\"f2009fb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f2009fb\">\n \t\t<div class=\"elementor-element elementor-element-fad8a9f elementor-widget elementor-widget-html\" data-id=\"fad8a9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fq-wrapper {\r\n --fq-bg: #120a1f;\r\n --fq-text: #f1eefc;\r\n --fq-text-muted: rgba(230, 224, 250, 0.78);\r\n --fq-accent: #c084fc;\r\n\r\n background: var(--fq-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .fq-wrapper * { box-sizing: border-box; }\r\n\r\n .fq-inner {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .fq-heading {\r\n color: var(--fq-text);\r\n font-size: clamp(28px, 3.6vw, 40px);\r\n font-weight: 700;\r\n text-align: center;\r\n margin: 0 0 48px;\r\n }\r\n\r\n .fq-item {\r\n border-radius: 16px;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n background: rgba(255,255,255,0.02);\r\n margin-bottom: 16px;\r\n overflow: hidden;\r\n transition: border-color 0.3s ease, background 0.3s ease;\r\n }\r\n .fq-item[open] {\r\n border-color: rgba(192, 132, 252, 0.4);\r\n background: rgba(124, 58, 237, 0.06);\r\n }\r\n\r\n .fq-item summary {\r\n list-style: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n padding: 22px 24px;\r\n }\r\n .fq-item summary::-webkit-details-marker { display: none; }\r\n\r\n .fq-question {\r\n color: var(--fq-text);\r\n font-size: 16.5px;\r\n font-weight: 600;\r\n margin: 0;\r\n }\r\n\r\n .fq-icon {\r\n width: 22px;\r\n height: 22px;\r\n flex-shrink: 0;\r\n color: var(--fq-accent);\r\n transition: transform 0.35s ease;\r\n }\r\n .fq-item[open] .fq-icon {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .fq-answer {\r\n padding: 0 24px 22px;\r\n color: var(--fq-text-muted);\r\n font-size: 15px;\r\n line-height: 1.7;\r\n }\r\n .fq-answer a {\r\n color: var(--fq-accent);\r\n text-decoration: underline;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .fq-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fq-wrapper\">\r\n <div class=\"fq-inner\">\r\n\r\n <h2 class=\"fq-heading\">FAQs<\/h2>\r\n\r\n <details class=\"fq-item\" open>\r\n <summary>\r\n <h3 class=\"fq-question\">How do I set up Mail 2 Post for my project?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Open your project settings and go to Mail 2 Post. Approve at least one sender email address, then send a test photo to publish@socials.ink with a subject line and short note.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Who is allowed to send in a post?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Only email addresses you've approved in \"Approved senders\" can post to a project. We verify each address with a one-time confirmation email before it's added, so no one can post just by typing your address into a From field.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">What happens after I send the email?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>socials.ink reads your subject and note, builds a cover image and caption, and sends you back a link. Nothing goes live automatically \u2014 you review it first, make any edits, and publish when you're ready.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Can I edit the post before it publishes?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Yes. The link you get back opens the draft in your project, where you can swap the image, rewrite the caption, or adjust anything before you approve and publish it.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Can I use Mail 2 Post for more than one project?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Yes \u2014 each project has its own approved senders and settings. Use \"Switch project\" from the Mail 2 Post screen to set up another project's inbox.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-7d6fc94 e-con e-atomic-element e-flexbox-base e-0da53d7 \" data-id=\"7d6fc94\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7d6fc94\">\n \t\t<div class=\"elementor-element elementor-element-275e37e elementor-widget elementor-widget-html\" data-id=\"275e37e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fc-wrapper {\r\n --fc-bg: #120a1f;\r\n --fc-text: #f1eefc;\r\n --fc-text-muted: rgba(230, 224, 250, 0.72);\r\n\r\n background: var(--fc-bg);\r\n padding: 100px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .fc-wrapper * { box-sizing: border-box; }\r\n\r\n \/* soft ambient glow behind the content *\/\r\n .fc-wrapper::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 700px;\r\n height: 700px;\r\n background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, rgba(124,58,237,0) 70%);\r\n transform: translate(-50%, -50%);\r\n pointer-events: none;\r\n }\r\n\r\n .fc-inner {\r\n position: relative;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fcFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .fc-heading {\r\n color: var(--fc-text);\r\n font-size: clamp(28px, 4vw, 44px);\r\n font-weight: 800;\r\n line-height: 1.2;\r\n margin: 0 0 32px;\r\n }\r\n\r\n .fc-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 16px 32px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .fc-cta:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 14px 36px rgba(124, 58, 237, 0.6);\r\n }\r\n .fc-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .fc-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n .fc-note {\r\n color: var(--fc-text-muted);\r\n font-size: 14px;\r\n margin: 20px 0 0;\r\n }\r\n\r\n @keyframes fcFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fc-wrapper\">\r\n <div class=\"fc-inner\">\r\n <h2 class=\"fc-heading\">Post from anywhere, without opening an app<\/h2>\r\n <a class=\"fc-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <p class=\"fc-note\">No credit card needed. Free forever.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Preview Mail 2 Post Snap it. Email it. It’s posted. Snapped a photo at an event? Email it to publish@socials.ink with a subject and a short note \u2014 we’ll turn it into a finished post: a cover image plus a written caption, sent back to you to review, edit, and publish. Learn more Preview Why […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-700","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=700"}],"version-history":[{"count":0,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/700\/revisions"}],"wp:attachment":[{"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\nPreview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .cs-hero-wrapper {\r\n --cs-bg: #120a1f;\r\n --cs-text: #f1eefc;\r\n --cs-text-muted: rgba(230, 224, 250, 0.78);\r\n --cs-accent: #c084fc;\r\n --cs-accent-2: #a855f7;\r\n\r\n background: var(--cs-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .cs-hero-wrapper * { box-sizing: border-box; }\r\n\r\n .cs-hero-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 56px;\r\n }\r\n\r\n .cs-hero-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: csFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .cs-eyebrow {\r\n display: inline-block;\r\n color: var(--cs-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .cs-heading {\r\n color: var(--cs-text);\r\n font-size: clamp(32px, 4vw, 46px);\r\n font-weight: 700;\r\n line-height: 1.15;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .cs-text {\r\n color: var(--cs-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .cs-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .cs-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .cs-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .cs-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================================\r\n Buffer-style image frame: colored, glowing background box.\r\n Main screenshot fills it edge-to-edge (object-fit: cover, so\r\n no blank margins). A second image floats on top as a card,\r\n overlapping the bottom-right, with its own shadow\/border.\r\n ============================================================ *\/\r\n .cs-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: csFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .cs-image-main {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes csFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .cs-hero-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .cs-text { max-width: 100%; }\r\n .cs-hero-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"cs-hero-wrapper\">\r\n <div class=\"cs-hero-inner\">\r\n\r\n <div class=\"cs-hero-content\">\r\n <span class=\"cs-eyebrow\">Mail 2 Post<\/span>\r\n <h1 class=\"cs-heading\">Snap it. Email it. It's posted.<\/h1>\r\n <p class=\"cs-text\">Snapped a photo at an event? Email it to publish@socials.ink with a subject and a short note \u2014 we'll turn it into a finished post: a cover image plus a written caption, sent back to you to review, edit, and publish.<\/p>\r\n <a class=\"cs-cta\" href=\"#\">\r\n <span>Learn more<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"cs-image-frame\">\r\n <img decoding=\"async\" class=\"cs-image-main\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/mail2post.png\" alt=\"Mail 2 Post \u2014 approved senders and email settings\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cd96f26 e-con e-atomic-element e-flexbox-base e-ebcad87 \" data-id=\"cd96f26\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cd96f26\">\n \t\t<div class=\"elementor-element elementor-element-49c2104 elementor-widget elementor-widget-html\" data-id=\"49c2104\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .mb-wrapper {\r\n --mb-bg: #120a1f;\r\n --mb-text: #f1eefc;\r\n --mb-text-muted: rgba(230, 224, 250, 0.72);\r\n --mb-accent: #c084fc;\r\n\r\n background: var(--mb-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .mb-wrapper * { box-sizing: border-box; }\r\n\r\n .mb-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n }\r\n\r\n .mb-heading {\r\n text-align: center;\r\n color: var(--mb-text);\r\n font-size: clamp(28px, 3.6vw, 40px);\r\n font-weight: 700;\r\n margin: 0 0 16px;\r\n }\r\n .mb-sub {\r\n text-align: center;\r\n color: var(--mb-text-muted);\r\n font-size: 16px;\r\n max-width: 600px;\r\n margin: 0 auto 56px;\r\n line-height: 1.6;\r\n }\r\n\r\n .mb-benefits {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 36px;\r\n }\r\n\r\n .mb-benefit {\r\n text-align: left;\r\n padding: 28px 22px;\r\n border-radius: 18px;\r\n border: 1px solid rgba(255,255,255,0.06);\r\n background: linear-gradient(160deg, rgba(124,58,237,0.05) 0%, rgba(18,10,31,0) 60%);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: mbFadeUp 0.7s ease forwards;\r\n transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;\r\n }\r\n .mb-benefit:nth-child(1) { animation-delay: 0.05s; }\r\n .mb-benefit:nth-child(2) { animation-delay: 0.15s; }\r\n .mb-benefit:nth-child(3) { animation-delay: 0.25s; }\r\n .mb-benefit:nth-child(4) { animation-delay: 0.35s; }\r\n\r\n .mb-benefit:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(192, 132, 252, 0.4);\r\n background: linear-gradient(160deg, rgba(124,58,237,0.12) 0%, rgba(18,10,31,0) 70%);\r\n }\r\n\r\n .mb-icon-wrap {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 16px;\r\n background: rgba(168, 85, 247, 0.1);\r\n border: 1px solid rgba(192, 132, 252, 0.25);\r\n margin-bottom: 20px;\r\n transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n .mb-benefit:hover .mb-icon-wrap {\r\n transform: scale(1.08) rotate(-4deg);\r\n background: rgba(168, 85, 247, 0.2);\r\n box-shadow: 0 0 30px rgba(168, 85, 247, 0.35);\r\n }\r\n .mb-icon-wrap svg {\r\n width: 30px;\r\n height: 30px;\r\n color: #c4b5fd;\r\n transition: color 0.4s ease;\r\n }\r\n .mb-benefit:hover .mb-icon-wrap svg {\r\n color: #e9d5ff;\r\n }\r\n\r\n .mb-benefit-heading {\r\n color: var(--mb-text);\r\n font-size: 19px;\r\n font-weight: 700;\r\n margin: 0 0 10px;\r\n line-height: 1.3;\r\n }\r\n .mb-benefit-text {\r\n color: var(--mb-text-muted);\r\n font-size: 14.5px;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n @keyframes mbFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .mb-benefits {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 24px;\r\n }\r\n }\r\n @media (max-width: 560px) {\r\n .mb-benefits {\r\n grid-template-columns: 1fr;\r\n }\r\n .mb-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"mb-wrapper\">\r\n <div class=\"mb-inner\">\r\n\r\n <h2 class=\"mb-heading\">Why teams love Mail 2 Post<\/h2>\r\n <p class=\"mb-sub\">No app, no login, no extra steps \u2014 just send a photo and let socials.ink handle the rest.<\/p>\r\n\r\n <div class=\"mb-benefits\">\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"9.5\" y=\"14.5\" width=\"35\" height=\"25\" rx=\"3.5\"><\/rect><path d=\"M9.5 17 27 30.5 44.5 17\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Post straight from your inbox<\/h3>\r\n <p class=\"mb-benefit-text\">No app to open, no dashboard to log into. Snap a photo, attach it to an email, and send \u2014 that's the whole workflow.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"9.5\" y=\"9.5\" width=\"35\" height=\"35\" rx=\"3.5\"><\/rect><circle cx=\"20\" cy=\"20.5\" r=\"3.5\"><\/circle><path d=\"M44.5 33 33 22 15 40\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Automatically on-brand<\/h3>\r\n <p class=\"mb-benefit-text\">Your subject line and short note become a finished cover image and caption, styled to match your project's brand kit.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M27 8.5 43 15v11c0 12-7 18.5-16 20-9-1.5-16-8-16-20V15L27 8.5Z\"><\/path><path d=\"M20.5 27.5 25 32l9-10\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">Only approved senders<\/h3>\r\n <p class=\"mb-benefit-text\">Every project has its own publish address. Only email addresses you've approved can send posts in \u2014 no surprises.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-benefit\">\r\n <span class=\"mb-icon-wrap\">\r\n <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M37.5 12 42 16.5 20.5 38 13 40.5 15.5 33 37.5 12Z\"><\/path><path d=\"M32.5 17 37 21.5\"><\/path><\/svg>\r\n <\/span>\r\n <div class=\"mb-benefit-content\">\r\n <h3 class=\"mb-benefit-heading\">You review before it's live<\/h3>\r\n <p class=\"mb-benefit-text\">The finished post comes back to you first \u2014 edit the caption, swap the image, or approve it as-is before it publishes.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8598ef4 e-con e-atomic-element e-flexbox-base e-bb142e6 \" data-id=\"8598ef4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8598ef4\">\n \t\t<div class=\"elementor-element elementor-element-0fc552b elementor-widget elementor-widget-html\" data-id=\"0fc552b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fd-wrapper {\r\n --fd-bg: #120a1f;\r\n --fd-text: #f1eefc;\r\n --fd-text-muted: rgba(230, 224, 250, 0.78);\r\n --fd-accent: #c084fc;\r\n\r\n background: var(--fd-bg);\r\n padding: 90px 24px 100px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .fd-wrapper * { box-sizing: border-box; }\r\n\r\n .fd-inner {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .fd-eyebrow {\r\n display: inline-block;\r\n color: var(--fd-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 18px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n opacity: 0;\r\n transform: translateY(16px);\r\n animation: fdFadeUp 0.6s ease forwards;\r\n }\r\n\r\n .fd-heading {\r\n color: var(--fd-text);\r\n font-size: clamp(32px, 4.8vw, 54px);\r\n font-weight: 800;\r\n line-height: 1.15;\r\n margin: 0 0 20px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fdFadeUp 0.7s ease 0.08s forwards;\r\n }\r\n\r\n .fd-text {\r\n color: var(--fd-text-muted);\r\n font-size: 18px;\r\n line-height: 1.65;\r\n max-width: 640px;\r\n margin: 0 auto 56px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fdFadeUp 0.7s ease 0.16s forwards;\r\n }\r\n\r\n .fd-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 40px 80px rgba(0,0,0,0.55), 0 0 90px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(30px) scale(0.97);\r\n animation: fdFadeUp 0.8s ease 0.26s forwards;\r\n transition: transform 0.5s ease, box-shadow 0.5s ease;\r\n }\r\n .fd-image-frame:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.3), 0 50px 90px rgba(0,0,0,0.6), 0 0 110px rgba(124,58,237,0.35);\r\n }\r\n .fd-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes fdFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 700px) {\r\n .fd-wrapper { padding: 60px 20px 70px; }\r\n .fd-text { margin-bottom: 40px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fd-wrapper\">\r\n <div class=\"fd-inner\">\r\n\r\n <span class=\"fd-eyebrow\">Mail 2 Post<\/span>\r\n <h2 class=\"fd-heading\">Post better, together<\/h2>\r\n <p class=\"fd-text\">Snap a photo, email it in, and let socials.ink handle the rest \u2014 an on-brand cover image and caption, ready for you to review and publish.<\/p>\r\n\r\n <div class=\"fd-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_14_18-AM.png\" alt=\"Mail 2 Post \u2014 send a photo by email, get back a finished post\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-79131e9 e-con e-atomic-element e-flexbox-base e-f056488 \" data-id=\"79131e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"79131e9\">\n \t\t<div class=\"elementor-element elementor-element-75e089e elementor-widget elementor-widget-html\" data-id=\"75e089e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .il-wrapper {\r\n --il-bg: #120a1f;\r\n --il-text: #f1eefc;\r\n --il-text-muted: rgba(230, 224, 250, 0.78);\r\n --il-accent: #c084fc;\r\n\r\n background: var(--il-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .il-wrapper * { box-sizing: border-box; }\r\n\r\n .il-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .il-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: ilFadeUp 0.8s ease forwards;\r\n }\r\n .il-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .il-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: ilFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .il-eyebrow {\r\n display: inline-block;\r\n color: var(--il-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .il-heading {\r\n color: var(--il-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .il-text {\r\n color: var(--il-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .il-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .il-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .il-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .il-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n @keyframes ilFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .il-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .il-text { max-width: 100%; }\r\n .il-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"il-wrapper\">\r\n <div class=\"il-inner\">\r\n\r\n <div class=\"il-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_33_29-AM.png\" alt=\"Mail 2 Post \u2014 send a photo by email, get a ready post\">\r\n <\/div>\r\n\r\n <div class=\"il-content\">\r\n <span class=\"il-eyebrow\">From email to post<\/span>\r\n <h2 class=\"il-heading\">Your inbox is your content studio<\/h2>\r\n <p class=\"il-text\">No app to open, no dashboard to log into. Attach a photo to an email, add a short note, and socials.ink turns it into a ready-to-publish post \u2014 cover image and caption included.<\/p>\r\n <a class=\"il-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-85e923d e-con e-atomic-element e-flexbox-base e-f25e406 \" data-id=\"85e923d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"85e923d\">\n \t\t<div class=\"elementor-element elementor-element-50107b9 elementor-widget elementor-widget-html\" data-id=\"50107b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .ir-wrapper {\r\n --ir-bg: #120a1f;\r\n --ir-text: #f1eefc;\r\n --ir-text-muted: rgba(230, 224, 250, 0.78);\r\n --ir-accent: #c084fc;\r\n\r\n background: var(--ir-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .ir-wrapper * { box-sizing: border-box; }\r\n\r\n .ir-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .ir-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: irFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .ir-eyebrow {\r\n display: inline-block;\r\n color: var(--ir-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .ir-heading {\r\n color: var(--ir-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .ir-text {\r\n color: var(--ir-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .ir-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .ir-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .ir-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .ir-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n .ir-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: irFadeUp 0.8s ease 0.15s forwards;\r\n }\r\n .ir-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes irFadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .ir-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .ir-text { max-width: 100%; }\r\n .ir-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"ir-wrapper\">\r\n <div class=\"ir-inner\">\r\n\r\n <div class=\"ir-content\">\r\n <span class=\"ir-eyebrow\">Review & publish<\/span>\r\n <h2 class=\"ir-heading\">Your post, ready before you even ask<\/h2>\r\n <p class=\"ir-text\">No back-and-forth, no waiting on a designer. The moment you hit send, socials.ink drafts the cover image and caption \u2014 you just open the link, tweak if you like, and publish.<\/p>\r\n <a class=\"ir-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"ir-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_40_49-AM.png\" alt=\"Mail 2 Post \u2014 post ready to review and publish\">\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-25e6333 e-con e-atomic-element e-flexbox-base e-0a0079d \" data-id=\"25e6333\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"25e6333\">\n \t\t<div class=\"elementor-element elementor-element-74a05ec elementor-widget elementor-widget-html\" data-id=\"74a05ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .il2-wrapper {\r\n --il2-bg: #120a1f;\r\n --il2-text: #f1eefc;\r\n --il2-text-muted: rgba(230, 224, 250, 0.78);\r\n --il2-accent: #c084fc;\r\n\r\n background: var(--il2-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n }\r\n .il2-wrapper * { box-sizing: border-box; }\r\n\r\n .il2-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: 64px;\r\n }\r\n\r\n .il2-image-frame {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n opacity: 0;\r\n transform: translateY(24px) scale(0.98);\r\n animation: il2FadeUp 0.8s ease forwards;\r\n }\r\n .il2-image-frame img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .il2-content {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: il2FadeUp 0.8s ease 0.15s forwards;\r\n }\r\n\r\n .il2-eyebrow {\r\n display: inline-block;\r\n color: var(--il2-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 16px;\r\n padding: 6px 14px;\r\n border: 1px solid rgba(192, 132, 252, 0.35);\r\n border-radius: 999px;\r\n background: rgba(168, 85, 247, 0.08);\r\n }\r\n\r\n .il2-heading {\r\n color: var(--il2-text);\r\n font-size: clamp(30px, 3.8vw, 42px);\r\n font-weight: 700;\r\n line-height: 1.18;\r\n margin: 0 0 20px;\r\n }\r\n\r\n .il2-text {\r\n color: var(--il2-text-muted);\r\n font-size: 17px;\r\n line-height: 1.65;\r\n margin: 0 0 32px;\r\n max-width: 460px;\r\n }\r\n\r\n .il2-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 15px 28px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .il2-cta:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n }\r\n .il2-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .il2-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n @keyframes il2FadeUp {\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .il2-inner {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .il2-text { max-width: 100%; }\r\n .il2-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"il2-wrapper\">\r\n <div class=\"il2-inner\">\r\n\r\n <div class=\"il2-image-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-01_46_59-AM.png\" alt=\"Mail 2 Post \u2014 every post organized in one place\">\r\n <\/div>\r\n\r\n <div class=\"il2-content\">\r\n <span class=\"il2-eyebrow\">All in one place<\/span>\r\n <h2 class=\"il2-heading\">Every post you send in, right where you can see it<\/h2>\r\n <p class=\"il2-text\">No hunting through old emails. Every post you send by mail lands in one organized queue \u2014 see what's pending review, what's approved, and what's already live.<\/p>\r\n <a class=\"il2-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cb5f178 e-con e-atomic-element e-flexbox-base e-2ec2efe \" data-id=\"cb5f178\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cb5f178\">\n \t\t<div class=\"elementor-element elementor-element-7ee528d elementor-widget elementor-widget-html\" data-id=\"7ee528d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .tq-wrapper {\r\n --tq-bg: #120a1f;\r\n --tq-text: #f1eefc;\r\n --tq-text-muted: rgba(230, 224, 250, 0.78);\r\n --tq-accent: #c084fc;\r\n\r\n background: var(--tq-bg);\r\n padding: 80px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n\r\n .tq-wrapper * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .tq-card {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n text-align: center;\r\n padding: 70px 50px;\r\n border-radius: 28px;\r\n background: linear-gradient(160deg, #2c1653 0%, #150c28 100%);\r\n border: 1px solid rgba(192,132,252,0.25);\r\n box-shadow:\r\n 0 0 0 1px rgba(192,132,252,.10),\r\n 0 30px 60px rgba(0,0,0,.50),\r\n 0 0 80px rgba(124,58,237,.20);\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: tqFadeUp .8s ease forwards;\r\n }\r\n\r\n .tq-mark {\r\n color: rgba(192,132,252,.35);\r\n font-size: 80px;\r\n line-height: 1;\r\n font-family: Georgia, serif;\r\n margin: 0 0 12px;\r\n }\r\n\r\n .tq-quote {\r\n color: var(--tq-text);\r\n font-size: clamp(20px,2.4vw,28px);\r\n font-weight: 600;\r\n line-height: 1.5;\r\n margin: 0 0 40px;\r\n }\r\n\r\n .tq-author {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n }\r\n\r\n .tq-avatar {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg,#a855f7,#7c3aed);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-weight: 700;\r\n font-size: 18px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .tq-author-text {\r\n text-align: left;\r\n }\r\n\r\n .tq-name {\r\n color: var(--tq-text);\r\n font-weight: 700;\r\n font-size: 16px;\r\n margin: 0;\r\n }\r\n\r\n .tq-company {\r\n display: none;\r\n }\r\n\r\n @keyframes tqFadeUp {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width:700px){\r\n .tq-card{\r\n padding:50px 28px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"tq-wrapper\">\r\n <div class=\"tq-card\">\r\n\r\n <div class=\"tq-mark\">“<\/div>\r\n\r\n <p class=\"tq-quote\">\r\n Mail 2 Post is a lifesaver during events. I just email a photo from my phone and by the time I'm back at my desk, the post is already drafted and waiting for me to approve.\r\n <\/p>\r\n\r\n <div class=\"tq-author\">\r\n\r\n <div class=\"tq-avatar\">SK<\/div>\r\n\r\n <div class=\"tq-author-text\">\r\n <p class=\"tq-name\">Sadia Khan<\/p>\r\n <p class=\"tq-company\"><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e628795 e-con e-atomic-element e-flexbox-base e-a3efd0c \" data-id=\"e628795\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e628795\">\n \t\t<div class=\"elementor-element elementor-element-5be98a8 elementor-widget elementor-widget-html\" data-id=\"5be98a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .rc-wrapper {\r\n --rc-bg: #120a1f;\r\n --rc-text: #f1eefc;\r\n --rc-text-muted: rgba(230, 224, 250, 0.72);\r\n --rc-accent: #c084fc;\r\n\r\n background: var(--rc-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .rc-wrapper * { box-sizing: border-box; }\r\n\r\n .rc-inner {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n }\r\n\r\n .rc-eyebrow {\r\n display: block;\r\n color: var(--rc-accent);\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin: 0 0 14px;\r\n }\r\n\r\n .rc-heading {\r\n color: var(--rc-text);\r\n font-size: clamp(28px, 3.6vw, 42px);\r\n font-weight: 700;\r\n margin: 0 0 14px;\r\n max-width: 700px;\r\n }\r\n\r\n .rc-sub {\r\n color: var(--rc-text-muted);\r\n font-size: 16px;\r\n max-width: 560px;\r\n margin: 0 0 50px;\r\n line-height: 1.6;\r\n }\r\n\r\n .rc-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n .rc-card {\r\n display: block;\r\n text-decoration: none !important;\r\n border-radius: 18px;\r\n overflow: hidden;\r\n border: 1px solid rgba(255,255,255,0.07);\r\n background: rgba(255,255,255,0.02);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: rcFadeUp 0.7s ease forwards;\r\n transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n .rc-card:nth-child(1) { animation-delay: 0.05s; }\r\n .rc-card:nth-child(2) { animation-delay: 0.15s; }\r\n .rc-card:nth-child(3) { animation-delay: 0.25s; }\r\n\r\n .rc-card:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(192, 132, 252, 0.4);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(124,58,237,0.2);\r\n }\r\n\r\n .rc-card-image {\r\n height: 200px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(160deg, #3b1d6e 0%, #1a0f30 100%);\r\n }\r\n .rc-card-image svg {\r\n width: 56px;\r\n height: 56px;\r\n color: rgba(192, 132, 252, 0.55);\r\n transition: transform 0.4s ease, color 0.4s ease;\r\n }\r\n .rc-card:hover .rc-card-image svg {\r\n transform: scale(1.1);\r\n color: rgba(216, 180, 254, 0.85);\r\n }\r\n\r\n .rc-card-content {\r\n padding: 24px 22px 28px;\r\n }\r\n .rc-card-title {\r\n color: var(--rc-text);\r\n font-size: 18px;\r\n font-weight: 700;\r\n margin: 0 0 10px;\r\n line-height: 1.35;\r\n }\r\n .rc-card-text {\r\n color: var(--rc-text-muted);\r\n font-size: 14.5px;\r\n line-height: 1.6;\r\n margin: 0;\r\n }\r\n\r\n @keyframes rcFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .rc-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"rc-wrapper\">\r\n <div class=\"rc-inner\">\r\n\r\n <span class=\"rc-eyebrow\">Resources<\/span>\r\n <h2 class=\"rc-heading\">Get the most out of Mail 2 Post<\/h2>\r\n <p class=\"rc-sub\">Guides and tips to help you post faster, straight from your inbox.<\/p>\r\n\r\n <div class=\"rc-grid\">\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect><path d=\"m3 7 9 6 9-6\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Getting started with Mail 2 Post<\/h3>\r\n <p class=\"rc-card-text\">A step-by-step walkthrough of approving senders, sending your first photo, and reviewing the post it creates.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z\"><\/path><path d=\"m9 12 2 2 4-4\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Keeping your inbox secure<\/h3>\r\n <p class=\"rc-card-text\">How approved senders work, and best practices for managing who's allowed to post on behalf of your project.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"rc-card\" href=\"#\">\r\n <div class=\"rc-card-image\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20V10\"><\/path><path d=\"M18 20V4\"><\/path><path d=\"M6 20v-4\"><\/path><\/svg>\r\n <\/div>\r\n <div class=\"rc-card-content\">\r\n <h3 class=\"rc-card-title\">Writing subject lines that work<\/h3>\r\n <p class=\"rc-card-text\">Tips for writing a short note and subject line that help the AI generate a caption that actually sounds like you.<\/p>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f2009fb e-con e-atomic-element e-flexbox-base e-5b3f5bd \" data-id=\"f2009fb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f2009fb\">\n \t\t<div class=\"elementor-element elementor-element-fad8a9f elementor-widget elementor-widget-html\" data-id=\"fad8a9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fq-wrapper {\r\n --fq-bg: #120a1f;\r\n --fq-text: #f1eefc;\r\n --fq-text-muted: rgba(230, 224, 250, 0.78);\r\n --fq-accent: #c084fc;\r\n\r\n background: var(--fq-bg);\r\n padding: 90px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n }\r\n .fq-wrapper * { box-sizing: border-box; }\r\n\r\n .fq-inner {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .fq-heading {\r\n color: var(--fq-text);\r\n font-size: clamp(28px, 3.6vw, 40px);\r\n font-weight: 700;\r\n text-align: center;\r\n margin: 0 0 48px;\r\n }\r\n\r\n .fq-item {\r\n border-radius: 16px;\r\n border: 1px solid rgba(255,255,255,0.08);\r\n background: rgba(255,255,255,0.02);\r\n margin-bottom: 16px;\r\n overflow: hidden;\r\n transition: border-color 0.3s ease, background 0.3s ease;\r\n }\r\n .fq-item[open] {\r\n border-color: rgba(192, 132, 252, 0.4);\r\n background: rgba(124, 58, 237, 0.06);\r\n }\r\n\r\n .fq-item summary {\r\n list-style: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n padding: 22px 24px;\r\n }\r\n .fq-item summary::-webkit-details-marker { display: none; }\r\n\r\n .fq-question {\r\n color: var(--fq-text);\r\n font-size: 16.5px;\r\n font-weight: 600;\r\n margin: 0;\r\n }\r\n\r\n .fq-icon {\r\n width: 22px;\r\n height: 22px;\r\n flex-shrink: 0;\r\n color: var(--fq-accent);\r\n transition: transform 0.35s ease;\r\n }\r\n .fq-item[open] .fq-icon {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .fq-answer {\r\n padding: 0 24px 22px;\r\n color: var(--fq-text-muted);\r\n font-size: 15px;\r\n line-height: 1.7;\r\n }\r\n .fq-answer a {\r\n color: var(--fq-accent);\r\n text-decoration: underline;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .fq-wrapper { padding: 60px 20px; }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fq-wrapper\">\r\n <div class=\"fq-inner\">\r\n\r\n <h2 class=\"fq-heading\">FAQs<\/h2>\r\n\r\n <details class=\"fq-item\" open>\r\n <summary>\r\n <h3 class=\"fq-question\">How do I set up Mail 2 Post for my project?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Open your project settings and go to Mail 2 Post. Approve at least one sender email address, then send a test photo to publish@socials.ink with a subject line and short note.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Who is allowed to send in a post?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Only email addresses you've approved in \"Approved senders\" can post to a project. We verify each address with a one-time confirmation email before it's added, so no one can post just by typing your address into a From field.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">What happens after I send the email?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>socials.ink reads your subject and note, builds a cover image and caption, and sends you back a link. Nothing goes live automatically \u2014 you review it first, make any edits, and publish when you're ready.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Can I edit the post before it publishes?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Yes. The link you get back opens the draft in your project, where you can swap the image, rewrite the caption, or adjust anything before you approve and publish it.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <details class=\"fq-item\">\r\n <summary>\r\n <h3 class=\"fq-question\">Can I use Mail 2 Post for more than one project?<\/h3>\r\n <svg class=\"fq-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"><\/path><\/svg>\r\n <\/summary>\r\n <div class=\"fq-answer\">\r\n <p>Yes \u2014 each project has its own approved senders and settings. Use \"Switch project\" from the Mail 2 Post screen to set up another project's inbox.<\/p>\r\n <\/div>\r\n <\/details>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-7d6fc94 e-con e-atomic-element e-flexbox-base e-0da53d7 \" data-id=\"7d6fc94\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7d6fc94\">\n \t\t<div class=\"elementor-element elementor-element-275e37e elementor-widget elementor-widget-html\" data-id=\"275e37e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n\r\n\r\n<style>\r\n .fc-wrapper {\r\n --fc-bg: #120a1f;\r\n --fc-text: #f1eefc;\r\n --fc-text-muted: rgba(230, 224, 250, 0.72);\r\n\r\n background: var(--fc-bg);\r\n padding: 100px 24px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .fc-wrapper * { box-sizing: border-box; }\r\n\r\n \/* soft ambient glow behind the content *\/\r\n .fc-wrapper::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 700px;\r\n height: 700px;\r\n background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, rgba(124,58,237,0) 70%);\r\n transform: translate(-50%, -50%);\r\n pointer-events: none;\r\n }\r\n\r\n .fc-inner {\r\n position: relative;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fcFadeUp 0.8s ease forwards;\r\n }\r\n\r\n .fc-heading {\r\n color: var(--fc-text);\r\n font-size: clamp(28px, 4vw, 44px);\r\n font-weight: 800;\r\n line-height: 1.2;\r\n margin: 0 0 32px;\r\n }\r\n\r\n .fc-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-decoration: none !important;\r\n padding: 16px 32px;\r\n border-radius: 12px;\r\n box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .fc-cta:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 14px 36px rgba(124, 58, 237, 0.6);\r\n }\r\n .fc-cta svg {\r\n width: 20px;\r\n height: 20px;\r\n transition: transform 0.3s ease;\r\n }\r\n .fc-cta:hover svg {\r\n transform: translateX(4px);\r\n }\r\n\r\n .fc-note {\r\n color: var(--fc-text-muted);\r\n font-size: 14px;\r\n margin: 20px 0 0;\r\n }\r\n\r\n @keyframes fcFadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n<\/style>\r\n\r\n<section class=\"fc-wrapper\">\r\n <div class=\"fc-inner\">\r\n <h2 class=\"fc-heading\">Post from anywhere, without opening an app<\/h2>\r\n <a class=\"fc-cta\" href=\"#\">\r\n <span>Get started for free<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n <\/a>\r\n <p class=\"fc-note\">No credit card needed. Free forever.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Preview Mail 2 Post Snap it. Email it. It’s posted. Snapped a photo at an event? Email it to publish@socials.ink with a subject and a short note \u2014 we’ll turn it into a finished post: a cover image plus a written caption, sent back to you to review, edit, and publish. Learn more Preview Why […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-700","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=700"}],"version-history":[{"count":0,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/700\/revisions"}],"wp:attachment":[{"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}