Neoclassic
Category: Pricing
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div data-framer-name="wrapper" style="display: grid; position: relative; width: 1200px; height: 600px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; gap: 20px; grid-template-columns: 386.663px 386.663px 386.675px; grid-template-rows: 600px; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: relative; width: 386.663px; height: 600px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Default" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(253, 253, 150); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 386.663px; opacity: 1; display: flex; position: relative; height: 600px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 386.663px; height: 600px; padding: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 40px; overflow: visible; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 113.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; display: block; position: static; width: 346.663px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Starter</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 346.663px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">For creators who need simple tools to launch and manage online classes with full control from day one.</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 124.988px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="iJ0GIKQvm" style="--framer-text-alignment: left; display: block; position: static; width: 124.988px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 40px; font-weight: 900; line-height: 48px; text-align: left; text-transform: uppercase; letter-spacing: -1.6px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">19.99€</p></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="display: block; position: static; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: justify; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">/ mo</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 181px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: visible; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="JGN4yq03n" style="--framer-text-alignment: justify; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 346.663px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 14px; font-weight: 700; line-height: 21px; text-align: justify; letter-spacing: -0.56px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">INCLUDES:</p></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">1 course</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Up to 100 students</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Basic analytics</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Email support</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Custom domain</p></div></div></div><div style="opacity: 1; display: block; position: relative; width: 346.663px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><!--$--><a data-border="true" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 219, 88); box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; width: 346.663px; opacity: 1; will-change: auto; display: flex; position: relative; height: 48px; padding: 12px 16px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: pointer;" href="https://stripe.com/" target="_blank" rel="noopener" data-framer-name="Solid"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Start for free</p></div></a><!--/$--></div></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: relative; width: 386.663px; height: 600px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Default" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 214, 179); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 386.663px; opacity: 1; display: flex; position: relative; height: 600px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 386.663px; height: 600px; padding: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 40px; overflow: visible;"><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 113.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: hidden; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; cursor: crosshair; display: block; position: static; width: 346.663px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Pro</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); cursor: crosshair; display: block; position: static; width: 346.663px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">For professionals who want control, smart features and more freedom to grow their digital academy.</p></div></div><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 346.663px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 12px; overflow: visible;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 131.325px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="iJ0GIKQvm" style="--framer-text-alignment: left; display: block; position: static; width: 131.325px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 40px; font-weight: 900; line-height: 48px; text-align: left; text-transform: uppercase; letter-spacing: -1.6px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">49.99€</p></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="display: block; position: static; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: justify; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">/ mo</p></div></div><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 346.663px; height: 181px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: visible;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.663px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="JGN4yq03n" style="--framer-text-alignment: justify; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); cursor: crosshair; display: block; position: static; width: 346.663px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 14px; font-weight: 700; line-height: 21px; text-align: justify; letter-spacing: -0.56px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">INCLUDES:</p></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); cursor: crosshair; display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Unlimited courses</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Up to 1,000 students</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Automation tools</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">certificates</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.663px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Priority support</p></div></div></div><div style="opacity: 1; display: block; position: relative; width: 346.663px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><!--$--><a data-border="true" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 219, 88); box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; width: 346.663px; opacity: 1; will-change: auto; display: flex; position: relative; height: 48px; padding: 12px 16px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: pointer;" href="https://stripe.com/" target="_blank" rel="noopener" data-framer-name="Solid"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Start for free</p></div></a><!--/$--></div></div></div></div></div><div style="display: contents; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="display: block; position: relative; width: 386.675px; height: 600px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div data-border="true" data-framer-name="Default" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(218, 245, 240); box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px; width: 386.675px; opacity: 1; display: flex; position: relative; height: 600px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: flex-start; align-items: flex-start; gap: 20px; overflow: hidden; cursor: crosshair;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 386.675px; height: 600px; padding: 20px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: column; justify-content: center; align-items: center; gap: 40px; overflow: visible;"><div data-framer-name="wrapper" style="opacity: 1; cursor: crosshair; display: flex; position: relative; width: 346.675px; height: 113.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: hidden;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.675px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><h3 data-styles-preset="WCABqTCb2" style="--framer-text-alignment: left; cursor: crosshair; display: block; position: static; width: 346.675px; height: 33.6px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 28px; font-weight: 900; line-height: 33.6px; text-align: left; text-transform: uppercase; letter-spacing: -1.12px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Academy</h3></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.675px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 346.675px; height: 72px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">For teams and schools that scale training delivery with full support and powerful admin features.</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 131.425px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="iJ0GIKQvm" style="--framer-text-alignment: left; display: block; position: static; width: 131.425px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 40px; font-weight: 900; line-height: 48px; text-align: left; text-transform: uppercase; letter-spacing: -1.6px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">99.99€</p></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="paYT5vbnW" style="display: block; position: static; width: 45.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, sans-serif; font-size: 20px; font-weight: 900; line-height: 24px; text-align: justify; text-transform: uppercase; letter-spacing: -0.8px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">/ mo</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 181px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: center; align-items: center; gap: 8px; overflow: visible; cursor: crosshair;"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 346.675px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="JGN4yq03n" style="--framer-text-alignment: justify; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 346.675px; height: 21px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 14px; font-weight: 700; line-height: 21px; text-align: justify; letter-spacing: -0.56px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">INCLUDES:</p></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Unlimited courses</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Unlimited students</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Team accounts</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Onboarding</p></div></div><div data-framer-name="wrapper" style="opacity: 1; display: flex; position: relative; width: 346.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: crosshair;"><div data-framer-component-type="SVG" data-framer-name="Graphic" style="image-rendering: pixelated; flex: 0 0 auto; opacity: 1; display: block; position: relative; width: 16px; height: 16px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;" aria-hidden="true"><div style="width: 16px; height: 16px; aspect-ratio: inherit; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><svg style="width: 16px; height: 16px; display: block; position: static; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: hidden; cursor: crosshair;"><use href="#svg9284598072" style="display: inline; position: static; width: auto; height: auto; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"></use></svg></div></div><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 1 0 0px; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: crosshair;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-alignment: left; --framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 318.675px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Custom domain</p></div></div></div><div style="opacity: 1; display: block; position: relative; width: 346.675px; height: 48px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><!--$--><a data-border="true" data-framer-name="Solid" style="--border-bottom-width: 2px; --border-color: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --border-left-width: 2px; --border-right-width: 2px; --border-style: solid; --border-top-width: 2px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 219, 88); box-shadow: rgb(0, 0, 0) 4px 4px 0px 0px; width: 346.675px; opacity: 1; display: flex; position: relative; height: 48px; padding: 12px 16px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: center; gap: 12px; overflow: visible; cursor: pointer;" href="https://stripe.com/" target="_blank" rel="noopener"><div style="outline: none; display: flex; flex-flow: column; justify-content: flex-start; flex: 0 0 auto; --extracted-r6o4lv: var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0)); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1; position: relative; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; overflow: visible; cursor: pointer;" data-framer-component-type="RichTextContainer"><p data-styles-preset="yWUJk0B4D" style="--framer-text-color: var(--extracted-r6o4lv, var(--token-14825bd6-f9b4-4846-afef-1af0cbf8c065, rgb(0, 0, 0))); display: block; position: static; width: 96.925px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Epilogue, "Epilogue Placeholder", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: -0.64px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;">Start for free</p></div></a><!--/$--></div></div></div></div></div></div>
create a canvas to display a pricing component. we want the pricing component to be centered and the space around it to be flexible empty.
reproduce this pricing component .change the content
Created by: LandingHero
