{"id":284,"date":"2026-07-29T15:26:42","date_gmt":"2026-07-29T15:26:42","guid":{"rendered":"https:\/\/www.mediamagic.ltd.uk\/site\/?page_id=284"},"modified":"2026-07-29T16:24:54","modified_gmt":"2026-07-29T16:24:54","slug":"book-a-demo","status":"publish","type":"page","link":"https:\/\/www.mediamagic.ltd.uk\/site\/book-a-demo\/","title":{"rendered":"Book a Demo"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================================\n   AutoMagic - Book a demo\n   Paste this whole file into:\n     Appearance > Customize > Additional CSS\n   (block themes: Appearance > Editor > Styles > three dots > Additional CSS)\n\n   Do NOT paste this into the page. Inline CSS in post content is being\n   truncated on this site, which is what broke the previous version.\n\n   Everything is scoped to .amdemo so it cannot affect the theme's\n   header, navigation or footer.\n\n   Form controls are targeted BOTH by class and by element type. If any\n   sanitiser ever strips the class attributes, the type selectors still\n   hold the design together.\n   ========================================================================= *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n\/* ---- tokens + scoped base ---- *\/\n.amdemo {\n  --am-primary: #5b4bf0;\n  --am-primary-hover: #4b3be0;\n  --am-titles: #16161d;\n  --am-surface: #f7f8fc;\n  --am-surface-dim: #edeef2;\n  --am-error: #ba1a1a;\n  --am-body: #474555;\n  --am-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-family: var(--am-font);\n  color: var(--am-body);\n  background: #ffffff;\n  text-align: left;\n  -webkit-font-smoothing: antialiased;\n}\n.amdemo, .amdemo *, .amdemo *::before, .amdemo *::after { box-sizing: border-box; }\n\n\/* Low-specificity reset. Component rules below all use two classes,\n   so they always outrank this. *\/\n.amdemo :is(h1, h2, p, label, form, div, span) {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: inherit;\n}\n.amdemo h1, .amdemo h2 {\n  color: var(--am-titles);\n  font-weight: 700;\n  letter-spacing: -0.02em;\n}\n\n\/* ---- full width, escaping the theme's narrow content column ----\n   If this ever causes a sideways scrollbar, delete amdemo--full\n   from the opening div in the page markup. ---- *\/\n.amdemo.amdemo--full {\n  width: 100vw;\n  max-width: 100vw;\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n  overflow-x: clip;\n}\n\n\/* ---- hero ---- *\/\n.amdemo .amdemo__hero {\n  max-width: 780px;\n  margin: 0 auto;\n  padding: 64px 24px 0;\n  text-align: center;\n}\n.amdemo .amdemo__eyebrow {\n  color: var(--am-primary);\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  margin: 0 0 24px;\n}\n.amdemo .amdemo__h1 {\n  font-size: 38px;\n  line-height: 1.15;\n  margin: 0 0 24px;\n}\n.amdemo .amdemo__lede {\n  font-size: 18px;\n  line-height: 1.65;\n  color: var(--am-body);\n  max-width: 620px;\n  margin: 0 auto;\n}\n\n\/* ---- panel ---- *\/\n.amdemo .amdemo__wrap {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 48px 20px 72px;\n}\n.amdemo .amdemo__panel {\n  background: var(--am-surface);\n  border-radius: 16px;\n  padding: 36px 26px;\n}\n.amdemo .amdemo__ptitle {\n  font-size: 26px;\n  line-height: 1.25;\n  margin: 0 0 34px;\n}\n\n\/* ---- fields ---- *\/\n.amdemo .amdemo__field { margin: 0 0 28px; }\n.amdemo .amdemo__label {\n  display: block;\n  color: var(--am-titles);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.4;\n  margin: 0 0 10px;\n}\n.amdemo .amdemo__req { color: var(--am-primary); }\n.amdemo .amdemo__opt {\n  color: var(--am-body);\n  font-weight: 400;\n  font-size: 13px;\n  margin-left: 4px;\n}\n.amdemo .amdemo__field:focus-within .amdemo__label { color: var(--am-primary); }\n\n\/* ---- inputs ----\n   Targeted by class AND by element type. Block themes style these\n   elements globally, so the fought properties are forced. *\/\n.amdemo .amdemo__input,\n.amdemo .amdemo__form input[type=\"text\"],\n.amdemo .amdemo__form input[type=\"email\"],\n.amdemo .amdemo__form input[type=\"tel\"],\n.amdemo .amdemo__form textarea {\n  display: block !important;\n  width: 100% !important;\n  background: var(--am-surface-dim) !important;\n  color: var(--am-titles) !important;\n  border: 2px solid transparent !important;\n  border-radius: 8px !important;\n  padding: 15px 18px !important;\n  font-family: var(--am-font) !important;\n  font-size: 16px !important;\n  font-weight: 400 !important;\n  line-height: 1.45 !important;\n  letter-spacing: 0 !important;\n  text-transform: none !important;\n  box-shadow: none !important;\n  outline: none !important;\n  min-height: 54px;\n  height: auto !important;\n  margin: 0 !important;\n  appearance: none !important;\n  -webkit-appearance: none !important;\n  transition: background-color .15s ease, border-color .15s ease;\n}\n.amdemo .amdemo__form input::placeholder,\n.amdemo .amdemo__form textarea::placeholder {\n  color: #8b8a99 !important;\n  opacity: 1;\n}\n.amdemo .amdemo__form input:hover,\n.amdemo .amdemo__form textarea:hover {\n  background: #e7e8ee !important;\n}\n.amdemo .amdemo__form input:focus,\n.amdemo .amdemo__form textarea:focus {\n  background: #ffffff !important;\n  border-color: var(--am-primary) !important;\n}\n.amdemo .amdemo__form textarea {\n  min-height: 128px;\n  resize: vertical;\n}\n\n\/* ---- submit ---- *\/\n.amdemo .amdemo__btn,\n.amdemo .amdemo__form button[type=\"submit\"] {\n  display: block !important;\n  width: 100% !important;\n  background: var(--am-primary) !important;\n  color: #ffffff !important;\n  border: 0 !important;\n  border-radius: 8px !important;\n  padding: 19px 24px !important;\n  font-family: var(--am-font) !important;\n  font-size: 17px !important;\n  font-weight: 700 !important;\n  line-height: 1.2 !important;\n  letter-spacing: 0.01em !important;\n  text-transform: none !important;\n  text-align: center !important;\n  text-decoration: none !important;\n  text-shadow: none !important;\n  box-shadow: none !important;\n  cursor: pointer;\n  height: auto !important;\n  min-width: 0 !important;\n  min-height: 56px;\n  margin: 36px 0 0 !important;\n  appearance: none !important;\n  -webkit-appearance: none !important;\n  transition: background-color .15s ease;\n}\n.amdemo .amdemo__form button[type=\"submit\"]:hover {\n  background: var(--am-primary-hover) !important;\n}\n.amdemo .amdemo__form button[type=\"submit\"]:focus-visible {\n  outline: 3px solid rgba(91, 75, 240, .35) !important;\n  outline-offset: 2px;\n}\n\n\/* ---- small print ---- *\/\n.amdemo .amdemo__smallprint {\n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--am-body);\n  text-align: center;\n  margin: 24px 0 0;\n}\n\n\/* ---- breakpoints: the panel background grows with the screen ---- *\/\n@media (min-width: 560px) {\n  .amdemo .amdemo__panel { padding: 52px 44px; }\n}\n@media (min-width: 768px) {\n  .amdemo .amdemo__hero { padding: 96px 24px 0; }\n  .amdemo .amdemo__h1 { font-size: 50px; }\n  .amdemo .amdemo__wrap { padding: 64px 24px 96px; }\n  .amdemo .amdemo__panel { padding: 76px 72px; }\n  .amdemo .amdemo__ptitle { font-size: 30px; margin: 0 0 40px; }\n}\n@media (min-width: 1100px) {\n  .amdemo .amdemo__panel { padding: 88px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .amdemo .amdemo__form input,\n  .amdemo .amdemo__form textarea,\n  .amdemo .amdemo__form button { transition: none; }\n}\n\n\/* =========================================================================\n   CONTACT FORM 7 COMPATIBILITY\n   Only relevant once you swap the static form for a real CF7 form.\n   Harmless to leave in place until then.\n   ========================================================================= *\/\n.amdemo .wpcf7-form-control-wrap { display: block; }\n.amdemo form.wpcf7-form { margin: 0; }\n.amdemo .wpcf7-spinner { display: block; margin: 12px auto 0; }\n.amdemo .wpcf7-not-valid-tip {\n  color: var(--am-error);\n  font-size: 13.5px;\n  line-height: 1.4;\n  font-family: var(--am-font);\n  font-weight: 400;\n  margin-top: 8px;\n  display: block;\n}\n.amdemo input.wpcf7-not-valid,\n.amdemo textarea.wpcf7-not-valid {\n  border-color: var(--am-error) !important;\n  background: #ffffff !important;\n}\n.amdemo .wpcf7-response-output {\n  margin: 24px 0 0 !important;\n  padding: 14px 18px !important;\n  border: 0 !important;\n  border-radius: 8px !important;\n  font-size: 15px;\n  line-height: 1.5;\n  font-family: var(--am-font);\n  text-align: center;\n  background: var(--am-surface-dim);\n  color: var(--am-titles);\n}\n.amdemo form.sent .wpcf7-response-output {\n  background: rgba(91, 75, 240, .10);\n  color: var(--am-primary);\n}\n.amdemo form.invalid .wpcf7-response-output,\n.amdemo form.failed .wpcf7-response-output {\n  background: rgba(186, 26, 26, .08);\n  color: var(--am-error);\n}\n\n\/* =========================================================================\n   END MARKER - keep this last.\n   If the small print under the button is centred and grey, the whole\n   file has loaded. If it is left-aligned and full size, the CSS is\n   being truncated and nothing below that point is being applied.\n   ========================================================================= *\/\n.amdemo .amdemo__smallprint { text-align: center; }\n<\/style>\n\n<!-- ============================================================\n     AutoMagic - Book a demo - PAGE MARKUP\n     Paste into ONE WordPress \"Custom HTML\" block.\n     The styling lives in book-a-demo-styles.css, which goes into\n     Appearance > Customize > Additional CSS. Do not put it here.\n     ============================================================ -->\n\n<div class=\"amdemo amdemo--full\">\n\n  <section class=\"amdemo__hero\">\n    <p class=\"amdemo__eyebrow\">Book a demo<\/p>\n    <h1 class=\"amdemo__h1\">See AutoMagic on your own products<\/h1>\n    <p class=\"amdemo__lede\">Tell us a little about your business and we will get in touch to arrange a walkthrough.<\/p>\n  <\/section>\n\n  <section class=\"amdemo__wrap\">\n    <div class=\"amdemo__panel\">\n      <h2 class=\"amdemo__ptitle\">Tell us about you<\/h2>\n\n      <form class=\"amdemo__form\" action=\"https:\/\/www.mediamagic.ltd.uk\/site\/thank-you-and-whats-next\/\" method=\"post\">\n\n        <div class=\"amdemo__field\">\n          <label class=\"amdemo__label\" for=\"am-name\">Name <span class=\"amdemo__req\">*<\/span><\/label>\n          <input class=\"amdemo__input\" id=\"am-name\" name=\"am-name\" type=\"text\" placeholder=\"Your full name\" autocomplete=\"name\" required=\"\">\n        <\/div>\n\n        <div class=\"amdemo__field\">\n          <label class=\"amdemo__label\" for=\"am-company\">Company name <span class=\"amdemo__req\">*<\/span><\/label>\n          <input class=\"amdemo__input\" id=\"am-company\" name=\"am-company\" type=\"text\" placeholder=\"Your company name\" autocomplete=\"organization\" required=\"\">\n        <\/div>\n\n        <div class=\"amdemo__field\">\n          <label class=\"amdemo__label\" for=\"am-email\">Email address <span class=\"amdemo__req\">*<\/span><\/label>\n          <input class=\"amdemo__input\" id=\"am-email\" name=\"am-email\" type=\"email\" placeholder=\"you@company.co.uk\" autocomplete=\"email\" required=\"\">\n        <\/div>\n\n        <div class=\"amdemo__field\">\n          <label class=\"amdemo__label\" for=\"am-phone\">Phone number <span class=\"amdemo__req\">*<\/span><\/label>\n          <input class=\"amdemo__input\" id=\"am-phone\" name=\"am-phone\" type=\"tel\" placeholder=\"07700 900000\" autocomplete=\"tel\" required=\"\">\n        <\/div>\n\n        <div class=\"amdemo__field\">\n          <label class=\"amdemo__label\" for=\"am-notes\">Additional information <span class=\"amdemo__opt\">(optional)<\/span><\/label>\n          <textarea class=\"amdemo__input\" id=\"am-notes\" name=\"am-notes\" rows=\"4\" placeholder=\"Tell us anything else we should know\"><\/textarea>\n        <\/div>\n\n        <button class=\"amdemo__btn\" type=\"submit\">Request a demo<\/button>\n\n        <p class=\"amdemo__smallprint\">We will only use these details to contact you about AutoMagic.<\/p>\n\n      <\/form>\n    <\/div>\n  <\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Book a demo See AutoMagic on your own products Tell us a little about your business and we will get in touch to arrange a walkthrough. Tell us about you Name * Company name * Email address * Phone number * Additional information (optional) Request a demo We will only use these details to contact [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-284","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/pages\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":8,"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/pages\/284\/revisions"}],"predecessor-version":[{"id":302,"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/pages\/284\/revisions\/302"}],"wp:attachment":[{"href":"https:\/\/www.mediamagic.ltd.uk\/site\/wp-json\/wp\/v2\/media?parent=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}