{"id":860,"date":"2026-08-03T09:50:41","date_gmt":"2026-08-03T09:50:41","guid":{"rendered":"https:\/\/socials.ink\/?page_id=860"},"modified":"2026-08-03T11:32:18","modified_gmt":"2026-08-03T11:32:18","slug":"private-client-portal","status":"publish","type":"page","link":"https:\/\/socials.ink\/?page_id=860","title":{"rendered":"Private Client Portal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"860\" class=\"elementor elementor-860\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6418600 e-con e-atomic-element e-flexbox-base e-14492c6 \" data-id=\"6418600\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6418600\">\n    \t\t<div class=\"elementor-element elementor-element-c360680 elementor-widget elementor-widget-html\" data-id=\"c360680\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CLIENT PORTAL HERO SECTION - Socials.ink - Dark Purple\/Neon Theme\r\n     Layout modeled on Buffer's \"AI Assistant\" hero (split two-panel\r\n     image box). Left = narrow 9:16 portrait panel, right = wider\r\n     main screenshot with extra neon glow.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .cp-hero {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 56px;\r\n    flex-wrap: wrap;\r\n    max-width: 1240px;\r\n    margin: 0 auto;\r\n    padding: 80px 30px;\r\n    background: linear-gradient(135deg, #150a26 0%, #0d0716 100%);\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  .cp-hero * { box-sizing: border-box; }\r\n\r\n  .cp-content {\r\n    flex: 1 1 400px;\r\n    max-width: 460px;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: cpFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .cp-eyebrow {\r\n    display: inline-block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #7dd3fc;\r\n    margin: 0 0 16px;\r\n  }\r\n\r\n  .cp-heading {\r\n    font-size: clamp(30px, 3.8vw, 44px);\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .cp-text {\r\n    font-size: 16.5px;\r\n    line-height: 1.65;\r\n    color: rgba(230, 224, 250, 0.78);\r\n    margin: 0 0 30px;\r\n    max-width: 420px;\r\n  }\r\n\r\n  .cp-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 14px 26px;\r\n    border-radius: 30px;\r\n    background: linear-gradient(90deg, #38bdf8, #0ea5e9);\r\n    color: #06202e;\r\n    font-weight: 700;\r\n    font-size: 16px;\r\n    text-decoration: none;\r\n    box-shadow: 0 10px 26px rgba(14,165,233,0.4);\r\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n  }\r\n  .cp-cta svg {\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .cp-cta:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 32px rgba(14,165,233,0.55);\r\n  }\r\n  .cp-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* ===== Split image panel ===== *\/\r\n  .cp-image-panel {\r\n    flex: 1 1 620px;\r\n    max-width: 720px;\r\n    display: flex;\r\n    align-items: stretch;\r\n    gap: 20px;\r\n    padding: 28px;\r\n    border-radius: 28px;\r\n    background: linear-gradient(160deg, #16233a 0%, #0d0716 100%);\r\n    border: 1px solid rgba(56, 189, 248, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(56,189,248,0.12),\r\n      0 0 70px rgba(14,165,233,0.28),\r\n      0 25px 55px rgba(0,0,0,0.55);\r\n    opacity: 0;\r\n    transform: translateY(24px) scale(0.97);\r\n    animation: cpFadeUp 0.9s ease 0.2s forwards;\r\n  }\r\n\r\n  \/* narrow left panel \u2014 forced 9:16 portrait *\/\r\n  .cp-panel-narrow {\r\n    flex: 0 0 34%;\r\n    aspect-ratio: 9 \/ 16;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    background: #0a0512;\r\n    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);\r\n  }\r\n  .cp-panel-narrow img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: top center;\r\n    display: block;\r\n  }\r\n\r\n  \/* wide right panel \u2014 the main Client Portal screenshot, extra glow *\/\r\n  .cp-panel-wide {\r\n    flex: 1 1 66%;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    background: #0a0512;\r\n    box-shadow:\r\n      0 0 0 1px rgba(56,189,248,0.35),\r\n      0 0 40px rgba(14,165,233,0.35);\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .cp-panel-wide img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    object-position: center;\r\n    display: block;\r\n  }\r\n\r\n  @keyframes cpFadeUp {\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .cp-hero { padding: 56px 20px; }\r\n    .cp-image-panel { padding: 18px; gap: 14px; }\r\n    .cp-panel-narrow, .cp-panel-wide { border-radius: 12px; }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .cp-image-panel { flex-direction: column; }\r\n    .cp-panel-narrow { aspect-ratio: 9 \/ 12; flex: none; width: 100%; }\r\n    .cp-panel-wide { height: 380px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"cp-hero\">\r\n\r\n  <div class=\"cp-content\">\r\n    <span class=\"cp-eyebrow\">Client Portal<\/span>\r\n    <h2 class=\"cp-heading\">Private access. Zero friction.<\/h2>\r\n    <p class=\"cp-text\">Share a single password-protected link \u2014 no account, no login, no learning curve. Clients review posts, request changes, or approve with one click, right from their own private portal.<\/p>\r\n    <a class=\"cp-cta\" href=\"#\">\r\n      <span>Get started for free<\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <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\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <div class=\"cp-image-panel\">\r\n    <div class=\"cp-panel-narrow\">\r\n      <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/Screenshot-2026-08-03-145749.png\" alt=\"Client Portal password screen\">\r\n    <\/div>\r\n    <div class=\"cp-panel-wide\">\r\n      <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/client_portal.png\" alt=\"Client Portal dashboard\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-37f7596 e-con e-atomic-element e-flexbox-base e-a0d677a \" data-id=\"37f7596\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"37f7596\">\n    \t\t<div class=\"elementor-element elementor-element-5a1179b elementor-widget elementor-widget-html\" data-id=\"5a1179b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     AI STUDIO BENEFITS SECTION - Socials.ink - Dark Purple\/Neon Theme\r\n     Modeled on Buffer's dark \"Benefits\" 4-column icon row (AI Assistant page).\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .ab-section {\r\n    width: 100%;\r\n    padding: 70px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .ab-section * { box-sizing: border-box; }\r\n\r\n  .ab-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .ab-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 32px;\r\n  }\r\n\r\n  .ab-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 18px;\r\n    padding: 28px 22px;\r\n    border-radius: 18px;\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(255, 255, 255, 0.07);\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: abFadeUp 0.7s ease forwards;\r\n    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;\r\n  }\r\n  .ab-item:hover {\r\n    transform: translateY(-4px);\r\n  }\r\n\r\n  .ab-item:nth-child(1) { animation-delay: 0.05s; }\r\n  .ab-item:nth-child(2) { animation-delay: 0.15s; }\r\n  .ab-item:nth-child(3) { animation-delay: 0.25s; }\r\n  .ab-item:nth-child(4) { animation-delay: 0.35s; }\r\n\r\n  .ab-item:nth-child(1) { border-color: rgba(167,139,250,0.3); }\r\n  .ab-item:nth-child(1):hover { border-color: rgba(167,139,250,0.75); box-shadow: 0 0 40px rgba(124,58,237,0.28); }\r\n  .ab-item:nth-child(1) svg { color: #c4b5fd; }\r\n\r\n  .ab-item:nth-child(2) { border-color: rgba(56,189,248,0.3); }\r\n  .ab-item:nth-child(2):hover { border-color: rgba(56,189,248,0.75); box-shadow: 0 0 40px rgba(14,165,233,0.28); }\r\n  .ab-item:nth-child(2) svg { color: #7dd3fc; }\r\n\r\n  .ab-item:nth-child(3) { border-color: rgba(34,211,238,0.3); }\r\n  .ab-item:nth-child(3):hover { border-color: rgba(34,211,238,0.75); box-shadow: 0 0 40px rgba(6,182,212,0.28); }\r\n  .ab-item:nth-child(3) svg { color: #67e8f9; }\r\n\r\n  .ab-item:nth-child(4) { border-color: rgba(52,211,153,0.3); }\r\n  .ab-item:nth-child(4):hover { border-color: rgba(52,211,153,0.75); box-shadow: 0 0 40px rgba(16,185,129,0.28); }\r\n  .ab-item:nth-child(4) svg { color: #6ee7b7; }\r\n\r\n  .ab-icon svg {\r\n    width: 40px;\r\n    height: 40px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .ab-heading {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #f5f0ff;\r\n    margin: 0;\r\n  }\r\n\r\n  .ab-text {\r\n    font-size: 14px;\r\n    line-height: 1.55;\r\n    color: rgba(230, 224, 250, 0.72);\r\n    margin: 0;\r\n  }\r\n\r\n  @keyframes abFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .ab-grid { grid-template-columns: 1fr 1fr; }\r\n  }\r\n  @media (max-width: 560px) {\r\n    .ab-grid { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ab-section\">\r\n  <div class=\"ab-inner\">\r\n    <div class=\"ab-grid\">\r\n\r\n      <div class=\"ab-item\">\r\n        <span class=\"ab-icon\">\r\n          <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n            <path d=\"M37.5 21.75H41a3.5 3.5 0 0 1 3.5 3.5V44.5l-7-7H27a3.5 3.5 0 0 1-3.5-3.5v-1.75m7-10.5a3.5 3.5 0 0 1-3.5 3.5H16.5l-7 7V13A3.51 3.51 0 0 1 13 9.5h14a3.5 3.5 0 0 1 3.5 3.5v8.75Z\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <h3 class=\"ab-heading\">No login required<\/h3>\r\n        <p class=\"ab-text\">Clients just click the link and enter a password \u2014 no account to create, no app to download, no learning curve.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ab-item\">\r\n        <span class=\"ab-icon\">\r\n          <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n            <path d=\"M26.93 11.232H14.72a3.488 3.488 0 0 0-3.488 3.489v24.417a3.488 3.488 0 0 0 3.489 3.488h24.417a3.488 3.488 0 0 0 3.488-3.488V26.929m-15.697-4.36 3.488 3.488 12.209-12.209\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <h3 class=\"ab-heading\">Password-protected, always private<\/h3>\r\n        <p class=\"ab-text\">Every portal link is secured with its own password, so only the people you share it with can ever see a client's content.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ab-item\">\r\n        <span class=\"ab-icon\">\r\n          <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n            <path d=\"M31 32.2c.267-1.35.933-2.295 2-3.375 1.333-1.215 2-2.97 2-4.725a8.152 8.152 0 0 0-2.343-5.728A7.95 7.95 0 0 0 27 16a7.95 7.95 0 0 0-5.657 2.372A8.152 8.152 0 0 0 19 24.1c0 1.35.267 2.97 2 4.725.933.945 1.733 2.025 2 3.375m0 5.4h8M24.333 43h5.334M32.663 12.851l2.145-3.779m-13.993 3.78-2.152-3.78m20.332 13.789 3.985.102m-28.498-.102-3.983.102\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <h3 class=\"ab-heading\">Approve or request changes in one click<\/h3>\r\n        <p class=\"ab-text\">Clients review what's queued and either approve it instantly or leave feedback \u2014 no back-and-forth emails needed.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ab-item\">\r\n        <span class=\"ab-icon\">\r\n          <svg viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n            <path d=\"M19.952 9.488v6.977m13.952-6.977v6.977M11.232 23.44h31.394m-20.93 10.464 3.49 3.489 6.975-6.977m-17.44-17.44h24.417a3.488 3.488 0 0 1 3.488 3.488v24.417a3.488 3.488 0 0 1-3.488 3.488H14.72a3.488 3.488 0 0 1-3.489-3.488V16.465a3.488 3.488 0 0 1 3.489-3.489Z\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n        <h3 class=\"ab-heading\">One dedicated portal per project<\/h3>\r\n        <p class=\"ab-text\">Every client gets their own separate portal slot \u2014 deactivate or reassign it any time as your projects change.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-642952e e-con e-atomic-element e-flexbox-base e-5025258 \" data-id=\"642952e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"642952e\">\n    \t\t<div class=\"elementor-element elementor-element-4e6dfd6 elementor-widget elementor-widget-html\" data-id=\"4e6dfd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CLIENT PORTAL FEATURE DEMO SECTION - Socials.ink - Dark Purple\/Neon Theme\r\n     Layout modeled on Buffer's \"Content generation\" feature demo\r\n     (eyebrow, heading, text, CTA link + side image).\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .cpd-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .cpd-section * { box-sizing: border-box; }\r\n\r\n  .cpd-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 60px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .cpd-content {\r\n    flex: 1 1 420px;\r\n    max-width: 480px;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: cpdFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .cpd-eyebrow {\r\n    display: inline-block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #c084fc;\r\n    margin: 0 0 16px;\r\n  }\r\n\r\n  .cpd-heading {\r\n    font-size: clamp(28px, 3.6vw, 38px);\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .cpd-text {\r\n    font-size: 16.5px;\r\n    line-height: 1.65;\r\n    color: rgba(230, 224, 250, 0.78);\r\n    margin: 0 0 28px;\r\n    max-width: 440px;\r\n  }\r\n\r\n  .cpd-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    color: #d8b4fe;\r\n    font-weight: 600;\r\n    font-size: 16px;\r\n    text-decoration: underline;\r\n  }\r\n  .cpd-cta svg {\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .cpd-cta:hover svg {\r\n    transform: translateX(5px);\r\n  }\r\n\r\n  .cpd-image-panel {\r\n    flex: 1 1 420px;\r\n    max-width: 500px;\r\n    border-radius: 26px;\r\n    padding: 28px;\r\n    background: linear-gradient(160deg, #241638 0%, #150c26 100%);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.12),\r\n      0 0 60px rgba(168,85,247,0.25),\r\n      0 25px 50px rgba(0,0,0,0.5);\r\n    opacity: 0;\r\n    transform: translateY(24px) scale(0.97);\r\n    animation: cpdFadeUp 0.9s ease 0.2s forwards;\r\n  }\r\n\r\n  .cpd-image-panel img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    border-radius: 14px;\r\n  }\r\n\r\n  @keyframes cpdFadeUp {\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .cpd-section { padding: 56px 20px; }\r\n    .cpd-image-panel { padding: 20px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"cpd-section\">\r\n  <div class=\"cpd-inner\">\r\n\r\n    <div class=\"cpd-content\">\r\n      <span class=\"cpd-eyebrow\">Client access<\/span>\r\n      <h2 class=\"cpd-heading\">A private view, made just for them<\/h2>\r\n      <p class=\"cpd-text\">Share one password-protected link and your client sees exactly what's queued for approval \u2014 nothing more. No account to set up, no dashboard to learn, just a simple \"Approve\" or \"Request Changes.\"<\/p>\r\n      <a class=\"cpd-cta\" href=\"#\">\r\n        Try the Client Portal\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <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\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"cpd-image-panel\">\r\n      <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_33_49-PM.png\" alt=\"Client Portal approval screen\">\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b4274eb e-flex e-con-boxed e-con e-parent\" data-id=\"b4274eb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-defe93e elementor-widget elementor-widget-html\" data-id=\"defe93e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CLIENT PORTAL FEATURE SECTION - Socials.ink - Dark Purple\/Neon Theme\r\n     Layout modeled on Buffer's \"Content repurposing\" feature section\r\n     (eyebrow, heading, text, solid CTA button + side image).\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .cpf-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .cpf-section * { box-sizing: border-box; }\r\n\r\n  .cpf-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 60px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .cpf-content {\r\n    flex: 1 1 420px;\r\n    max-width: 480px;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: cpfFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .cpf-eyebrow {\r\n    display: inline-block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #c084fc;\r\n    margin: 0 0 16px;\r\n  }\r\n\r\n  .cpf-heading {\r\n    font-size: clamp(28px, 3.6vw, 38px);\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .cpf-text {\r\n    font-size: 16.5px;\r\n    line-height: 1.65;\r\n    color: rgba(230, 224, 250, 0.78);\r\n    margin: 0 0 30px;\r\n    max-width: 440px;\r\n  }\r\n\r\n  .cpf-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 14px 26px;\r\n    border-radius: 30px;\r\n    background: linear-gradient(90deg, #a855f7, #7c3aed);\r\n    color: #fff;\r\n    font-weight: 700;\r\n    font-size: 16px;\r\n    text-decoration: none;\r\n    box-shadow: 0 10px 26px rgba(124,58,237,0.4);\r\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n  }\r\n  .cpf-cta svg {\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .cpf-cta:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 32px rgba(124,58,237,0.55);\r\n  }\r\n  .cpf-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .cpf-image-panel {\r\n    flex: 1 1 420px;\r\n    max-width: 520px;\r\n    border-radius: 26px;\r\n    padding: 28px;\r\n    background: linear-gradient(160deg, #241638 0%, #150c26 100%);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.12),\r\n      0 0 60px rgba(168,85,247,0.25),\r\n      0 25px 50px rgba(0,0,0,0.5);\r\n    opacity: 0;\r\n    transform: translateY(24px) scale(0.97);\r\n    animation: cpfFadeUp 0.9s ease 0.2s forwards;\r\n  }\r\n\r\n  .cpf-image-panel img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    border-radius: 14px;\r\n  }\r\n\r\n  @keyframes cpfFadeUp {\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .cpf-section { padding: 56px 20px; }\r\n    .cpf-image-panel { padding: 20px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"cpf-section\">\r\n  <div class=\"cpf-inner\">\r\n\r\n    <div class=\"cpf-image-panel\">\r\n      <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_39_28-PM.png\" alt=\"Client Portal single link, multiple actions\">\r\n    <\/div>\r\n\r\n    <div class=\"cpf-content\">\r\n      <span class=\"cpf-eyebrow\">One link, every action<\/span>\r\n      <h2 class=\"cpf-heading\">Approvals, comments and access \u2014 all in one place<\/h2>\r\n      <p class=\"cpf-text\">Send a single portal link and your client can approve queued posts, leave a comment, or request a change \u2014 all from one private, password-protected page. No extra tools, no confusion.<\/p>\r\n      <a class=\"cpf-cta\" href=\"#\">\r\n        <span>Get started for free<\/span>\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <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\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0b0dfa e-con e-atomic-element e-flexbox-base e-1988727 \" data-id=\"c0b0dfa\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c0b0dfa\">\n    \t\t<div class=\"elementor-element elementor-element-7c8424d elementor-widget elementor-widget-html\" data-id=\"7c8424d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     TESTIMONIAL SECTION - Client Portal page - Socials.ink\r\n     Dark purple\/neon theme, modeled on Buffer's testimonial card.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .tsc-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .tsc-section * { box-sizing: border-box; }\r\n\r\n  .tsc-card {\r\n    position: relative;\r\n    max-width: 780px;\r\n    margin: 0 auto;\r\n    padding: 56px 48px 44px;\r\n    border-radius: 26px;\r\n    text-align: center;\r\n    background: linear-gradient(160deg, #241638 0%, #150c26 100%);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.12),\r\n      0 0 60px rgba(168,85,247,0.22),\r\n      0 25px 50px rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .tsc-mark {\r\n    font-size: 90px;\r\n    line-height: 1;\r\n    font-weight: 800;\r\n    color: rgba(192, 132, 252, 0.35);\r\n    margin: 0 0 -20px;\r\n    user-select: none;\r\n  }\r\n\r\n  .tsc-quote {\r\n    font-size: clamp(20px, 2.6vw, 26px);\r\n    line-height: 1.5;\r\n    font-weight: 600;\r\n    color: #f5f0ff;\r\n    margin: 0 0 36px;\r\n  }\r\n\r\n  .tsc-source {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n  }\r\n\r\n  .tsc-avatar {\r\n    width: 56px;\r\n    height: 56px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(160deg, #a78bfa, #7c3aed);\r\n    color: #fff;\r\n    font-weight: 700;\r\n    font-size: 18px;\r\n    flex-shrink: 0;\r\n    box-shadow: 0 0 0 3px rgba(192,132,252,0.25);\r\n  }\r\n\r\n  .tsc-source-text {\r\n    text-align: left;\r\n  }\r\n\r\n  .tsc-name {\r\n    display: block;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #f5f0ff;\r\n  }\r\n\r\n  .tsc-role {\r\n    display: block;\r\n    font-size: 13.5px;\r\n    color: rgba(230, 224, 250, 0.65);\r\n    margin-top: 2px;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .tsc-card { padding: 44px 26px 32px; }\r\n    .tsc-mark { font-size: 64px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"tsc-section\">\r\n  <div class=\"tsc-card\">\r\n    <p class=\"tsc-mark\">&ldquo;<\/p>\r\n    <blockquote class=\"tsc-quote\">\r\n      Our clients used to make us wait days for a simple \"yes.\" Now they just open their portal, tap approve, and we're publishing the same afternoon. It's completely changed how fast we can move.\r\n    <\/blockquote>\r\n    <div class=\"tsc-source\">\r\n      <span class=\"tsc-avatar\">KN<\/span>\r\n      <span class=\"tsc-source-text\">\r\n        <span class=\"tsc-name\">Khansa Noor<\/span>\r\n      <\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4bfcae4 e-con e-atomic-element e-flexbox-base e-eba0436 \" data-id=\"4bfcae4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4bfcae4\">\n    \t\t<div class=\"elementor-element elementor-element-97fbab5 elementor-widget elementor-widget-html\" data-id=\"97fbab5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     RESOURCES SECTION - Client Portal page - Socials.ink\r\n     Dark purple\/neon theme, modeled on Buffer's resources card row.\r\n     Images use equal fixed-height frames with object-fit: contain so\r\n     nothing is ever cropped, while staying uniform across all 3 cards.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .rsc-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .rsc-section * { box-sizing: border-box; }\r\n\r\n  .rsc-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .rsc-eyebrow {\r\n    display: block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #c084fc;\r\n    margin: 0 0 14px;\r\n  }\r\n\r\n  .rsc-heading {\r\n    font-size: clamp(26px, 3.4vw, 38px);\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 14px;\r\n  }\r\n\r\n  .rsc-intro-text {\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n    color: rgba(230, 224, 250, 0.75);\r\n    max-width: 620px;\r\n    margin: 0 0 44px;\r\n  }\r\n\r\n  .rsc-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 26px;\r\n  }\r\n\r\n  .rsc-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    text-decoration: none;\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(192, 132, 252, 0.25);\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: rscFadeUp 0.7s ease forwards;\r\n    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;\r\n  }\r\n  .rsc-card:nth-child(1) { animation-delay: 0.05s; }\r\n  .rsc-card:nth-child(2) { animation-delay: 0.15s; }\r\n  .rsc-card:nth-child(3) { animation-delay: 0.25s; }\r\n\r\n  .rsc-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(192, 132, 252, 0.6);\r\n    box-shadow: 0 0 40px rgba(168,85,247,0.25);\r\n  }\r\n\r\n  \/* equal fixed-height frame \u2014 cover + slight zoom crops only the excess\r\n     empty background baked into each image, never the actual subject *\/\r\n  .rsc-image-frame {\r\n    width: 100%;\r\n    height: 220px;\r\n    background: #0a0512;\r\n    overflow: hidden;\r\n  }\r\n  .rsc-image-frame img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center;\r\n    display: block;\r\n    transform: scale(1.18);\r\n    transition: transform 0.4s ease;\r\n  }\r\n  .rsc-card:hover .rsc-image-frame img {\r\n    transform: scale(1.24);\r\n  }\r\n\r\n  \/* card 3 reverted back to original \u2014 full image, no crop, no zoom *\/\r\n  .rsc-card:nth-child(3) .rsc-image-frame {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .rsc-card:nth-child(3) .rsc-image-frame img {\r\n    object-fit: contain;\r\n    transform: none;\r\n  }\r\n  .rsc-card:nth-child(3):hover .rsc-image-frame img {\r\n    transform: none;\r\n  }\r\n\r\n  .rsc-card-body {\r\n    padding: 22px 22px 26px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n  }\r\n\r\n  .rsc-card-heading {\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    line-height: 1.4;\r\n    color: #f5f0ff;\r\n    margin: 0 0 10px;\r\n  }\r\n\r\n  .rsc-card-text {\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n    color: rgba(230, 224, 250, 0.7);\r\n    margin: 0 0 18px;\r\n    flex: 1;\r\n  }\r\n\r\n  .rsc-card-cta {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n  }\r\n  .rsc-card-cta svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    color: #c084fc;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .rsc-card:hover .rsc-card-cta svg {\r\n    transform: translate(4px, -4px);\r\n  }\r\n\r\n  @keyframes rscFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .rsc-grid { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"rsc-section\">\r\n  <div class=\"rsc-inner\">\r\n\r\n    <span class=\"rsc-eyebrow\">Resources<\/span>\r\n    <p class=\"rsc-heading\">Master client collaboration<\/p>\r\n    <p class=\"rsc-intro-text\">Learn how to speed up approvals, keep access secure, and give every client a smooth, professional experience.<\/p>\r\n\r\n    <div class=\"rsc-grid\">\r\n\r\n      <a class=\"rsc-card\" href=\"#\">\r\n        <div class=\"rsc-image-frame\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_47_25-PM.png\" alt=\"How to get client approvals faster\">\r\n        <\/div>\r\n        <div class=\"rsc-card-body\">\r\n          <h3 class=\"rsc-card-heading\">How to Get Client Approvals Faster<\/h3>\r\n          <p class=\"rsc-card-text\">Stop chasing sign-offs over email. See how a shared portal link turns approvals into a single click.<\/p>\r\n          <div class=\"rsc-card-cta\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a class=\"rsc-card\" href=\"#\">\r\n        <div class=\"rsc-image-frame\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-04_14_11-PM.png\" alt=\"One link, one password, full control\">\r\n        <\/div>\r\n        <div class=\"rsc-card-body\">\r\n          <h3 class=\"rsc-card-heading\">One Link, One Password \u2014 Full Control<\/h3>\r\n          <p class=\"rsc-card-text\">Every portal is protected by a password only you control. Update it anytime, and only the people you share it with can ever get in.<\/p>\r\n          <div class=\"rsc-card-cta\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a class=\"rsc-card\" href=\"#\">\r\n        <div class=\"rsc-image-frame\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-04_15_34-PM.png\" alt=\"Turn off access anytime\">\r\n        <\/div>\r\n        <div class=\"rsc-card-body\">\r\n          <h3 class=\"rsc-card-heading\">Turn Off Access, Anytime<\/h3>\r\n          <p class=\"rsc-card-text\">Wrapped up a project or pausing with a client? Deactivate their portal in one click and free up the slot instantly.<\/p>\r\n          <div class=\"rsc-card-cta\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-ad90c4c e-con e-atomic-element e-flexbox-base e-c8a303a \" data-id=\"ad90c4c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ad90c4c\">\n    \t\t<div class=\"elementor-element elementor-element-91d9f19 elementor-widget elementor-widget-html\" data-id=\"91d9f19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     FAQ SECTION - Client Portal page - Socials.ink\r\n     Dark purple\/neon theme. Uses div + JS toggle (not <details>) so it\r\n     can't be broken by wpautop or theme filters mangling the markup.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .fqp-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .fqp-section * { box-sizing: border-box; }\r\n\r\n  .fqp-inner {\r\n    max-width: 820px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .fqp-heading {\r\n    font-size: clamp(26px, 3.2vw, 36px);\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 36px;\r\n    text-align: center;\r\n  }\r\n\r\n  .fqp-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  .fqp-item {\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(192, 132, 252, 0.25);\r\n    border-radius: 16px;\r\n    padding: 4px 22px;\r\n    transition: border-color 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .fqp-item.fqp-open {\r\n    border-color: rgba(192, 132, 252, 0.6);\r\n    box-shadow: 0 0 30px rgba(168,85,247,0.2);\r\n  }\r\n\r\n  .fqp-summary {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    padding: 20px 0;\r\n    cursor: pointer;\r\n    user-select: none;\r\n  }\r\n\r\n  .fqp-question {\r\n    font-size: 16.5px;\r\n    font-weight: 600;\r\n    color: #f5f0ff;\r\n    margin: 0;\r\n  }\r\n\r\n  .fqp-icon {\r\n    flex-shrink: 0;\r\n    width: 22px;\r\n    height: 22px;\r\n    color: #c084fc;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .fqp-item.fqp-open .fqp-icon {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .fqp-content {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.35s ease;\r\n  }\r\n  .fqp-content-inner {\r\n    padding: 0 0 22px;\r\n  }\r\n  .fqp-content-inner p {\r\n    margin: 0 0 12px;\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n    color: rgba(230, 224, 250, 0.75);\r\n  }\r\n  .fqp-content-inner p:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n  .fqp-content-inner a {\r\n    color: #7dd3fc;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .fqp-item { padding: 4px 16px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"fqp-section\">\r\n  <div class=\"fqp-inner\">\r\n    <h2 class=\"fqp-heading\">FAQs<\/h2>\r\n    <div class=\"fqp-list\" id=\"fqpList\">\r\n\r\n      <div class=\"fqp-item\">\r\n        <div class=\"fqp-summary\" onclick=\"fqpToggle(this)\">\r\n          <h3 class=\"fqp-question\">How does the Client Portal work?<\/h3>\r\n          <svg class=\"fqp-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fqp-content\">\r\n          <div class=\"fqp-content-inner\">\r\n            <p>Each project on socials.ink can generate its own dedicated Client Portal \u2014 a single password-protected link that shows your client only what's queued for their approval, without giving them access to your dashboard, other clients, or account settings.<\/p>\r\n            <p>You control the password and can update or deactivate it at any time from the project's settings.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fqp-item\">\r\n        <div class=\"fqp-summary\" onclick=\"fqpToggle(this)\">\r\n          <h3 class=\"fqp-question\">Do my clients need to create an account?<\/h3>\r\n          <svg class=\"fqp-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fqp-content\">\r\n          <div class=\"fqp-content-inner\">\r\n            <p>No. Clients simply open the portal link and enter the password you've shared with them \u2014 no sign-up, no login credentials, no app to install.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fqp-item\">\r\n        <div class=\"fqp-summary\" onclick=\"fqpToggle(this)\">\r\n          <h3 class=\"fqp-question\">Is the Client Portal included on every plan?<\/h3>\r\n          <svg class=\"fqp-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fqp-content\">\r\n          <div class=\"fqp-content-inner\">\r\n            <p>Every project includes one Client Portal slot by default. If you need more active portals across your projects, you can deactivate a portal you're no longer using to free up its slot, or upgrade your plan for additional capacity.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fqp-item\">\r\n        <div class=\"fqp-summary\" onclick=\"fqpToggle(this)\">\r\n          <h3 class=\"fqp-question\">Can a client approve posts, or only view them?<\/h3>\r\n          <svg class=\"fqp-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fqp-content\">\r\n          <div class=\"fqp-content-inner\">\r\n            <p>Clients can do more than just view \u2014 they can approve queued posts, leave a comment, or request changes directly from the portal. Every action is reflected back in your dashboard instantly.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fqp-item\">\r\n        <div class=\"fqp-summary\" onclick=\"fqpToggle(this)\">\r\n          <h3 class=\"fqp-question\">Is my client's data or account information shared with anyone?<\/h3>\r\n          <svg class=\"fqp-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fqp-content\">\r\n          <div class=\"fqp-content-inner\">\r\n            <p>No. The Client Portal only shows the specific project content you've queued for review. It doesn't expose your account, other client projects, billing details, or any information beyond what's needed for approvals.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  function fqpToggle(summaryEl) {\r\n    var item = summaryEl.parentElement;\r\n    var content = item.querySelector('.fqp-content');\r\n    var isOpen = item.classList.contains('fqp-open');\r\n\r\n    var list = item.closest('.fqp-list');\r\n    if (list) {\r\n      list.querySelectorAll('.fqp-item.fqp-open').forEach(function(openItem) {\r\n        if (openItem !== item) {\r\n          openItem.classList.remove('fqp-open');\r\n          var openContent = openItem.querySelector('.fqp-content');\r\n          if (openContent) openContent.style.maxHeight = null;\r\n        }\r\n      });\r\n    }\r\n\r\n    if (isOpen) {\r\n      item.classList.remove('fqp-open');\r\n      content.style.maxHeight = null;\r\n    } else {\r\n      item.classList.add('fqp-open');\r\n      content.style.maxHeight = content.scrollHeight + 'px';\r\n    }\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bc0bd97 e-con e-atomic-element e-flexbox-base e-4a95203 \" data-id=\"bc0bd97\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bc0bd97\">\n    \t\t<div class=\"elementor-element elementor-element-0a36b59 elementor-widget elementor-widget-html\" data-id=\"0a36b59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CTA SECTION - Client Portal page - Socials.ink\r\n     Dark purple\/neon theme, modeled on Buffer's closing CTA section.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .ctp-section {\r\n    width: 100%;\r\n    padding: 90px 24px;\r\n    background: linear-gradient(135deg, #1c1330 0%, #0d0716 100%);\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  .ctp-section * { box-sizing: border-box; }\r\n\r\n  .ctp-glow {\r\n    position: absolute;\r\n    top: -80px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 560px;\r\n    height: 260px;\r\n    background: radial-gradient(closest-side, rgba(168,85,247,0.35), transparent 70%);\r\n    filter: blur(30px);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .ctp-inner {\r\n    position: relative;\r\n    z-index: 1;\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: ctpFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .ctp-heading {\r\n    font-size: clamp(28px, 4vw, 42px);\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 30px;\r\n  }\r\n\r\n  .ctp-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 15px 28px;\r\n    border-radius: 30px;\r\n    background: linear-gradient(90deg, #a855f7, #7c3aed);\r\n    color: #fff;\r\n    font-weight: 700;\r\n    font-size: 16.5px;\r\n    text-decoration: none;\r\n    box-shadow: 0 10px 26px rgba(124,58,237,0.4);\r\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n  }\r\n  .ctp-cta svg {\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .ctp-cta:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 32px rgba(124,58,237,0.55);\r\n  }\r\n  .ctp-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .ctp-subtext {\r\n    margin: 18px 0 0;\r\n    font-size: 14.5px;\r\n    color: rgba(230, 224, 250, 0.6);\r\n  }\r\n\r\n  @keyframes ctpFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ctp-section\">\r\n  <div class=\"ctp-glow\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ctp-inner\">\r\n    <h2 class=\"ctp-heading\">Give every client a portal of their own<\/h2>\r\n    <a class=\"ctp-cta\" href=\"#\">\r\n      <span>Get started for free<\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <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\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n    <p class=\"ctp-subtext\">No credit card needed. Free forever.<\/p>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Client Portal Private access. Zero friction. Share a single password-protected link \u2014 no account, no login, no learning curve. Clients review posts, request changes, or approve with one click, right from their own private portal. Get started for free No login required Clients just click the link and enter a password \u2014 no account to [&hellip;]<\/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-860","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/860","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=860"}],"version-history":[{"count":0,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/860\/revisions"}],"wp:attachment":[{"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}