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=\"\u20ac2,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=\"\u20ac5,99\" 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,99\" 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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Personal Cloud Choose your plan 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 extra \u20ac4,99 […]<\/p>\n","protected":false},"author":161,"featured_media":0,"parent":12993,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13053","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13053","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=13053"}],"version-history":[{"count":17,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13053\/revisions"}],"predecessor-version":[{"id":13590,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/13053\/revisions\/13590"}],"up":[{"embeddable":true,"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/pages\/12993"}],"wp:attachment":[{"href":"https:\/\/thegood.cloud\/nl\/wp-json\/wp\/v2\/media?parent=13053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}