{"id":770,"date":"2026-07-23T19:20:36","date_gmt":"2026-07-23T19:20:36","guid":{"rendered":"https:\/\/cutdrama.com\/?page_id=770"},"modified":"2026-07-23T19:30:22","modified_gmt":"2026-07-23T19:30:22","slug":"social-safe-zones","status":"publish","type":"page","link":"https:\/\/cutdrama.com\/ar\/social-safe-zones\/","title":{"rendered":"Social Safe Zones"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"770\" class=\"elementor elementor-770\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8074eec e-flex e-con-boxed e-con e-parent\" data-id=\"8074eec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9b6d18 elementor-widget elementor-widget-html\" data-id=\"f9b6d18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FRAMEHALO FULL-SCREEN SALES PAGE -->\r\n<main class=\"fh-full-page\">\r\n\r\n  <!-- NAVIGATION -->\r\n  <header class=\"fh-header\">\r\n    <div class=\"fh-container fh-header-inner\">\r\n      <a class=\"fh-logo\" href=\"#\" aria-label=\"FRAMEHALO home\">\r\n        FRAME<span>HALO<\/span>\r\n      <\/a>\r\n\r\n      <a class=\"fh-header-button\" href=\"https:\/\/rafatrafat.gumroad.com\/l\/nsotz?wanted=true\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        Buy FRAMEHALO\r\n      <\/a>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- HERO -->\r\n  <section class=\"fh-hero\">\r\n    <div class=\"fh-container fh-hero-grid\">\r\n\r\n      <div class=\"fh-hero-content\">\r\n        <div class=\"fh-product-label\">\r\n          Made for DaVinci Resolve\r\n        <\/div>\r\n\r\n        <h1>\r\n          Keep your content\r\n          <span>inside the safe zone.<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"fh-hero-description\">\r\n          FRAMEHALO gives you clear social safe-zone guides for DaVinci\r\n          Resolve, helping you position captions, titles, logos and calls to\r\n          action where viewers can see them.\r\n        <\/p>\r\n\r\n        <div class=\"fh-feature-pills\" aria-label=\"Product features\">\r\n          <span>HD<\/span>\r\n          <span>4K<\/span>\r\n          <span>7 Platform Layouts<\/span>\r\n          <span>Drag &amp; Drop<\/span>\r\n          <span>Adjustment Clip<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"fh-hero-actions\">\r\n          <a class=\"fh-button fh-button-primary\" href=\"https:\/\/rafatrafat.gumroad.com\/l\/nsotz?wanted=true\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            Get FRAMEHALO\r\n            <span aria-hidden=\"true\">\u2192<\/span>\r\n          <\/a>\r\n\r\n          <a class=\"fh-text-link\" href=\"#how-it-works\">\r\n            See how it works\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <p class=\"fh-purchase-note\">\r\n          Digital download for DaVinci Resolve\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- CSS PRODUCT PREVIEW \u2014 NO IMAGE -->\r\n      <div class=\"fh-visual\" aria-label=\"Safe-zone illustration\">\r\n        <div class=\"fh-shape fh-shape-blue\"><\/div>\r\n        <div class=\"fh-shape fh-shape-yellow\"><\/div>\r\n        <div class=\"fh-shape fh-shape-green\"><\/div>\r\n        <div class=\"fh-shape fh-shape-red\"><\/div>\r\n\r\n        <div class=\"fh-phone\">\r\n          <div class=\"fh-phone-screen\">\r\n\r\n            <div class=\"fh-safe fh-safe-top-left\"><\/div>\r\n            <div class=\"fh-safe fh-safe-top\"><\/div>\r\n            <div class=\"fh-safe fh-safe-top-right\"><\/div>\r\n\r\n            <div class=\"fh-safe fh-safe-left\"><\/div>\r\n            <div class=\"fh-safe fh-safe-right\"><\/div>\r\n\r\n            <div class=\"fh-safe fh-safe-bottom-left\"><\/div>\r\n            <div class=\"fh-safe fh-safe-bottom\"><\/div>\r\n            <div class=\"fh-safe fh-safe-bottom-right\"><\/div>\r\n\r\n            <div class=\"fh-center-label\">\r\n              SAFE\r\n              <span>ZONE<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fh-floating-card fh-floating-card-one\">\r\n          <strong>7<\/strong>\r\n          <span>Layouts<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"fh-floating-card fh-floating-card-two\">\r\n          <strong>4K<\/strong>\r\n          <span>Ready<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- TRUST STRIP -->\r\n  <section class=\"fh-trust-strip\">\r\n    <div class=\"fh-container fh-trust-grid\">\r\n      <div>\r\n        <strong>HD<\/strong>\r\n        <span>Standard workflows<\/span>\r\n      <\/div>\r\n\r\n      <div>\r\n        <strong>4K<\/strong>\r\n        <span>High-resolution projects<\/span>\r\n      <\/div>\r\n\r\n      <div>\r\n        <strong>7<\/strong>\r\n        <span>Platform layouts<\/span>\r\n      <\/div>\r\n\r\n      <div>\r\n        <strong>Fast<\/strong>\r\n        <span>Drag-and-drop setup<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- BENEFITS -->\r\n  <section class=\"fh-section fh-benefits-section\">\r\n    <div class=\"fh-container\">\r\n\r\n      <div class=\"fh-section-heading\">\r\n        <span class=\"fh-eyebrow\">Why FRAMEHALO<\/span>\r\n\r\n        <h2>\r\n          Stop guessing where your content should go.\r\n        <\/h2>\r\n\r\n        <p>\r\n          Use clear visual guides while editing so important content stays\r\n          away from buttons, captions and interface elements.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"fh-benefit-grid\">\r\n\r\n        <article class=\"fh-card\">\r\n          <div class=\"fh-card-icon\">\u2713<\/div>\r\n\r\n          <h3>Protect important content<\/h3>\r\n\r\n          <p>\r\n            Keep titles, captions, logos and calls to action inside the\r\n            visible area of your video.\r\n          <\/p>\r\n        <\/article>\r\n\r\n        <article class=\"fh-card\">\r\n          <div class=\"fh-card-icon\">\u2195<\/div>\r\n\r\n          <h3>Drag and drop<\/h3>\r\n\r\n          <p>\r\n            Add the safe-zone guide to your timeline without building guides\r\n            manually for every project.\r\n          <\/p>\r\n        <\/article>\r\n\r\n        <article class=\"fh-card\">\r\n          <div class=\"fh-card-icon\">7<\/div>\r\n\r\n          <h3>Seven layouts<\/h3>\r\n\r\n          <p>\r\n            Prepare content for multiple social formats using a consistent\r\n            editing workflow.\r\n          <\/p>\r\n        <\/article>\r\n\r\n        <article class=\"fh-card\">\r\n          <div class=\"fh-card-icon fh-card-icon-text\">4K<\/div>\r\n\r\n          <h3>HD and 4K ready<\/h3>\r\n\r\n          <p>\r\n            Use FRAMEHALO in common HD and 4K DaVinci Resolve editing\r\n            workflows.\r\n          <\/p>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- HOW IT WORKS -->\r\n  <section id=\"how-it-works\" class=\"fh-section fh-how-section\">\r\n    <div class=\"fh-container\">\r\n\r\n      <div class=\"fh-section-heading\">\r\n        <span class=\"fh-eyebrow\">Simple workflow<\/span>\r\n\r\n        <h2>\r\n          Add it. Arrange it. Export.\r\n        <\/h2>\r\n\r\n        <p>\r\n          FRAMEHALO is designed to stay simple so you can focus on the edit.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"fh-steps\">\r\n\r\n        <article class=\"fh-step\">\r\n          <div class=\"fh-step-number\">1<\/div>\r\n\r\n          <div>\r\n            <h3>Add FRAMEHALO<\/h3>\r\n\r\n            <p>\r\n              Place the safe-zone guide in your DaVinci Resolve project.\r\n            <\/p>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <div class=\"fh-step-arrow\" aria-hidden=\"true\">\u2192<\/div>\r\n\r\n        <article class=\"fh-step\">\r\n          <div class=\"fh-step-number\">2<\/div>\r\n\r\n          <div>\r\n            <h3>Arrange your content<\/h3>\r\n\r\n            <p>\r\n              Position captions, graphics and titles inside the visible safe\r\n              area.\r\n            <\/p>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <div class=\"fh-step-arrow\" aria-hidden=\"true\">\u2192<\/div>\r\n\r\n        <article class=\"fh-step\">\r\n          <div class=\"fh-step-number\">3<\/div>\r\n\r\n          <div>\r\n            <h3>Disable and export<\/h3>\r\n\r\n            <p>\r\n              Turn off the guide before exporting your finished video.\r\n            <\/p>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- DARK PRODUCT SECTION -->\r\n  <section class=\"fh-dark-section\">\r\n    <div class=\"fh-container fh-dark-grid\">\r\n\r\n      <div class=\"fh-dark-content\">\r\n        <span class=\"fh-eyebrow fh-eyebrow-dark\">\r\n          Built for social editing\r\n        <\/span>\r\n\r\n        <h2>\r\n          One simple guide can save repeated corrections.\r\n        <\/h2>\r\n\r\n        <p>\r\n          Check your content placement while you edit instead of discovering\r\n          visibility problems after exporting or publishing.\r\n        <\/p>\r\n\r\n        <a class=\"fh-button fh-button-light\" href=\"https:\/\/rafatrafat.gumroad.com\/l\/nsotz?wanted=true\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n          Buy FRAMEHALO\r\n          <span aria-hidden=\"true\">\u2192<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- SECOND CSS VISUAL -->\r\n      <div class=\"fh-editor-window\" aria-label=\"Editing interface illustration\">\r\n        <div class=\"fh-editor-topbar\">\r\n          <span><\/span>\r\n          <span><\/span>\r\n          <span><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"fh-editor-body\">\r\n          <div class=\"fh-editor-sidebar\">\r\n            <div><\/div>\r\n            <div><\/div>\r\n            <div><\/div>\r\n            <div><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"fh-editor-preview\">\r\n            <div class=\"fh-preview-phone\">\r\n\r\n              <div class=\"fh-preview-safe fh-preview-safe-top\"><\/div>\r\n              <div class=\"fh-preview-safe fh-preview-safe-left\"><\/div>\r\n              <div class=\"fh-preview-safe fh-preview-safe-right\"><\/div>\r\n              <div class=\"fh-preview-safe fh-preview-safe-bottom\"><\/div>\r\n\r\n              <span>YOUR CONTENT<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fh-timeline\">\r\n          <div class=\"fh-timeline-track\">\r\n            <span><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"fh-timeline-track fh-timeline-track-blue\">\r\n            <span><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"fh-playhead\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- WHO IT IS FOR -->\r\n  <section class=\"fh-section fh-audience-section\">\r\n    <div class=\"fh-container\">\r\n\r\n      <div class=\"fh-section-heading\">\r\n        <span class=\"fh-eyebrow\">Designed for creators<\/span>\r\n\r\n        <h2>\r\n          A practical tool for everyday video work.\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"fh-audience-grid\">\r\n\r\n        <article>\r\n          <div>\u25b6<\/div>\r\n          <h3>Video editors<\/h3>\r\n          <p>\r\n            Speed up social-video preparation inside DaVinci Resolve.\r\n          <\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <div>\u2726<\/div>\r\n          <h3>Content creators<\/h3>\r\n          <p>\r\n            Keep important text and graphics clear and visible.\r\n          <\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <div>\u25eb<\/div>\r\n          <h3>Social media teams<\/h3>\r\n          <p>\r\n            Create a more consistent placement workflow across projects.\r\n          <\/p>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FAQ -->\r\n  <section class=\"fh-section fh-faq-section\">\r\n    <div class=\"fh-container fh-faq-container\">\r\n\r\n      <div class=\"fh-section-heading\">\r\n        <span class=\"fh-eyebrow\">Questions<\/span>\r\n        <h2>Frequently asked questions<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"fh-faq-list\">\r\n\r\n        <details>\r\n          <summary>\r\n            What is FRAMEHALO?\r\n            <span>+<\/span>\r\n          <\/summary>\r\n\r\n          <p>\r\n            FRAMEHALO is a collection of social safe-zone guides designed for\r\n            use in DaVinci Resolve.\r\n          <\/p>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\r\n            Does it support HD and 4K?\r\n            <span>+<\/span>\r\n          <\/summary>\r\n\r\n          <p>\r\n            Yes. FRAMEHALO is designed for common HD and 4K editing workflows.\r\n          <\/p>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\r\n            How do I receive the product?\r\n            <span>+<\/span>\r\n          <\/summary>\r\n\r\n          <p>\r\n            FRAMEHALO is sold as a digital product through Gumroad. Purchase\r\n            and download information is provided through Gumroad.\r\n          <\/p>\r\n        <\/details>\r\n\r\n        <details>\r\n          <summary>\r\n            Is DaVinci Resolve included?\r\n            <span>+<\/span>\r\n          <\/summary>\r\n\r\n          <p>\r\n            No. FRAMEHALO is an independent editing tool. DaVinci Resolve must\r\n            be obtained separately.\r\n          <\/p>\r\n        <\/details>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FINAL CTA -->\r\n  <section class=\"fh-final-section\">\r\n    <div class=\"fh-container\">\r\n      <div class=\"fh-final-card\">\r\n\r\n        <div>\r\n          <span class=\"fh-final-label\">FRAMEHALO<\/span>\r\n\r\n          <h2>\r\n            Position your content with confidence.\r\n          <\/h2>\r\n\r\n          <p>\r\n            Add clear social safe-zone guides to your DaVinci Resolve\r\n            workflow.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <a class=\"fh-button fh-button-white\" href=\"https:\/\/rafatrafat.gumroad.com\/l\/nsotz?wanted=true\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n          Get FRAMEHALO\r\n          <span aria-hidden=\"true\">\u2192<\/span>\r\n        <\/a>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FOOTER -->\r\n  <footer class=\"fh-footer\">\r\n    <div class=\"fh-container\">\r\n      <div class=\"fh-footer-logo\">\r\n        FRAME<span>HALO<\/span>\r\n      <\/div>\r\n\r\n      <p>\r\n        DaVinci Resolve is a trademark of Blackmagic Design. FRAMEHALO is an\r\n        independent product and is not affiliated with or endorsed by\r\n        Blackmagic Design.\r\n      <\/p>\r\n    <\/div>\r\n  <\/footer>\r\n\r\n<\/main>\r\n\r\n<style>\r\n  \/*\r\n  ==================================================\r\n  FRAMEHALO FULL-SCREEN PAGE\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-full-page,\r\n  .fh-full-page * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .fh-full-page {\r\n    --fh-blue: #1a73e8;\r\n    --fh-blue-dark: #1557b0;\r\n    --fh-blue-light: #e8f0fe;\r\n    --fh-green: #34a853;\r\n    --fh-yellow: #fbbc04;\r\n    --fh-red: #ea4335;\r\n    --fh-text: #202124;\r\n    --fh-muted: #5f6368;\r\n    --fh-light-text: #9aa0a6;\r\n    --fh-border: #e0e3e7;\r\n    --fh-background: #ffffff;\r\n    --fh-soft-background: #f8f9fa;\r\n    --fh-dark: #171717;\r\n    --fh-white: #ffffff;\r\n\r\n    position: relative;\r\n    width: 100vw;\r\n    min-height: 100vh;\r\n    min-height: 100svh;\r\n    margin-left: calc(50% - 50vw);\r\n    margin-right: calc(50% - 50vw);\r\n    overflow: hidden;\r\n    background: var(--fh-background);\r\n    color: var(--fh-text);\r\n    font-family:\r\n      Inter,\r\n      Roboto,\r\n      -apple-system,\r\n      BlinkMacSystemFont,\r\n      \"Segoe UI\",\r\n      Arial,\r\n      sans-serif;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .fh-full-page h1,\r\n  .fh-full-page h2,\r\n  .fh-full-page h3,\r\n  .fh-full-page p {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .fh-full-page a {\r\n    text-decoration: none;\r\n  }\r\n\r\n  .fh-container {\r\n    width: min(1180px, calc(100% - 44px));\r\n    margin-right: auto;\r\n    margin-left: auto;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  HEADER\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-header {\r\n    position: relative;\r\n    z-index: 20;\r\n    width: 100%;\r\n    border-bottom: 1px solid rgba(218, 220, 224, 0.75);\r\n    background: rgba(255, 255, 255, 0.88);\r\n    backdrop-filter: blur(18px);\r\n    -webkit-backdrop-filter: blur(18px);\r\n  }\r\n\r\n  .fh-header-inner {\r\n    display: flex;\r\n    min-height: 76px;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 25px;\r\n  }\r\n\r\n  .fh-logo,\r\n  .fh-footer-logo {\r\n    color: var(--fh-text);\r\n    font-size: 24px;\r\n    font-weight: 850;\r\n    line-height: 1;\r\n    letter-spacing: -0.05em;\r\n  }\r\n\r\n  .fh-logo span,\r\n  .fh-footer-logo span {\r\n    color: var(--fh-blue);\r\n  }\r\n\r\n  .fh-header-button {\r\n    display: inline-flex;\r\n    min-height: 43px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px 19px;\r\n    border-radius: 9px;\r\n    background: var(--fh-blue);\r\n    color: var(--fh-white) !important;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    transition:\r\n      background-color 180ms ease,\r\n      transform 180ms ease,\r\n      box-shadow 180ms ease;\r\n  }\r\n\r\n  .fh-header-button:hover {\r\n    background: var(--fh-blue-dark);\r\n    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.23);\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  HERO\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-hero {\r\n    position: relative;\r\n    display: flex;\r\n    min-height: calc(100vh - 76px);\r\n    min-height: calc(100svh - 76px);\r\n    align-items: center;\r\n    padding: 80px 0 95px;\r\n    background:\r\n      radial-gradient(\r\n        circle at 88% 12%,\r\n        rgba(232, 240, 254, 0.95),\r\n        transparent 30%\r\n      ),\r\n      radial-gradient(\r\n        circle at 7% 82%,\r\n        rgba(254, 247, 224, 0.75),\r\n        transparent 25%\r\n      ),\r\n      #ffffff;\r\n  }\r\n\r\n  .fh-hero-grid {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);\r\n    align-items: center;\r\n    gap: 80px;\r\n  }\r\n\r\n  .fh-product-label,\r\n  .fh-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    margin-bottom: 19px;\r\n    padding: 8px 15px;\r\n    border-radius: 999px;\r\n    background: var(--fh-blue-light);\r\n    color: var(--fh-blue-dark);\r\n    font-size: 14px;\r\n    font-weight: 750;\r\n    letter-spacing: 0.02em;\r\n  }\r\n\r\n  .fh-hero h1 {\r\n    max-width: 710px;\r\n    margin-bottom: 24px;\r\n    color: var(--fh-text);\r\n    font-size: clamp(56px, 7vw, 91px);\r\n    font-weight: 850;\r\n    line-height: 0.98;\r\n    letter-spacing: -0.065em;\r\n  }\r\n\r\n  .fh-hero h1 span {\r\n    display: block;\r\n    color: var(--fh-blue);\r\n  }\r\n\r\n  .fh-hero-description {\r\n    max-width: 660px;\r\n    margin-bottom: 29px;\r\n    color: var(--fh-muted);\r\n    font-size: clamp(18px, 2vw, 21px);\r\n    line-height: 1.68;\r\n  }\r\n\r\n  .fh-feature-pills {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 9px;\r\n    margin-bottom: 31px;\r\n  }\r\n\r\n  .fh-feature-pills span {\r\n    display: inline-flex;\r\n    min-height: 38px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 8px 14px;\r\n    border: 1px solid #d7e3f8;\r\n    border-radius: 999px;\r\n    background: rgba(255, 255, 255, 0.86);\r\n    color: #3c4043;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);\r\n  }\r\n\r\n  .fh-hero-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 24px;\r\n  }\r\n\r\n  .fh-button {\r\n    display: inline-flex;\r\n    min-height: 56px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: 15px 27px;\r\n    border-radius: 11px;\r\n    font-size: 17px;\r\n    font-weight: 750;\r\n    line-height: 1;\r\n    transition:\r\n      background-color 180ms ease,\r\n      color 180ms ease,\r\n      transform 180ms ease,\r\n      box-shadow 180ms ease;\r\n  }\r\n\r\n  .fh-button > span {\r\n    font-size: 23px;\r\n    transition: transform 180ms ease;\r\n  }\r\n\r\n  .fh-button:hover {\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .fh-button:hover > span {\r\n    transform: translateX(3px);\r\n  }\r\n\r\n  .fh-button:focus-visible,\r\n  .fh-header-button:focus-visible,\r\n  .fh-text-link:focus-visible {\r\n    outline: 3px solid rgba(26, 115, 232, 0.28);\r\n    outline-offset: 4px;\r\n  }\r\n\r\n  .fh-button-primary {\r\n    background: var(--fh-blue);\r\n    color: var(--fh-white) !important;\r\n    box-shadow: 0 7px 20px rgba(26, 115, 232, 0.26);\r\n  }\r\n\r\n  .fh-button-primary:hover {\r\n    background: var(--fh-blue-dark);\r\n    box-shadow: 0 11px 27px rgba(26, 115, 232, 0.31);\r\n  }\r\n\r\n  .fh-text-link {\r\n    color: var(--fh-blue) !important;\r\n    font-size: 16px;\r\n    font-weight: 750;\r\n  }\r\n\r\n  .fh-text-link:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  .fh-purchase-note {\r\n    margin: 14px 0 0;\r\n    color: var(--fh-muted);\r\n    font-size: 13px;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  CSS PRODUCT VISUAL\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-visual {\r\n    position: relative;\r\n    display: flex;\r\n    min-height: 580px;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .fh-phone {\r\n    position: relative;\r\n    z-index: 4;\r\n    width: 270px;\r\n    height: 540px;\r\n    padding: 13px;\r\n    border-radius: 46px;\r\n    background: #292a2d;\r\n    box-shadow:\r\n      0 10px 22px rgba(60, 64, 67, 0.16),\r\n      0 36px 80px rgba(60, 64, 67, 0.2);\r\n  }\r\n\r\n  .fh-phone::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 19px;\r\n    left: 50%;\r\n    z-index: 5;\r\n    width: 90px;\r\n    height: 23px;\r\n    border-radius: 999px;\r\n    background: #292a2d;\r\n    transform: translateX(-50%);\r\n  }\r\n\r\n  .fh-phone-screen {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    border-radius: 35px;\r\n    background:\r\n      linear-gradient(\r\n        145deg,\r\n        rgba(255, 255, 255, 0.94),\r\n        rgba(239, 243, 248, 0.95)\r\n      );\r\n  }\r\n\r\n  .fh-phone-screen::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent 49.6%,\r\n        rgba(32, 33, 36, 0.07) 50%,\r\n        transparent 50.4%\r\n      ),\r\n      linear-gradient(\r\n        transparent 49.6%,\r\n        rgba(32, 33, 36, 0.07) 50%,\r\n        transparent 50.4%\r\n      );\r\n  }\r\n\r\n  .fh-safe {\r\n    position: absolute;\r\n    z-index: 2;\r\n    background: rgba(234, 67, 53, 0.91);\r\n  }\r\n\r\n  .fh-safe-top-left {\r\n    top: 0;\r\n    left: 0;\r\n    width: 34px;\r\n    height: 75px;\r\n    border-radius: 0 0 14px 0;\r\n  }\r\n\r\n  .fh-safe-top {\r\n    top: 0;\r\n    left: 47px;\r\n    width: calc(100% - 94px);\r\n    height: 75px;\r\n    border-radius: 0 0 14px 14px;\r\n  }\r\n\r\n  .fh-safe-top-right {\r\n    top: 0;\r\n    right: 0;\r\n    width: 34px;\r\n    height: 75px;\r\n    border-radius: 0 0 0 14px;\r\n  }\r\n\r\n  .fh-safe-left {\r\n    top: 90px;\r\n    bottom: 90px;\r\n    left: 0;\r\n    width: 34px;\r\n    border-radius: 0 14px 14px 0;\r\n  }\r\n\r\n  .fh-safe-right {\r\n    top: 90px;\r\n    right: 0;\r\n    bottom: 90px;\r\n    width: 34px;\r\n    border-radius: 14px 0 0 14px;\r\n  }\r\n\r\n  .fh-safe-bottom-left {\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 34px;\r\n    height: 75px;\r\n    border-radius: 0 14px 0 0;\r\n  }\r\n\r\n  .fh-safe-bottom {\r\n    bottom: 0;\r\n    left: 47px;\r\n    width: calc(100% - 94px);\r\n    height: 75px;\r\n    border-radius: 14px 14px 0 0;\r\n  }\r\n\r\n  .fh-safe-bottom-right {\r\n    right: 0;\r\n    bottom: 0;\r\n    width: 34px;\r\n    height: 75px;\r\n    border-radius: 14px 0 0 0;\r\n  }\r\n\r\n  .fh-center-label {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    z-index: 3;\r\n    color: #3c4043;\r\n    font-size: 22px;\r\n    font-weight: 850;\r\n    line-height: 1.05;\r\n    letter-spacing: 0.05em;\r\n    text-align: center;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  .fh-center-label span {\r\n    display: block;\r\n    color: var(--fh-blue);\r\n  }\r\n\r\n  .fh-shape {\r\n    position: absolute;\r\n    z-index: 1;\r\n  }\r\n\r\n  .fh-shape-blue {\r\n    top: 55px;\r\n    left: 12px;\r\n    width: 145px;\r\n    height: 145px;\r\n    border-radius: 38px;\r\n    background: var(--fh-blue);\r\n    transform: rotate(-8deg);\r\n  }\r\n\r\n  .fh-shape-yellow {\r\n    top: 22px;\r\n    right: 50px;\r\n    width: 72px;\r\n    height: 72px;\r\n    border-radius: 50%;\r\n    background: var(--fh-yellow);\r\n  }\r\n\r\n  .fh-shape-green {\r\n    top: 155px;\r\n    right: 4px;\r\n    width: 98px;\r\n    height: 48px;\r\n    border-radius: 999px;\r\n    background: var(--fh-green);\r\n    transform: rotate(8deg);\r\n  }\r\n\r\n  .fh-shape-red {\r\n    bottom: 58px;\r\n    left: 32px;\r\n    width: 68px;\r\n    height: 68px;\r\n    border-radius: 20px;\r\n    background: var(--fh-red);\r\n    transform: rotate(15deg);\r\n  }\r\n\r\n  .fh-floating-card {\r\n    position: absolute;\r\n    z-index: 6;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n    padding: 13px 16px;\r\n    border: 1px solid rgba(218, 220, 224, 0.85);\r\n    border-radius: 14px;\r\n    background: rgba(255, 255, 255, 0.91);\r\n    box-shadow: 0 10px 30px rgba(60, 64, 67, 0.14);\r\n    backdrop-filter: blur(12px);\r\n  }\r\n\r\n  .fh-floating-card strong {\r\n    color: var(--fh-blue);\r\n    font-size: 19px;\r\n  }\r\n\r\n  .fh-floating-card span {\r\n    color: var(--fh-muted);\r\n    font-size: 13px;\r\n    font-weight: 650;\r\n  }\r\n\r\n  .fh-floating-card-one {\r\n    right: -5px;\r\n    bottom: 112px;\r\n  }\r\n\r\n  .fh-floating-card-two {\r\n    bottom: 33px;\r\n    left: 0;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  TRUST STRIP\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-trust-strip {\r\n    border-top: 1px solid var(--fh-border);\r\n    border-bottom: 1px solid var(--fh-border);\r\n    background: var(--fh-soft-background);\r\n  }\r\n\r\n  .fh-trust-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  }\r\n\r\n  .fh-trust-grid > div {\r\n    display: flex;\r\n    min-height: 116px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    border-right: 1px solid var(--fh-border);\r\n    text-align: center;\r\n  }\r\n\r\n  .fh-trust-grid > div:last-child {\r\n    border-right: 0;\r\n  }\r\n\r\n  .fh-trust-grid strong {\r\n    margin-bottom: 6px;\r\n    color: var(--fh-text);\r\n    font-size: 25px;\r\n  }\r\n\r\n  .fh-trust-grid span {\r\n    color: var(--fh-muted);\r\n    font-size: 13px;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  SHARED SECTIONS\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-section {\r\n    padding: 110px 0;\r\n  }\r\n\r\n  .fh-section-heading {\r\n    max-width: 760px;\r\n    margin: 0 auto 52px;\r\n    text-align: center;\r\n  }\r\n\r\n  .fh-section-heading h2 {\r\n    margin-bottom: 17px;\r\n    color: var(--fh-text);\r\n    font-size: clamp(38px, 5vw, 58px);\r\n    font-weight: 800;\r\n    line-height: 1.08;\r\n    letter-spacing: -0.05em;\r\n  }\r\n\r\n  .fh-section-heading p {\r\n    margin-bottom: 0;\r\n    color: var(--fh-muted);\r\n    font-size: 18px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  BENEFITS\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-benefits-section {\r\n    background: #ffffff;\r\n  }\r\n\r\n  .fh-benefit-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 18px;\r\n  }\r\n\r\n  .fh-card {\r\n    padding: 30px;\r\n    border: 1px solid var(--fh-border);\r\n    border-radius: 20px;\r\n    background: #ffffff;\r\n    box-shadow: 0 3px 12px rgba(60, 64, 67, 0.06);\r\n    transition:\r\n      transform 180ms ease,\r\n      box-shadow 180ms ease;\r\n  }\r\n\r\n  .fh-card:hover {\r\n    box-shadow: 0 13px 32px rgba(60, 64, 67, 0.12);\r\n    transform: translateY(-4px);\r\n  }\r\n\r\n  .fh-card-icon {\r\n    display: grid;\r\n    width: 46px;\r\n    height: 46px;\r\n    place-items: center;\r\n    margin-bottom: 21px;\r\n    border-radius: 14px;\r\n    background: var(--fh-blue-light);\r\n    color: var(--fh-blue);\r\n    font-size: 19px;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .fh-card-icon-text {\r\n    font-size: 14px;\r\n  }\r\n\r\n  .fh-card h3 {\r\n    margin-bottom: 11px;\r\n    color: var(--fh-text);\r\n    font-size: 20px;\r\n    font-weight: 750;\r\n    line-height: 1.25;\r\n    letter-spacing: -0.025em;\r\n  }\r\n\r\n  .fh-card p {\r\n    margin-bottom: 0;\r\n    color: var(--fh-muted);\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  STEPS\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-how-section {\r\n    background: var(--fh-soft-background);\r\n  }\r\n\r\n  .fh-steps {\r\n    display: grid;\r\n    grid-template-columns:\r\n      minmax(0, 1fr)\r\n      auto\r\n      minmax(0, 1fr)\r\n      auto\r\n      minmax(0, 1fr);\r\n    align-items: center;\r\n    gap: 18px;\r\n  }\r\n\r\n  .fh-step {\r\n    min-height: 230px;\r\n    padding: 31px;\r\n    border: 1px solid var(--fh-border);\r\n    border-radius: 20px;\r\n    background: #ffffff;\r\n  }\r\n\r\n  .fh-step-number {\r\n    display: grid;\r\n    width: 43px;\r\n    height: 43px;\r\n    place-items: center;\r\n    margin-bottom: 28px;\r\n    border-radius: 50%;\r\n    background: var(--fh-blue);\r\n    color: #ffffff;\r\n    font-size: 16px;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .fh-step h3 {\r\n    margin-bottom: 10px;\r\n    color: var(--fh-text);\r\n    font-size: 21px;\r\n    font-weight: 750;\r\n    letter-spacing: -0.025em;\r\n  }\r\n\r\n  .fh-step p {\r\n    margin-bottom: 0;\r\n    color: var(--fh-muted);\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  .fh-step-arrow {\r\n    color: var(--fh-blue);\r\n    font-size: 28px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  DARK PRODUCT SECTION\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-dark-section {\r\n    padding: 115px 0;\r\n    overflow: hidden;\r\n    background: var(--fh-dark);\r\n    color: #ffffff;\r\n  }\r\n\r\n  .fh-dark-grid {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 0.8fr) minmax(470px, 1.2fr);\r\n    align-items: center;\r\n    gap: 80px;\r\n  }\r\n\r\n  .fh-eyebrow-dark {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    color: #d2e3fc;\r\n  }\r\n\r\n  .fh-dark-content h2 {\r\n    margin-bottom: 21px;\r\n    color: #ffffff;\r\n    font-size: clamp(40px, 5vw, 61px);\r\n    font-weight: 800;\r\n    line-height: 1.07;\r\n    letter-spacing: -0.05em;\r\n  }\r\n\r\n  .fh-dark-content p {\r\n    margin-bottom: 31px;\r\n    color: #bdc1c6;\r\n    font-size: 18px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  .fh-button-light {\r\n    background: #ffffff;\r\n    color: var(--fh-blue-dark) !important;\r\n  }\r\n\r\n  .fh-button-light:hover {\r\n    background: #f1f3f4;\r\n    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  CSS EDITOR WINDOW\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-editor-window {\r\n    position: relative;\r\n    overflow: hidden;\r\n    border: 1px solid #3c4043;\r\n    border-radius: 19px;\r\n    background: #202124;\r\n    box-shadow: 0 32px 75px rgba(0, 0, 0, 0.42);\r\n    transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);\r\n  }\r\n\r\n  .fh-editor-topbar {\r\n    display: flex;\r\n    height: 43px;\r\n    align-items: center;\r\n    gap: 7px;\r\n    padding: 0 15px;\r\n    border-bottom: 1px solid #3c4043;\r\n    background: #292a2d;\r\n  }\r\n\r\n  .fh-editor-topbar span {\r\n    width: 9px;\r\n    height: 9px;\r\n    border-radius: 50%;\r\n    background: #5f6368;\r\n  }\r\n\r\n  .fh-editor-topbar span:first-child {\r\n    background: var(--fh-red);\r\n  }\r\n\r\n  .fh-editor-topbar span:nth-child(2) {\r\n    background: var(--fh-yellow);\r\n  }\r\n\r\n  .fh-editor-topbar span:nth-child(3) {\r\n    background: var(--fh-green);\r\n  }\r\n\r\n  .fh-editor-body {\r\n    display: grid;\r\n    min-height: 345px;\r\n    grid-template-columns: 100px 1fr;\r\n  }\r\n\r\n  .fh-editor-sidebar {\r\n    padding: 24px 14px;\r\n    border-right: 1px solid #3c4043;\r\n    background: #252629;\r\n  }\r\n\r\n  .fh-editor-sidebar div {\r\n    height: 38px;\r\n    margin-bottom: 13px;\r\n    border-radius: 7px;\r\n    background: #3c4043;\r\n  }\r\n\r\n  .fh-editor-preview {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 28px;\r\n    background:\r\n      radial-gradient(circle at center, #343538, #202124 68%);\r\n  }\r\n\r\n  .fh-preview-phone {\r\n    position: relative;\r\n    width: 137px;\r\n    height: 252px;\r\n    overflow: hidden;\r\n    border: 4px solid #f1f3f4;\r\n    border-radius: 17px;\r\n    background: #2b2c2f;\r\n  }\r\n\r\n  .fh-preview-phone > span {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 100%;\r\n    color: #ffffff;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.08em;\r\n    text-align: center;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  .fh-preview-safe {\r\n    position: absolute;\r\n    background: rgba(234, 67, 53, 0.95);\r\n  }\r\n\r\n  .fh-preview-safe-top {\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 29px;\r\n  }\r\n\r\n  .fh-preview-safe-bottom {\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 29px;\r\n  }\r\n\r\n  .fh-preview-safe-left {\r\n    top: 40px;\r\n    bottom: 40px;\r\n    left: 0;\r\n    width: 19px;\r\n  }\r\n\r\n  .fh-preview-safe-right {\r\n    top: 40px;\r\n    right: 0;\r\n    bottom: 40px;\r\n    width: 19px;\r\n  }\r\n\r\n  .fh-timeline {\r\n    position: relative;\r\n    padding: 18px 24px 23px 124px;\r\n    border-top: 1px solid #3c4043;\r\n    background: #252629;\r\n  }\r\n\r\n  .fh-timeline-track {\r\n    position: relative;\r\n    height: 19px;\r\n    margin-bottom: 8px;\r\n    border-radius: 4px;\r\n    background: #3c4043;\r\n  }\r\n\r\n  .fh-timeline-track span {\r\n    display: block;\r\n    width: 64%;\r\n    height: 100%;\r\n    border-radius: inherit;\r\n    background: var(--fh-red);\r\n  }\r\n\r\n  .fh-timeline-track-blue span {\r\n    width: 82%;\r\n    background: var(--fh-blue);\r\n  }\r\n\r\n  .fh-playhead {\r\n    position: absolute;\r\n    top: 10px;\r\n    bottom: 9px;\r\n    left: 57%;\r\n    width: 2px;\r\n    background: var(--fh-yellow);\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  AUDIENCE\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-audience-section {\r\n    background: #ffffff;\r\n  }\r\n\r\n  .fh-audience-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: 20px;\r\n  }\r\n\r\n  .fh-audience-grid article {\r\n    padding: 36px;\r\n    border: 1px solid var(--fh-border);\r\n    border-radius: 20px;\r\n    text-align: center;\r\n  }\r\n\r\n  .fh-audience-grid article > div {\r\n    display: grid;\r\n    width: 52px;\r\n    height: 52px;\r\n    place-items: center;\r\n    margin: 0 auto 21px;\r\n    border-radius: 17px;\r\n    background: var(--fh-blue-light);\r\n    color: var(--fh-blue);\r\n    font-size: 21px;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .fh-audience-grid h3 {\r\n    margin-bottom: 10px;\r\n    color: var(--fh-text);\r\n    font-size: 21px;\r\n    font-weight: 750;\r\n  }\r\n\r\n  .fh-audience-grid p {\r\n    margin-bottom: 0;\r\n    color: var(--fh-muted);\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  FAQ\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-faq-section {\r\n    background: var(--fh-soft-background);\r\n  }\r\n\r\n  .fh-faq-container {\r\n    max-width: 900px;\r\n  }\r\n\r\n  .fh-faq-list {\r\n    display: grid;\r\n    gap: 13px;\r\n  }\r\n\r\n  .fh-faq-list details {\r\n    overflow: hidden;\r\n    border: 1px solid var(--fh-border);\r\n    border-radius: 15px;\r\n    background: #ffffff;\r\n  }\r\n\r\n  .fh-faq-list summary {\r\n    display: flex;\r\n    min-height: 72px;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 25px;\r\n    padding: 20px 24px;\r\n    color: var(--fh-text);\r\n    cursor: pointer;\r\n    font-size: 17px;\r\n    font-weight: 750;\r\n    list-style: none;\r\n  }\r\n\r\n  .fh-faq-list summary::-webkit-details-marker {\r\n    display: none;\r\n  }\r\n\r\n  .fh-faq-list summary span {\r\n    color: var(--fh-blue);\r\n    font-size: 25px;\r\n    font-weight: 400;\r\n    transition: transform 180ms ease;\r\n  }\r\n\r\n  .fh-faq-list details[open] summary span {\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  .fh-faq-list details p {\r\n    margin: 0;\r\n    padding: 0 24px 24px;\r\n    color: var(--fh-muted);\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  FINAL CTA\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-final-section {\r\n    padding: 90px 0;\r\n    background: #ffffff;\r\n  }\r\n\r\n  .fh-final-card {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 50px;\r\n    padding: 58px;\r\n    border-radius: 28px;\r\n    background:\r\n      radial-gradient(\r\n        circle at 94% 4%,\r\n        rgba(255, 255, 255, 0.22),\r\n        transparent 30%\r\n      ),\r\n      var(--fh-blue);\r\n    color: #ffffff;\r\n    box-shadow: 0 25px 60px rgba(26, 115, 232, 0.25);\r\n  }\r\n\r\n  .fh-final-card > div {\r\n    max-width: 720px;\r\n  }\r\n\r\n  .fh-final-label {\r\n    display: inline-block;\r\n    margin-bottom: 15px;\r\n    color: rgba(255, 255, 255, 0.82);\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.13em;\r\n  }\r\n\r\n  .fh-final-card h2 {\r\n    margin-bottom: 14px;\r\n    color: #ffffff;\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    font-weight: 800;\r\n    line-height: 1.07;\r\n    letter-spacing: -0.05em;\r\n  }\r\n\r\n  .fh-final-card p {\r\n    margin-bottom: 0;\r\n    color: rgba(255, 255, 255, 0.84);\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n  }\r\n\r\n  .fh-button-white {\r\n    flex: 0 0 auto;\r\n    background: #ffffff;\r\n    color: var(--fh-blue-dark) !important;\r\n    box-shadow: 0 7px 19px rgba(0, 0, 0, 0.17);\r\n  }\r\n\r\n  .fh-button-white:hover {\r\n    background: #f8f9fa;\r\n    box-shadow: 0 11px 27px rgba(0, 0, 0, 0.21);\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  FOOTER\r\n  ==================================================\r\n  *\/\r\n\r\n  .fh-footer {\r\n    padding: 40px 0;\r\n    border-top: 1px solid var(--fh-border);\r\n    background: var(--fh-soft-background);\r\n    text-align: center;\r\n  }\r\n\r\n  .fh-footer-logo {\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .fh-footer p {\r\n    max-width: 820px;\r\n    margin: 0 auto;\r\n    color: #80868b;\r\n    font-size: 12px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  TABLET\r\n  ==================================================\r\n  *\/\r\n\r\n  @media (max-width: 1024px) {\r\n    .fh-hero-grid {\r\n      grid-template-columns: minmax(0, 1fr) minmax(330px, 0.78fr);\r\n      gap: 42px;\r\n    }\r\n\r\n    .fh-visual {\r\n      min-height: 520px;\r\n      transform: scale(0.9);\r\n    }\r\n\r\n    .fh-benefit-grid {\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .fh-dark-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 60px;\r\n    }\r\n\r\n    .fh-dark-content {\r\n      max-width: 730px;\r\n      text-align: center;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .fh-editor-window {\r\n      width: min(720px, 100%);\r\n      margin: 0 auto;\r\n      transform: none;\r\n    }\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  MOBILE\r\n  ==================================================\r\n  *\/\r\n\r\n  @media (max-width: 767px) {\r\n    .fh-container {\r\n      width: min(100% - 32px, 1180px);\r\n    }\r\n\r\n    .fh-header-inner {\r\n      min-height: 66px;\r\n    }\r\n\r\n    .fh-logo {\r\n      font-size: 21px;\r\n    }\r\n\r\n    .fh-header-button {\r\n      min-height: 39px;\r\n      padding: 9px 14px;\r\n      font-size: 12px;\r\n    }\r\n\r\n    .fh-hero {\r\n      min-height: auto;\r\n      padding: 64px 0 72px;\r\n    }\r\n\r\n    .fh-hero-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 50px;\r\n    }\r\n\r\n    .fh-hero-content {\r\n      text-align: center;\r\n    }\r\n\r\n    .fh-hero h1 {\r\n      font-size: clamp(46px, 15vw, 67px);\r\n    }\r\n\r\n    .fh-hero-description {\r\n      font-size: 17px;\r\n    }\r\n\r\n    .fh-feature-pills {\r\n      justify-content: center;\r\n    }\r\n\r\n    .fh-hero-actions {\r\n      align-items: stretch;\r\n      flex-direction: column;\r\n      gap: 17px;\r\n    }\r\n\r\n    .fh-button-primary {\r\n      width: 100%;\r\n    }\r\n\r\n    .fh-visual {\r\n      width: 100%;\r\n      min-height: 480px;\r\n      transform: scale(0.82);\r\n      transform-origin: top center;\r\n      margin-bottom: -80px;\r\n    }\r\n\r\n    .fh-trust-grid {\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .fh-trust-grid > div {\r\n      min-height: 100px;\r\n      border-bottom: 1px solid var(--fh-border);\r\n    }\r\n\r\n    .fh-trust-grid > div:nth-child(2) {\r\n      border-right: 0;\r\n    }\r\n\r\n    .fh-trust-grid > div:nth-child(3),\r\n    .fh-trust-grid > div:nth-child(4) {\r\n      border-bottom: 0;\r\n    }\r\n\r\n    .fh-section {\r\n      padding: 78px 0;\r\n    }\r\n\r\n    .fh-section-heading {\r\n      margin-bottom: 36px;\r\n    }\r\n\r\n    .fh-section-heading h2 {\r\n      font-size: clamp(34px, 10vw, 47px);\r\n    }\r\n\r\n    .fh-section-heading p {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .fh-benefit-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .fh-card {\r\n      padding: 26px;\r\n      text-align: center;\r\n    }\r\n\r\n    .fh-card-icon {\r\n      margin-right: auto;\r\n      margin-left: auto;\r\n    }\r\n\r\n    .fh-steps {\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .fh-step {\r\n      min-height: 0;\r\n      padding: 27px;\r\n      text-align: center;\r\n    }\r\n\r\n    .fh-step-number {\r\n      margin-right: auto;\r\n      margin-left: auto;\r\n    }\r\n\r\n    .fh-step-arrow {\r\n      transform: rotate(90deg);\r\n      text-align: center;\r\n    }\r\n\r\n    .fh-dark-section {\r\n      padding: 82px 0;\r\n    }\r\n\r\n    .fh-dark-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 47px;\r\n    }\r\n\r\n    .fh-dark-content h2 {\r\n      font-size: clamp(36px, 10vw, 49px);\r\n    }\r\n\r\n    .fh-dark-content p {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .fh-editor-body {\r\n      min-height: 280px;\r\n      grid-template-columns: 68px 1fr;\r\n    }\r\n\r\n    .fh-editor-sidebar {\r\n      padding: 18px 10px;\r\n    }\r\n\r\n    .fh-editor-sidebar div {\r\n      height: 29px;\r\n    }\r\n\r\n    .fh-editor-preview {\r\n      padding: 20px;\r\n    }\r\n\r\n    .fh-preview-phone {\r\n      width: 105px;\r\n      height: 200px;\r\n    }\r\n\r\n    .fh-timeline {\r\n      padding-left: 86px;\r\n    }\r\n\r\n    .fh-audience-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .fh-audience-grid article {\r\n      padding: 28px;\r\n    }\r\n\r\n    .fh-final-section {\r\n      padding: 65px 0;\r\n    }\r\n\r\n    .fh-final-card {\r\n      align-items: stretch;\r\n      flex-direction: column;\r\n      padding: 38px 25px;\r\n      text-align: center;\r\n    }\r\n\r\n    .fh-button-white {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  SMALL MOBILE\r\n  ==================================================\r\n  *\/\r\n\r\n  @media (max-width: 420px) {\r\n    .fh-header-button {\r\n      padding-right: 11px;\r\n      padding-left: 11px;\r\n    }\r\n\r\n    .fh-visual {\r\n      transform: scale(0.7);\r\n      margin-top: -20px;\r\n      margin-bottom: -130px;\r\n    }\r\n\r\n    .fh-feature-pills span {\r\n      font-size: 12px;\r\n    }\r\n\r\n    .fh-faq-list summary {\r\n      padding: 18px;\r\n      font-size: 15px;\r\n    }\r\n\r\n    .fh-faq-list details p {\r\n      padding: 0 18px 20px;\r\n    }\r\n  }\r\n\r\n  \/*\r\n  ==================================================\r\n  ACCESSIBILITY\r\n  ==================================================\r\n  *\/\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .fh-full-page *,\r\n    .fh-full-page *::before,\r\n    .fh-full-page *::after {\r\n      scroll-behavior: auto !important;\r\n      transition: none !important;\r\n    }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FRAMEHALO Buy FRAMEHALO Made for DaVinci Resolve Keep your content inside the safe zone. FRAMEHALO gives you clear social safe-zone guides for DaVinci Resolve, helping you position captions, titles, logos and calls to action where viewers can see them. HD 4K 7 Platform Layouts Drag &amp; Drop Adjustment Clip Get FRAMEHALO \u2192 See how it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-770","page","type-page","status-publish","hentry","entry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"rafatalsed93@gmail.com","author_link":"https:\/\/cutdrama.com\/ar\/author\/rafatalsed93gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"FRAMEHALO Buy FRAMEHALO Made for DaVinci Resolve Keep your content inside the safe zone. FRAMEHALO gives you clear social safe-zone guides for DaVinci Resolve, helping you position captions, titles, logos and calls to action where viewers can see them. HD 4K 7 Platform Layouts Drag &amp; Drop Adjustment Clip Get FRAMEHALO \u2192 See how it&hellip;","_links":{"self":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/comments?post=770"}],"version-history":[{"count":9,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/770\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/pages\/770\/revisions\/780"}],"wp:attachment":[{"href":"https:\/\/cutdrama.com\/ar\/wp-json\/wp\/v2\/media?parent=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}