Pricing Cards<\/title>\n\n <style>\n :root{\n --bg: #ffffff;\n --card: #ffffff;\n --text: #0b0b0b;\n --muted: rgba(0,0,0,.58);\n --line: rgba(0,0,0,.08);\n --shadow: 0 14px 40px rgba(0,0,0,.08);\n --radius: 34px;\n --badge: #BFF7D5;\n --badge-text: #0b0b0b;\n --btn: #0b0b0b;\n --btn-text: #ffffff;\n\n \/* requested hover gradient bottom color *\/\n --hover-bottom: #F1F1F182;\n }\n\n *{ box-sizing:border-box; }\n body{\n margin:0;\n background: var(--bg);\n color: var(--text);\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n padding: px 18px;\n }\n\n .wrap{\n max-width: 1220px;\n margin: 0 auto;\n }\n\n \/* Toggle *\/\n .topbar{\n display:flex;\n align-items:center;\n justify-content:center;\n gap:12px;\n margin-bottom: 22px;\n }\n .toggle{\n display:flex;\n align-items:center;\n gap:12px;\n user-select:none;\n }\n .toggle-label{\n font-size: 14px;\n font-weight: 600;\n color: rgba(0,0,0,.7);\n }\n .switch{\n position: relative;\n width: 56px;\n height: 32px;\n background: rgba(0,0,0,.08);\n border-radius: 999px;\n border: 1px solid rgba(0,0,0,.10);\n cursor: pointer;\n transition: background .2s ease;\n }\n \n \/* Force monthly (aria-checked=\"false\") to be grey *\/\n.switch{\n background: rgba(0,0,0,.08) !important;\n border-color: rgba(0,0,0,.10) !important;\n}\n\n\/* Yearly stays green *\/\n.switch[aria-checked=\"true\"]{\n background: #76FBA0 !important;\n}\n\n .switch::after{\n content:\"\";\n position:absolute;\n top: 50%;\n left: 4px;\n width: 24px;\n height: 24px;\n transform: translateY(-50%);\n background: #fff;\n border-radius: 999px;\n box-shadow: 0 6px 16px rgba(0,0,0,.12);\n transition: left .2s ease;\n }\n .switch[aria-checked=\"true\"]{\n background: #76FBA0 ;\n }\n .switch[aria-checked=\"true\"]::after{\n left: 28px;\n }\n\n \/* Cards grid *\/\n .grid{\n display:grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 26px;\n align-items: stretch;\n }\n\n .card{\n background: var(--card);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 34px 34px 30px;\n position: relative;\n overflow: hidden;\n transition: transform .18s ease, background .18s ease;\n background: #fff;\n }\n\n \/* requested hover gradient: top -> bottom, white to #F1F1F182 *\/\n .card:hover{\n background: linear-gradient(to bottom, #ffffff 0%, var(--hover-bottom) 100%);\n }\n\n .plan-row{\n display:flex;\n align-items:flex-start;\n justify-content:space-between;\n gap: 16px;\n margin-bottom: 8px;\n }\n\n .plan{\n font-size: 30px;\n line-height: 1.1;\n font-weight: 600;\n letter-spacing: -0.02em;\n margin: 0;\n font-family: Familjen Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n }\n\n .badge{\n font-size: 13px;\n font-weight: 600;\n background: var(--badge);\n color: var(--badge-text);\n padding: 5px 10px;\n border-radius: 999px;\n white-space: nowrap;\n }\n\n .subtitle{\n margin: 6px 0 20px;\n color: var(--muted);\n font-size: 14px;\n font-weight: 500;\n }\n\n .price-row{\n display:flex;\n align-items: baseline;\n gap: 10px;\n margin: 0 0 12px;\n }\n\n .price{\n font-size: 35px;\n font-weight: 700;\n color: #000000;\n letter-spacing: -0.03em;\n margin: 0;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n }\n .per{\n font-size: 16px;\n font-weight: 600;\n color: #000000;\n }\n\n .billed{\n font-size: 13px;\n font-weight: 500;\n color: rgba(0,0,0,.45);\n margin: 0 0 22px;\n }\n\n \/* Features *\/\n .features{\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 14px;\n padding-top: 4px;\n padding-bottom: 22px;\n }\n\n .features li{\n display: flex;\n align-items: flex-start;\n gap: 12px;\n font-size: 14px;\n font-weight: 500;\n color: #000; \/* FIX: was #fffff *\/\n line-height: 1.35;\n }\n\n \/* Black circle + white check *\/\n .check{\n flex: 0 0 auto;\n width: 22px;\n height: 22px;\n border-radius: 999px;\n background: #111;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-top: 2px;\n }\n .check svg{\n width: 14px;\n height: 14px;\n display: block;\n }\n .check svg path{\n stroke: #fff;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n }\n\n .cta{\n margin-top: auto;\n display:flex;\n }\n\n .btn{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n background: var(--btn);\n color: var(--btn-text);\n border-radius: 999px;\n padding: 10px 10px;\n min-width: 100px;\n cursor: pointer;\n\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.01em;\n text-decoration: none;\n }\n .btn:hover{\n transform: translateY(-1px);\n }\n .btn:active{\n transform: translateY(0px);\n opacity: .92;\n }\n\n \/* Responsive *\/\n @media (max-width: 1020px){\n .grid{ grid-template-columns: 1fr; }\n .card{ padding: 28px; border-radius: 28px; }\n }\n \n \/* STARTER *\/\n.btn-starter:hover{\n background: linear-gradient(\n 90deg,\n #FFFD60 0%,\n #FF7E37 100%\n );\n color: #0b0b0b;\n}\n\n\/* PLUS *\/\n.btn-plus:hover{\n background: linear-gradient(\n 90deg,\n #76FBA0 77%,\n #FFFFFF 100%\n );\n color: #0b0b0b;\n}\n\n\/* PRO *\/\n.btn-pro:hover{\n background: linear-gradient(\n 90deg,\n #F24BFF 77%,\n #FFFFFF 100%\n );\n color: #0b0b0b;\n}\n\n <\/style>\n<\/head>\n\n<body>\n <div class=\"wrap\">\n <div class=\"topbar\">\n <div class=\"toggle\" aria-label=\"Billing toggle\">\n <span class=\"toggle-label\" id=\"lblMonthly\">Billed monthly<\/span>\n <button class=\"switch\" id=\"billingSwitch\" type=\"button\" role=\"switch\" aria-checked=\"true\" aria-labelledby=\"lblMonthly lblYearly\"><\/button>\n <span class=\"toggle-label\" id=\"lblYearly\">Billed annually<\/span>\n <\/div>\n <\/div>\n\n <div class=\"grid\" id=\"pricingGrid\">\n \n <section class=\"card\" data-plan=\"starter\">\n <div class=\"plan-row\">\n <h3 class=\"plan\">10GB<\/h3>\n <span style=\"width:1px\"><\/span>\n <\/div>\n\n <p class=\"subtitle\">Perfect for your personal essentials<\/p>\n\n <div class=\"price-row\">\n <p class=\"price\" data-month=\"\u20ac3,49\" data-year=\"\u20ac1,99\">\u20ac1,99<\/p>\n <span class=\"per\">\/month<\/span>\n <\/div>\n\n <p class=\"billed\" data-month=\"Billed monthly\" data-year=\"Billed annually (\u20ac23,88 \/ year)\">Billed annually (\u20ac23,88 \/ year)<\/p>\n\n <ul class=\"features\">\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Perfect for your personal essentials\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Store and sync your files securely\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Access from web, mobile and desktop\n <\/li>\n <\/ul>\n\n <div class=\"cta\">\n <a class=\"btn btn-starter js-cta\"\n href=\"\/checkout\/?add-to-cart=9999&variation_id=10261&attribute_pa_storage-space=10-gb&attribute_pa_billing-term=1-month\"\n data-month-href=\"\/checkout\/?add-to-cart=9999&variation_id=10261&attribute_pa_storage-space=10-gb&attribute_pa_billing-term=1-month\"\n data-year-href=\"\/checkout\/?add-to-cart=9999&variation_id=10262&attribute_pa_storage-space=10-gb&attribute_pa_billing-term=1-year\">\n Let\u2019s do it\n<\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"card\" data-plan=\"plus\">\n <div class=\"plan-row\">\n <h3 class=\"plan\">200GB<\/h3>\n <span class=\"badge\">Most Popular<\/span>\n <\/div>\n\n <p class=\"subtitle\">If you need just that little extra<\/p>\n\n <div class=\"price-row\">\n <p class=\"price\" data-month=\"\u20ac6,49\" data-year=\"\u20ac4,99\">\u20ac4,99<\/p>\n <span class=\"per\">\/month<\/span>\n <\/div>\n\n <p class=\"billed\" data-month=\"Billed monthly\" data-year=\"Billed annually (\u20ac59,88 \/ year)\">Billed annually (\u20ac59,88 \/ year)<\/p>\n\n <ul class=\"features\">\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n If you need just that little extra\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Store and sync your files securely\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Access from web, mobile and desktop\n <\/li>\n <\/ul>\n\n <div class=\"cta\">\n <a class=\"btn btn-plus js-cta\"\n href=\"\/checkout\/?add-to-cart=9999&variation_id=10263&attribute_pa_storage-space=200-gb&attribute_pa_billing-term=1-month\"\n data-month-href=\"\/checkout\/?add-to-cart=9999&variation_id=10263&attribute_pa_storage-space=200-gb&attribute_pa_billing-term=1-month\"\n data-year-href=\"\/checkout\/?add-to-cart=9999&variation_id=10264&attribute_pa_storage-space=200-gb&attribute_pa_billing-term=1-year\">\n Let\u2019s do it\n<\/a>\n\n <\/div>\n <\/section>\n\n \n <section class=\"card\" data-plan=\"pro\">\n <div class=\"plan-row\">\n <h3 class=\"plan\">2TB<\/h3>\n <span style=\"width:1px\"><\/span>\n <\/div>\n\n <p class=\"subtitle\">For power users with lots of data<\/p>\n\n <div class=\"price-row\">\n <p class=\"price\" data-month=\"\u20ac11,49\" data-year=\"\u20ac9,99\">\u20ac9,99<\/p>\n <span class=\"per\">\/month<\/span>\n <\/div>\n\n <p class=\"billed\" data-month=\"Billed monthly\" data-year=\"Billed annually (\u20ac119,88 \/ year)\">Billed annually (\u20ac119,88 \/ year)<\/p>\n\n <ul class=\"features\">\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n For power users with lots of data\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Store and sync your files securely\n <\/li>\n <li>\n <span class=\"check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M20 7L10 17l-5-5\"><\/path>\n <\/svg>\n <\/span>\n Access from web, mobile and desktop\n <\/li>\n <\/ul>\n\n <div class=\"cta\">\n <a class=\"btn btn-pro js-cta\"\n href=\"\/checkout\/?add-to-cart=9999&variation_id=10265&attribute_pa_storage-space=2-tb&attribute_pa_billing-term=1-month\"\n data-month-href=\"\/checkout\/?add-to-cart=9999&variation_id=10265&attribute_pa_storage-space=2-tb&attribute_pa_billing-term=1-month\"\n data-year-href=\"\/checkout\/?add-to-cart=9999&variation_id=10266&attribute_pa_storage-space=2-tb&attribute_pa_billing-term=1-year\">\n Let\u2019s do it\n<\/a>\n\n\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n\n \n \n <script>\n(function () {\n const toggle = document.getElementById('billingSwitch');\n const prices = document.querySelectorAll('.price');\n const billed = document.querySelectorAll('.billed');\n const ctas = document.querySelectorAll('.js-cta');\n\n function applyBillingMode() {\n const yearly = toggle.getAttribute('aria-checked') === 'true';\n\n prices.forEach(el => {\n el.textContent = yearly ? el.dataset.year : el.dataset.month;\n });\n\n billed.forEach(el => {\n el.textContent = yearly ? el.dataset.year : el.dataset.month;\n });\n\n ctas.forEach(btn => {\n btn.href = yearly ? btn.dataset.yearHref : btn.dataset.monthHref;\n });\n }\n\n toggle.addEventListener('click', () => {\n const current = toggle.getAttribute('aria-checked') === 'true';\n toggle.setAttribute('aria-checked', String(!current));\n applyBillingMode();\n });\n\n applyBillingMode();\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc29a75 e-con-full e-flex e-con e-child\" data-id=\"fc29a75\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-2a7bed17 e-con-full e-flex e-con e-child\" data-id=\"2a7bed17\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84c3556 elementor-widget elementor-widget-heading\" data-id=\"84c3556\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Start your free trial<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6199bb7d elementor-widget elementor-widget-text-editor\" data-id=\"6199bb7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Get a 2GB workspace for 6 months.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bba5f40 elementor-align-left elementor-widget elementor-widget-button\" data-id=\"2bba5f40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/use22.thegood.cloud\/apps\/registration\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Let's do it<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>Personal Cloud Simple plans for serious work Pricing Cards Billed monthly Billed annually 10GB Perfect for your personal essentials \u20ac1,99 \/month Billed annually (\u20ac23,88 \/ year) Perfect for your personal essentials Store and sync your files securely Access from web, mobile and desktop Let\u2019s do it 200GB Most Popular If you need just that little […]<\/p>\n","protected":false},"author":161,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13054","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/users\/161"}],"replies":[{"embeddable":true,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/comments?post=13054"}],"version-history":[{"count":26,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13054\/revisions"}],"predecessor-version":[{"id":14433,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13054\/revisions\/14433"}],"wp:attachment":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/media?parent=13054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}