{"components": {"DNAGenes": {"tpl": "<div style=\"width: 100%; background: #f5f5f3; padding: 16px 24px 0; box-sizing: border-box; overflow: hidden\">\n  <div style=\"max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px\">\n    <!-- Floating rounded announcement banner -->\n    <div style=\"display: flex; justify-content: center\">\n      <a href=\"#\" style=\"display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #141a12; color: #ffffff; box-shadow: 0 8px 24px rgba(20,26,18,0.12); max-width: 100%; box-sizing: border-box\">\n        <span style=\"display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0\">New</span>\n        <span class=\"banner-text-long\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">Every McDonald's item ranked by sugar, salt and calories for your age</span>\n        <span class=\"banner-text-short\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap\">McDonald's, ranked for your age</span>\n        <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n        </span>\n      </a>\n    </div>\n\n    <!-- Navigation: floating white pill -->\n    <div style=\"display: flex; justify-content: center\">\n      <nav aria-label=\"Main\" style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 8px 8px 8px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 12px 32px rgba(20,26,18,0.10), 0 2px 6px rgba(20,26,18,0.05)\">\n        <a href=\"#\" style=\"display: flex; align-items: center; gap: 10px; flex-shrink: 0\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #58a754\">\n            <svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f1a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21c-4.4 0-8-3.1-8-7.5C4 8 9 4 12 3c3 1 8 5 8 10.5 0 4.4-3.6 7.5-8 7.5Z\"></path><path d=\"M12 21V11\"></path></svg>\n          </span>\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em\">Boone</span>\n        </a>\n\n        <div class=\"nav-links\" style=\"display: flex; align-items: center; gap: 2px; min-width: 0\">\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Food database\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">The app\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Clubs and gyms</a>\n          <div class=\"nav-dd\" style=\"position: relative\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" aria-current=\"page\" aria-haspopup=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #f3f8ef; color: #2f5e1b\">DNA <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg></a><div class=\"nav-dd-panel\" style=\"position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; z-index: 60\"><div style=\"width: 330px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 24px 48px rgba(20,26,18,0.14)\"><a class=\"nav-dd-item\" href=\"/dna-nutrition-test\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Overview</span><span style=\"font-size: 13px; color: #5d676d\">What the test is and how it works</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">What it tests</span><span style=\"font-size: 13px; color: #5d676d\">23 results across five areas of your diet</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/sample-report\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Sample reports</span><span style=\"font-size: 13px; color: #5d676d\">Read or download a real report</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#by-diet\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">By diet</span><span style=\"font-size: 13px; color: #5d676d\">Vegetarian, vegan, pescatarian, meat eater</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Genes and method</span><span style=\"font-size: 13px; color: #5d676d\">All 48 genes and how we score them</span></a><a href=\"/dna-nutrition-test#order\" style=\"margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Order your DNA test<span>£198</span></a></div></div></div>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Pricing</a>\n        </div>\n\n        <div style=\"display: flex; align-items: center; gap: 6px; flex-shrink: 0\">\n          <a class=\"nav-signin nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500\">Sign in</a>\n          <a class=\"nav-cta\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Get the app</a>\n          <button class=\"nav-menu\" type=\"button\" aria-label=\"Open menu\" style=\"display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #f3f8ef; color: #1b2b36; cursor: pointer\">\n            <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 17h16\"></path></svg>\n          </button>\n        </div>\n      </nav>\n    </div>\n\n    <nav aria-label=\"DNA test\" style=\"display: flex; justify-content: center\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 6px 6px 6px 18px; border-radius: 22px; background: #e3f1dd\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>DNA test</span>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 2px\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Overview</a><a class=\"nav-link\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">What it tests</a><a class=\"nav-link\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Sample reports</a><a class=\"nav-link\" href=\"/dna-nutrition-test#by-diet\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">By diet</a><a class=\"\" href=\"/dna-nutrition-test/genes\" aria-current=\"page\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: #1b2b36; color: #ffffff\">Genes and method</a></div>\n        <a class=\"nav-cta\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap\">Order · £198</a>\n      </div>\n    </nav>\n\n\n    <section style=\"display: flex; flex-direction: column; gap: 22px; padding: 56px 24px 56px; max-width: 980px\">\n      <nav aria-label=\"Breadcrumb\" style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px\"><a href=\"/\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">Home</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><a href=\"/dna-nutrition-test\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">DNA test</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><span aria-current=\"page\" style=\"color: #1b2b36; font-weight: 600\">Genes and method</span></nav>\n      <h1 class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.045em\">48 genes, <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">every one explained</span></h1>\n      <p style=\"margin: 0; font-size: 21px; line-height: 1.55; color: #4d5a62; max-width: 780px\">Boone interprets 48 genes linked to nutrition in published research, using its own documented method. Here is every gene we read, what it does, and how it becomes a score in your report.</p>\n    </section>\n\n  </div>\n\n  <section class=\"reveal\" aria-labelledby=\"method-heading\" style=\"margin: 0 -24px; background: #17251d; padding: 112px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px\">\n      <div style=\"display: flex; flex-direction: column; gap: 14px; max-width: 820px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: rgba(88,167,84,0.18); color: #9fd49a; font-size: 14px; font-weight: 600\">How we score</span>\n        <h2 id=\"method-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: #ffffff\">From raw DNA to <span style=\"background: linear-gradient(transparent 60%, rgba(88,167,84,0.65) 60%, rgba(88,167,84,0.65) 92%, transparent 92%); padding: 0 4px\">one clear score</span></h2>\n      </div>\n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px\">\n        <sc-for list=\"{{method}}\" as=\"m\" hint-placeholder-count=\"4\">\n          <div style=\"display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #ffffff\">\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; line-height: 1; color: #9fd49a\">{{m.n}}</span>\n            <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: #ffffff\">{{m.t}}</h3>\n            <p style=\"margin: 0; font-size: 16px; line-height: 1.6; color: #b8c6bc\">{{m.s}}</p>\n          </div>\n        </sc-for>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"list-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 112px 0 64px; display: flex; flex-direction: column; gap: 28px\">\n    <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px\">\n      <h2 id=\"list-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">The {{shown}} genes</h2>\n      <div role=\"group\" aria-label=\"Filter by area\" style=\"display: flex; flex-wrap: wrap; gap: 8px\">\n        <sc-for list=\"{{filters}}\" as=\"f\" hint-placeholder-count=\"6\">\n          <button class=\"tab-btn\" type=\"button\" aria-pressed=\"{{f.pressed}}\" onClick=\"{{f.pick}}\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; {{f.style}}\"><span style=\"width: 9px; height: 9px; border-radius: 999px; background: {{f.c}}\"></span>{{f.label}}</button>\n        </sc-for>\n      </div>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px\">\n      <sc-for list=\"{{genes}}\" as=\"g\" hint-placeholder-count=\"12\">\n        <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 22px; background: #ffffff; border: 1px solid #e3e8df\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.01em\">{{g.name}}</span>\n          <span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{g.text}}</span>\n          <div style=\"display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px\"><span style=\"padding: 3px 10px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 12px; font-weight: 700\">{{g.result}}</span></div>\n        </div>\n      </sc-for>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"out-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 48px 0 112px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px\">\n    <div style=\"display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 28px; background: #ffffff; border: 1px solid #e3e8df\">\n      <h2 id=\"out-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-size: 28px\">What we leave out</h2>\n      <p style=\"margin: 0; font-size: 16px; line-height: 1.6; color: #4d5a62\">Some genes in raw DNA data are known mainly for links to medical conditions rather than nutrition. Boone doesn’t interpret them and doesn’t test for any condition. If a condition runs in your family, talk to your GP.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 28px; background: #ffffff; border: 1px solid #e3e8df\">\n      <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-size: 28px\">Tendencies, not destinies</h3>\n      <p style=\"margin: 0; font-size: 16px; line-height: 1.6; color: #4d5a62\">Genetics is a developing science. Your results show how you’re likely to respond; food, sleep and movement still shape the outcome. Boone is not a medical or diagnostic test.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 28px; background: #e3f1dd\">\n      <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-size: 28px\">See it in a real report</h3>\n      <p style=\"margin: 0; font-size: 16px; line-height: 1.6; color: #3d4a52\">Pages 13 and 14 of the sample report list every gene alongside the results it feeds into.</p>\n      <a href=\"/dna-nutrition-test/sample-report\" style=\"margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #2f5e1b\">Read the sample <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n    </div>\n  </section>\n\n  <section aria-labelledby=\"cta-heading\" style=\"max-width: 1280px; margin: 0 auto 96px; box-sizing: border-box; background: #58a754; border-radius: 40px; padding: 80px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden\">\n    <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n      <h2 id=\"cta-heading\" class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #ffffff\">Stop eating by guesswork.<br>Start eating with your biology.</h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #13250d; max-width: 560px\">A personalised nutrition blueprint that connects your genetics with the meals you actually eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 10px\">\n      <a class=\"store-btn\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test · £198</a>\n      <span style=\"font-size: 14px; font-weight: 600; color: #13250d\">Free UK delivery · Secure checkout</span>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer style=\"margin: 0 -24px; background: #1b2b36; color: #c9d3d8; padding: 88px 24px 40px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px\">\n      <div style=\"display: flex; flex-wrap: wrap; gap: 56px\">\n        <div style=\"flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px\">\n          <a href=\"#\" style=\"display: flex; align-items: center\"><img src=\"/_blob/5930dc2c89021dbab3e64b01c6af9d7b\" alt=\"Boone Logo: Personalised Nutrition\" style=\"height: 44px; width: auto; display: block\"></a>\n          <p style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; max-width: 380px\">Personalised nutrition, aligned with your biology.</p>\n          <div style=\"display: flex; flex-direction: column; gap: 12px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Get the app</span><div style=\"display: flex; flex-wrap: wrap; gap: 10px\"><a href=\"https://apps.apple.com/gb/app/boone/id6739210113\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-1-2.4-4zM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Download on the</span><span style=\"font-size: 17px; font-weight: 700\">App Store</span></span></a><a href=\"https://play.google.com/store/apps/details?id=com.boone.boone&amp;hl=en_GB\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M4.5 2.8 13.7 12l-9.2 9.2c-.3-.2-.5-.6-.5-1V3.8c0-.4.2-.8.5-1zM14.7 13l2.4 2.4-11 6.3zM14.7 11 6.1 2.3l11 6.3zM18.3 9.3l2.6 1.5c.8.5.8 1.8 0 2.3l-2.6 1.5L15.6 12z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Get it on</span><span style=\"font-size: 17px; font-weight: 700\">Google Play</span></span></a></div></div>\n          <form style=\"display: flex; flex-direction: column; gap: 10px; max-width: 420px\"><label for=\"footer-email\" style=\"font-size: 15px; color: #c9d3d8\">Nutrition tips and updates, once a month.</label><div style=\"display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px\"><input id=\"footer-email\" type=\"email\" placeholder=\"Your email\" style=\"flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #ffffff\"><button type=\"submit\" style=\"flex-shrink: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #58a754; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer\">Subscribe</button></div><span style=\"font-size: 13px; color: #9aa8b0\">See our <a href=\"/privacy-policy\" style=\"color: #c9d3d8; text-decoration: underline\">privacy policy</a> for details.</span></form>\n        </div>\n        <nav aria-label=\"Footer\" style=\"flex: 2.4 1 680px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px\"><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">The app</span><a class=\"foot-link\" href=\"/how-it-works\">How it works</a><a class=\"foot-link\" href=\"/app\">Features</a><a class=\"foot-link\" href=\"/science\">The science</a><a class=\"foot-link\" href=\"/dna-nutrition-test\">DNA test</a><a class=\"foot-link\" href=\"/activate\">Activate your test</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Food database</span><a class=\"foot-link\" href=\"/food-database\">Search the database</a><a class=\"foot-link\" href=\"/restaurant\">Restaurants</a><a class=\"foot-link\" href=\"/brand\">Brands</a><a class=\"foot-link\" href=\"/foods\">Everyday foods</a><a class=\"foot-link\" href=\"/kids-nutrition-age-adjusted-nutritional-info\">Kids nutrition</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Company</span><a class=\"foot-link\" href=\"/about\">About</a><a class=\"foot-link\" href=\"/press\">Press and recognition</a><a class=\"foot-link\" href=\"/sport\">For clubs and gyms</a><a class=\"foot-link\" href=\"/methodology\">Methodology</a><a class=\"foot-link\" href=\"/articles\">Articles</a><a class=\"foot-link\" href=\"/contact\">Contact</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Legal</span><a class=\"foot-link\" href=\"/terms-conditions\">Terms and conditions</a><a class=\"foot-link\" href=\"/privacy-policy\">Privacy policy</a><a class=\"foot-link\" href=\"/cookie-policy\">Cookie policy</a><a class=\"foot-link\" href=\"/app-usage-policy\">App usage policy</a><a class=\"foot-link\" href=\"/returns\">Returns</a><a class=\"foot-link\" href=\"/delivery\">Delivery</a></div></nav>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12)\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: #9aa8b0\"><span style=\"color: #c9d3d8\">© 2026 Boone App Ltd. All rights reserved.</span><span>Registered in England and Wales, company no. <a href=\"https://find-and-update.company-information.service.gov.uk/company/15774886\" style=\"color: #c9d3d8; text-decoration: underline\">15774886</a>. Registered office: Centrum, Colney Lane, Colney, Norwich NR4 7UG.</span></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 10px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Follow Boone</span><div style=\"display: flex; gap: 10px\"><a href=\"https://www.linkedin.com/company/boone-app\" aria-label=\"Boone on LinkedIn\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M4 9h3.2v11H4zM5.6 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM9.5 9h3.1v1.5c.5-.9 1.7-1.8 3.4-1.8 3.4 0 4 2.2 4 5.1V20h-3.2v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V20H9.5z\" fill=\"#ffffff\"></path></svg></a><a href=\"https://www.instagram.com/boonenutrition/\" aria-label=\"Boone on Instagram\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></rect><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></circle><circle cx=\"17.2\" cy=\"6.8\" r=\"1.2\" fill=\"#ffffff\"></circle></svg></a><a href=\"https://www.tiktok.com/@booneapp\" aria-label=\"Boone on TikTok\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3c.3 2.2 1.7 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.9-1.1v6.1a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.3a2.4 2.4 0 1 0 1.5 2.2V3z\" fill=\"#ffffff\"></path></svg></a></div></div>\n      </div>\n    </div>\n  </footer>\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n\n    const AREAS = [{\"key\": \"carbs\", \"name\": \"Carbs and energy\", \"short\": \"Carbs\", \"slug\": \"carbs-and-energy\", \"c\": \"#e07b39\", \"tint\": \"#fce9dc\", \"deep\": \"#9a4a12\", \"intro\": \"How your blood sugar may respond to carbohydrates, and how quickly your body releases insulin to bring it back down.\", \"why\": \"Two people can eat the same bowl of white pasta and see very different blood sugar curves. Your genes are one reason why. Knowing your tendency tells you whether swapping to wholegrains, or pairing carbs with protein and fibre, is likely to make a real difference for you.\", \"page\": \"page 8\", \"results\": [{\"name\": \"Glucose response\", \"what\": \"How much your blood sugar may rise after refined carbs, and how quickly it settles.\", \"score\": 4, \"label\": \"Focus\"}], \"genes\": [\"ADCY5\", \"ADIPOQ\", \"G6PC2\", \"GCK\", \"GCKR\", \"IRS1\", \"PPARG\", \"TCF7L2\"]}, {\"key\": \"fats\", \"name\": \"Fats\", \"short\": \"Fats\", \"slug\": \"fats\", \"c\": \"#3f86c0\", \"tint\": \"#e2edf6\", \"deep\": \"#1b4a63\", \"intro\": \"How you convert plant omega-3, clear fats from your blood after meals, and respond to saturated and unsaturated fat.\", \"why\": \"Fat advice is usually one size fits all. Your genes shape how much ready-made omega-3 you need, and whether swapping fats is likely to move your numbers.\", \"page\": \"page 7\", \"results\": [{\"name\": \"Omega-3\", \"what\": \"How well you turn plant omega-3 (ALA) into EPA and DHA.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Lipid handling\", \"what\": \"How quickly you clear fats and cholesterol from your blood after meals.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Saturated fat\", \"what\": \"Whether your genes change how you respond to saturated fat.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Unsaturated fat\", \"what\": \"How you respond to olive oil, nuts, seeds and oily fish.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"APOA2\", \"APOA5\", \"APOB\", \"ELOVL2\", \"FADS1\", \"FTO\", \"GCKR\", \"LDLR\", \"LPA\", \"LPL\", \"PNPLA3\", \"PPARG\", \"TRIB1\"]}, {\"key\": \"protein\", \"name\": \"Protein\", \"short\": \"Protein\", \"slug\": \"protein\", \"c\": \"#a463a0\", \"tint\": \"#f3e6f2\", \"deep\": \"#6b3368\", \"intro\": \"How strongly protein keeps you full, and whether the total amount you eat matters more for you than for most people.\", \"why\": \"For some people protein is the single most useful lever on appetite. If that is you, building meals around it makes the rest of your diet easier.\", \"page\": \"page 5\", \"results\": [{\"name\": \"Protein and fullness\", \"what\": \"How strongly protein keeps you full after a meal.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Protein amount\", \"what\": \"Whether your total daily protein matters more for you than average.\", \"score\": 5, \"label\": \"Focus\"}], \"genes\": [\"FGF21\", \"FTO\", \"TFAP2B\"]}, {\"key\": \"vit\", \"name\": \"Vitamins and minerals\", \"short\": \"Vitamins\", \"slug\": \"vitamins-and-minerals\", \"c\": \"#58a754\", \"tint\": \"#e3f1dd\", \"deep\": \"#2f5e1b\", \"intro\": \"How you absorb, activate and carry eleven vitamins and minerals, from B12 and folate to calcium, iron and vitamin D.\", \"why\": \"Your genes can make some nutrients harder to get from the same food. That matters most when your diet already has fewer sources, such as B12 on a plant-based diet.\", \"page\": \"page 6\", \"results\": [{\"name\": \"Choline\", \"what\": \"How much choline you make yourself, so how much you need from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin C\", \"what\": \"How efficiently you absorb vitamin C from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin B12\", \"what\": \"How well you absorb and carry B12.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"B2, B6 and B9\", \"what\": \"How efficiently you turn folate into its active form.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Calcium\", \"what\": \"How vitamin D helps you absorb calcium.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Vitamin D\", \"what\": \"How you make, carry and activate vitamin D.\", \"score\": 2, \"label\": \"Worth knowing\"}, {\"name\": \"Vitamin A\", \"what\": \"How you convert beta-carotene from plants into vitamin A.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Iron\", \"what\": \"How you absorb and store iron.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Sodium\", \"what\": \"Whether your genes change how you handle salt.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin E\", \"what\": \"How you use and store vitamin E.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin K\", \"what\": \"How you break down vitamin K.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"ADD1\", \"BCO1\", \"BHMT\", \"CHDH\", \"CUBN\", \"CYP1A1\", \"CYP2R1\", \"CYP4F2\", \"FUT2\", \"GC\", \"HFE\", \"MTHFR\", \"PEMT\", \"RBP4\", \"SCARB1\", \"SLC23A1\", \"TCN2\", \"TF\", \"TMPRSS6\", \"TTR\", \"VDR\"]}, {\"key\": \"beh\", \"name\": \"Behaviour and sensitivities\", \"short\": \"Behaviour\", \"slug\": \"behaviour-and-sensitivities\", \"c\": \"#e2a024\", \"tint\": \"#fbeed9\", \"deep\": \"#8a4a0b\", \"intro\": \"Appetite and snacking, caffeine, alcohol, lactose and bitter taste: the traits that shape what you reach for.\", \"why\": \"These results explain everyday experiences, like why a late coffee does or doesn’t keep you up, or why snacks are harder to ignore. They are often the most recognisable part of the report.\", \"page\": \"page 11\", \"results\": [{\"name\": \"Snacking and appetite\", \"what\": \"How strongly you feel hunger and the pull of snacks.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Caffeine\", \"what\": \"Whether you clear caffeine faster or slower than average.\", \"score\": 1, \"label\": \"Worth knowing\"}, {\"name\": \"Alcohol\", \"what\": \"How quickly you break down acetaldehyde, the by-product of alcohol.\", \"score\": 0, \"label\": \"Worth knowing\"}, {\"name\": \"Bitter taste\", \"what\": \"How bitter greens like broccoli and kale taste to you.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Lactose\", \"what\": \"Whether you are likely to digest lactose as an adult.\", \"score\": 0, \"label\": \"No change\"}], \"genes\": [\"ALDH2\", \"BDNF\", \"CYP1A1\", \"CYP1A2\", \"MC4R\", \"MCM6\", \"TAS2R38\"]}];\n    const GENES = {\"ADCY5\": \"Helps signal insulin release from the pancreas. Linked to small differences in fasting blood sugar.\", \"ADD1\": \"Involved in how the kidneys handle salt. Linked to blood pressure in population studies.\", \"ADIPOQ\": \"Makes adiponectin, a hormone from fat tissue that helps your body respond to insulin.\", \"ALDH2\": \"Breaks down acetaldehyde, the by-product of alcohol that causes flushing.\", \"APOA2\": \"Linked in some studies to how the body responds to saturated fat.\", \"APOA5\": \"Helps clear triglycerides, the main blood fats, after a meal.\", \"APOB\": \"Builds the particles that carry cholesterol and fats in your blood.\", \"BCO1\": \"Converts beta-carotene from plants into vitamin A.\", \"BDNF\": \"Involved in brain signals for hunger and fullness.\", \"BHMT\": \"Uses betaine, made from choline, in an important recycling step in the liver.\", \"CHDH\": \"Turns choline into betaine.\", \"CUBN\": \"Absorbs vitamin B12 from your gut.\", \"CYP1A1\": \"A liver enzyme that helps break down caffeine and other compounds.\", \"CYP1A2\": \"The main enzyme that clears caffeine. Variants make people faster or slower clearers.\", \"CYP2R1\": \"Activates vitamin D in the liver. Variants are linked to lower blood vitamin D.\", \"CYP4F2\": \"Breaks down vitamins E and K. Also used to guide doses of the blood thinner warfarin.\", \"ELOVL2\": \"Lengthens omega-3 fats on the way to making DHA.\", \"FADS1\": \"A key step in turning plant omega-3 (ALA) into EPA and DHA.\", \"FGF21\": \"A hormone linked to food choice, including how much protein and sugar people prefer.\", \"FTO\": \"The best-studied appetite gene. Linked to energy balance and how people respond to diet.\", \"FUT2\": \"Shapes your gut environment. Linked to B12 levels in the blood.\", \"G6PC2\": \"Helps set your fasting blood sugar level.\", \"GC\": \"Makes the protein that carries vitamin D in your blood.\", \"GCK\": \"Your body’s glucose sensor. Sets when insulin is released.\", \"GCKR\": \"Controls how the liver handles glucose, and affects blood fat levels.\", \"HFE\": \"Controls how much iron your gut absorbs.\", \"IRS1\": \"Passes insulin’s signal into your cells.\", \"LDLR\": \"Clears LDL cholesterol from your blood.\", \"LPA\": \"Sets your level of lipoprotein(a), a blood fat particle largely decided by genes.\", \"LPL\": \"Breaks down blood fats so your body can use or store them.\", \"MC4R\": \"A key appetite gene in the brain. Common variants have a small effect on hunger.\", \"MCM6\": \"Controls whether the lactase enzyme stays switched on in adulthood.\", \"MTHFR\": \"Turns folate into its active form, with help from vitamin B2.\", \"PEMT\": \"Lets your liver make some of its own choline.\", \"PNPLA3\": \"Involved in how the liver handles fat.\", \"PPARG\": \"Guides fat cell development and how tissues respond to insulin.\", \"RBP4\": \"Carries vitamin A in your blood.\", \"SCARB1\": \"Takes up fat-soluble nutrients, including vitamin E, into cells.\", \"SLC23A1\": \"Absorbs vitamin C from your gut.\", \"TAS2R38\": \"A bitter taste receptor that decides how bitter some vegetables taste to you.\", \"TCF7L2\": \"The strongest common gene linked to blood sugar control and insulin release.\", \"TCN2\": \"Carries vitamin B12 in your blood to your cells.\", \"TF\": \"Makes transferrin, the protein that carries iron in your blood.\", \"TFAP2B\": \"Linked to where the body stores fat and how people respond to different diets.\", \"TMPRSS6\": \"Helps set hepcidin, the hormone that controls iron absorption.\", \"TRIB1\": \"Linked to blood fat levels.\", \"TTR\": \"Helps carry vitamin A in your blood. Boone looks only at that role.\", \"VDR\": \"The vitamin D receptor, which helps you absorb calcium.\"};\n    const GA = {\"ADCY5\": [\"carbs\"], \"ADD1\": [\"vit\"], \"ADIPOQ\": [\"carbs\"], \"ALDH2\": [\"beh\"], \"APOA2\": [\"fats\"], \"APOA5\": [\"fats\"], \"APOB\": [\"fats\"], \"BCO1\": [\"vit\"], \"BDNF\": [\"beh\"], \"BHMT\": [\"vit\"], \"CHDH\": [\"vit\"], \"CUBN\": [\"vit\"], \"CYP1A1\": [\"beh\", \"vit\"], \"CYP1A2\": [\"beh\"], \"CYP2R1\": [\"vit\"], \"CYP4F2\": [\"vit\"], \"ELOVL2\": [\"fats\"], \"FADS1\": [\"fats\"], \"FGF21\": [\"protein\"], \"FTO\": [\"protein\", \"fats\"], \"FUT2\": [\"vit\"], \"G6PC2\": [\"carbs\"], \"GC\": [\"vit\"], \"GCK\": [\"carbs\"], \"GCKR\": [\"carbs\", \"fats\"], \"HFE\": [\"vit\"], \"IRS1\": [\"carbs\"], \"LDLR\": [\"fats\"], \"LPA\": [\"fats\"], \"LPL\": [\"fats\"], \"MC4R\": [\"beh\"], \"MCM6\": [\"beh\"], \"MTHFR\": [\"vit\"], \"PEMT\": [\"vit\"], \"PNPLA3\": [\"fats\"], \"PPARG\": [\"carbs\", \"fats\"], \"RBP4\": [\"vit\"], \"SCARB1\": [\"vit\"], \"SLC23A1\": [\"vit\"], \"TAS2R38\": [\"beh\"], \"TCF7L2\": [\"carbs\"], \"TCN2\": [\"vit\"], \"TF\": [\"vit\"], \"TFAP2B\": [\"protein\"], \"TMPRSS6\": [\"vit\"], \"TRIB1\": [\"fats\"], \"TTR\": [\"vit\"], \"VDR\": [\"vit\"]};\n    const GR = {\"ADCY5\": \"Glucose\", \"ADD1\": \"Sodium\", \"ADIPOQ\": \"Glucose\", \"ALDH2\": \"Alcohol\", \"APOA2\": \"Saturated fat\", \"APOA5\": \"Saturated fat\", \"APOB\": \"Lipid handling\", \"BCO1\": \"Vitamin A\", \"BDNF\": \"Snacking\", \"BHMT\": \"Choline\", \"CHDH\": \"Choline\", \"CUBN\": \"B12\", \"CYP1A1\": \"Caffeine, sodium\", \"CYP1A2\": \"Caffeine\", \"CYP2R1\": \"Vitamin D, calcium\", \"CYP4F2\": \"Vitamins E and K\", \"ELOVL2\": \"Omega-3\", \"FADS1\": \"Omega-3\", \"FGF21\": \"Protein and fullness\", \"FTO\": \"Protein amount, saturated fat\", \"FUT2\": \"B12\", \"G6PC2\": \"Glucose\", \"GC\": \"Vitamin D\", \"GCK\": \"Glucose\", \"GCKR\": \"Glucose, lipid handling\", \"HFE\": \"Iron\", \"IRS1\": \"Glucose\", \"LDLR\": \"Lipid handling\", \"LPA\": \"Lipid handling\", \"LPL\": \"Unsaturated fat\", \"MC4R\": \"Snacking\", \"MCM6\": \"Lactose\", \"MTHFR\": \"Folate, B12\", \"PEMT\": \"Choline\", \"PNPLA3\": \"Lipid handling\", \"PPARG\": \"Glucose, saturated fat\", \"RBP4\": \"Vitamin A\", \"SCARB1\": \"Vitamin E\", \"SLC23A1\": \"Vitamin C\", \"TAS2R38\": \"Bitter taste\", \"TCF7L2\": \"Glucose\", \"TCN2\": \"B12\", \"TF\": \"Iron\", \"TFAP2B\": \"Protein amount\", \"TMPRSS6\": \"Iron\", \"TRIB1\": \"Lipid handling\", \"TTR\": \"Vitamin A\", \"VDR\": \"Calcium\"};\n    const st = this.state || {};\n    const sel = st.area || 'all';\n    const C = {}; AREAS.forEach((a) => { C[a.key] = a; });\n    const names = Object.keys(GENES).sort();\n    const list = names.filter((g) => sel === 'all' || GA[g].indexOf(sel) >= 0);\n    const fstyle = (on) => on ? 'background: #1b2b36; color: #ffffff; border-color: #1b2b36' : 'background: #ffffff; color: #1b2b36; border-color: #dfe5db';\n    const filters = [{ key: 'all', label: 'All 48', c: '#58a754' }].concat(AREAS.map((a) => ({ key: a.key, label: a.short + ' · ' + a.genes.length, c: a.c }))).map((f) => ({\n      label: f.label, c: f.c, pressed: f.key === sel ? 'true' : 'false', style: fstyle(f.key === sel), pick: () => this.setState({ area: f.key })\n    }));\n    return {\n      filters: filters, shown: sel === 'all' ? '48' : String(list.length) + ' ' + C[sel].short.toLowerCase(),\n      genes: list.map((g) => { const a = C[sel === 'all' ? GA[g][0] : sel]; return { name: g, text: GENES[g], result: GR[g], tint: a.tint, deep: a.deep }; }),\n      method: [\n        { n: '1', t: 'Read your raw data', s: 'Your saliva sample is turned into raw genetic data in the lab. Boone receives it and reads the 48 nutrition genes.' },\n        { n: '2', t: 'Combine genes into results', s: 'Each result draws on one or more genes. Their effects are combined into a single score from 0 to 5 for genetic influence.' },\n        { n: '3', t: 'Rate the science', s: 'Every result carries an evidence rating: strong, moderate or emerging, based on how large and consistent the research is.' },\n        { n: '4', t: 'Write advice for your diet', s: 'Results with strong influence get specific actions, written for a vegetarian, vegan, pescatarian or meat-eating diet.' }\n      ]\n    };\n  }\n}"}, "DNADiet": {"tpl": "<div style=\"width: 100%; background: #f5f5f3; padding: 16px 24px 0; box-sizing: border-box; overflow: hidden\">\n  <div style=\"max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px\">\n    <!-- Floating rounded announcement banner -->\n    <div style=\"display: flex; justify-content: center\">\n      <a href=\"#\" style=\"display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #141a12; color: #ffffff; box-shadow: 0 8px 24px rgba(20,26,18,0.12); max-width: 100%; box-sizing: border-box\">\n        <span style=\"display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0\">New</span>\n        <span class=\"banner-text-long\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">Every McDonald's item ranked by sugar, salt and calories for your age</span>\n        <span class=\"banner-text-short\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap\">McDonald's, ranked for your age</span>\n        <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n        </span>\n      </a>\n    </div>\n\n    <!-- Navigation: floating white pill -->\n    <div style=\"display: flex; justify-content: center\">\n      <nav aria-label=\"Main\" style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 8px 8px 8px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 12px 32px rgba(20,26,18,0.10), 0 2px 6px rgba(20,26,18,0.05)\">\n        <a href=\"#\" style=\"display: flex; align-items: center; gap: 10px; flex-shrink: 0\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #58a754\">\n            <svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f1a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21c-4.4 0-8-3.1-8-7.5C4 8 9 4 12 3c3 1 8 5 8 10.5 0 4.4-3.6 7.5-8 7.5Z\"></path><path d=\"M12 21V11\"></path></svg>\n          </span>\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em\">Boone</span>\n        </a>\n\n        <div class=\"nav-links\" style=\"display: flex; align-items: center; gap: 2px; min-width: 0\">\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Food database\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">The app\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Clubs and gyms</a>\n          <div class=\"nav-dd\" style=\"position: relative\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" aria-current=\"page\" aria-haspopup=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #f3f8ef; color: #2f5e1b\">DNA <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg></a><div class=\"nav-dd-panel\" style=\"position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; z-index: 60\"><div style=\"width: 330px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 24px 48px rgba(20,26,18,0.14)\"><a class=\"nav-dd-item\" href=\"/dna-nutrition-test\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Overview</span><span style=\"font-size: 13px; color: #5d676d\">What the test is and how it works</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">What it tests</span><span style=\"font-size: 13px; color: #5d676d\">23 results across five areas of your diet</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/sample-report\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Sample reports</span><span style=\"font-size: 13px; color: #5d676d\">Read or download a real report</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#by-diet\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">By diet</span><span style=\"font-size: 13px; color: #5d676d\">Vegetarian, vegan, pescatarian, meat eater</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Genes and method</span><span style=\"font-size: 13px; color: #5d676d\">All 48 genes and how we score them</span></a><a href=\"/dna-nutrition-test#order\" style=\"margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Order your DNA test<span>£198</span></a></div></div></div>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Pricing</a>\n        </div>\n\n        <div style=\"display: flex; align-items: center; gap: 6px; flex-shrink: 0\">\n          <a class=\"nav-signin nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500\">Sign in</a>\n          <a class=\"nav-cta\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Get the app</a>\n          <button class=\"nav-menu\" type=\"button\" aria-label=\"Open menu\" style=\"display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #f3f8ef; color: #1b2b36; cursor: pointer\">\n            <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 17h16\"></path></svg>\n          </button>\n        </div>\n      </nav>\n    </div>\n\n    <nav aria-label=\"DNA test\" style=\"display: flex; justify-content: center\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 6px 6px 6px 18px; border-radius: 22px; background: #e3f1dd\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>DNA test</span>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 2px\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Overview</a><a class=\"nav-link\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">What it tests</a><a class=\"nav-link\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Sample reports</a><a class=\"\" href=\"/dna-nutrition-test#by-diet\" aria-current=\"page\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: #1b2b36; color: #ffffff\">By diet</a><a class=\"nav-link\" href=\"/dna-nutrition-test/genes\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Genes and method</a></div>\n        <a class=\"nav-cta\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap\">Order · £198</a>\n      </div>\n    </nav>\n\n\n    <section style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 56px 24px 72px\">\n      <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px\">\n        <nav aria-label=\"Breadcrumb\" style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px\"><a href=\"/\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">Home</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><a href=\"/dna-nutrition-test\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">DNA test</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><span aria-current=\"page\" style=\"color: #1b2b36; font-weight: 600\">{{crumb}}</span></nav>\n        <h1 class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.045em\">{{h1a}} <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">{{h1b}}</span></h1>\n        <p style=\"margin: 0; font-size: 21px; line-height: 1.55; color: #4d5a62; max-width: 620px\">{{lead}}</p>\n        <div style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 18px\">\n          <a class=\"btn-primary\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 17px; font-weight: 700\">Order your DNA test <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n          <div style=\"display: flex; flex-direction: column; line-height: 1.15\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.03em\">£198</span><span style=\"font-size: 14px; color: #5d676d\">one-off · free UK delivery</span></div>\n        </div>\n        <a href=\"{{pdfHref}}\" style=\"align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #2f5e1b; text-decoration: underline; text-underline-offset: 4px\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4v11\"></path><path d=\"m7 10 5 5 5-5\"></path><path d=\"M5 20h14\"></path></svg> Download the {{dietLower}} sample report</a>\n      </div>\n      <div style=\"flex: 1 1 480px; min-width: 0; position: relative; height: 600px\">\n        <div style=\"position: absolute; right: 10px; top: 40px; transform: rotate(5deg)\"><div style=\"flex-shrink: 0; width: 333px; height: 472px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.42); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptProfile\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></div>\n        <div style=\"position: absolute; left: 10px; top: 0; transform: rotate(-3deg)\"><div style=\"flex-shrink: 0; width: 381px; height: 539px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 30px 60px rgba(15,26,11,0.28); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.48); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></div>\n        <span class=\"hero-chip\" style=\"position: absolute; right: 0; bottom: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 15px; font-weight: 600; box-shadow: 0 14px 30px rgba(27,43,54,0.22); transform: rotate(2deg)\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: #58a754\"></span>Food advice for a {{dietLower}} diet</span>\n      </div>\n    </section>\n\n  </div>\n\n  <section class=\"reveal\" aria-labelledby=\"watch-heading\" style=\"margin: 0 -24px; background: #ffffff; padding: 112px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px\">\n      <div style=\"display: flex; flex-direction: column; gap: 14px; max-width: 820px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">Where your genes matter most</span>\n        <h2 id=\"watch-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">What to watch on a <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">{{dietLower}} diet</span></h2>\n        <p style=\"margin: 0; font-size: 19px; line-height: 1.55; color: #4d5a62\">These are the areas where diet and genes most often meet. Your report scores each one, so you know which apply to you.</p>\n      </div>\n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px\">\n        <sc-for list=\"{{watch}}\" as=\"w\" hint-placeholder-count=\"4\">\n          <div style=\"display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px; background: {{w.tint}}\">\n            <span style=\"width: 44px; height: 8px; border-radius: 4px; background: {{w.c}}\"></span>\n            <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">{{w.t}}</h3>\n            <p style=\"margin: 0; font-size: 16px; line-height: 1.55; color: #3d4a52\">{{w.s}}</p>\n            <a href=\"{{w.href}}\" style=\"margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: {{w.deep}}\">{{w.area}} <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n          </div>\n        </sc-for>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"advice-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 112px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 56px\">\n    <div style=\"flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px\">\n      <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #fbeed9; color: #9a4f09; font-size: 14px; font-weight: 600\">Advice you can use</span>\n      <h2 id=\"advice-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Written for <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">{{dietLower}} food</span></h2>\n      <p style=\"margin: 0; font-size: 19px; line-height: 1.55; color: #4d5a62\">No advice to eat things you don’t eat. These are real actions from the {{dietLower}} sample report.</p>\n      <sc-for list=\"{{advice}}\" as=\"x\" hint-placeholder-count=\"3\">\n        <div style=\"display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 20px; background: #ffffff; border: 1px solid #e3e8df\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-weight: 800\">{{x.n}}</span>\n          <div style=\"display: flex; flex-direction: column; gap: 3px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2f5e1b\">{{x.area}}</span><span style=\"font-size: 18px; font-weight: 700\">{{x.t}}</span><span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{x.s}}</span></div>\n        </div>\n      </sc-for>\n    </div>\n    <div style=\"flex: 1 1 520px; min-width: 0; display: flex; justify-content: center; gap: 20px\">\n      <div style=\"flex-shrink: 0; width: 270px; height: 382px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 24px 50px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.34); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptB12\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div>\n      <div style=\"margin-top: 60px\"><div style=\"flex-shrink: 0; width: 270px; height: 382px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 24px 50px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.34); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptCholine\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"same-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 0 0 112px\">\n    <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 56px; border-radius: 36px; background: #17251d; color: #ffffff\">\n      <div style=\"flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px\">\n        <h2 id=\"same-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; font-size: 40px; color: #ffffff\">Eat differently from your household?</h2>\n        <p style=\"margin: 0; font-size: 18px; line-height: 1.55; color: #b8c6bc\">Every report covers the same 48 genes and 23 results. Only the food advice changes, so you can compare the versions side by side.</p>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n        <sc-for list=\"{{otherDiets}}\" as=\"o\" hint-placeholder-count=\"3\"><a href=\"{{o.href}}\" style=\"display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.3); color: #ffffff; font-size: 15px; font-weight: 700\">{{o.label}}</a></sc-for>\n        <a href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 15px; font-weight: 700\">Compare all four <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n      </div>\n    </div>\n  </section>\n\n  <section aria-labelledby=\"cta-heading\" style=\"max-width: 1280px; margin: 0 auto 96px; box-sizing: border-box; background: #58a754; border-radius: 40px; padding: 80px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden\">\n    <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n      <h2 id=\"cta-heading\" class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #ffffff\">Stop eating by guesswork.<br>Start eating with your biology.</h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #13250d; max-width: 560px\">A personalised nutrition blueprint that connects your genetics with the meals you actually eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 10px\">\n      <a class=\"store-btn\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test · £198</a>\n      <span style=\"font-size: 14px; font-weight: 600; color: #13250d\">Free UK delivery · Secure checkout</span>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer style=\"margin: 0 -24px; background: #1b2b36; color: #c9d3d8; padding: 88px 24px 40px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px\">\n      <div style=\"display: flex; flex-wrap: wrap; gap: 56px\">\n        <div style=\"flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px\">\n          <a href=\"#\" style=\"display: flex; align-items: center\"><img src=\"/_blob/5930dc2c89021dbab3e64b01c6af9d7b\" alt=\"Boone Logo: Personalised Nutrition\" style=\"height: 44px; width: auto; display: block\"></a>\n          <p style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; max-width: 380px\">Personalised nutrition, aligned with your biology.</p>\n          <div style=\"display: flex; flex-direction: column; gap: 12px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Get the app</span><div style=\"display: flex; flex-wrap: wrap; gap: 10px\"><a href=\"https://apps.apple.com/gb/app/boone/id6739210113\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-1-2.4-4zM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Download on the</span><span style=\"font-size: 17px; font-weight: 700\">App Store</span></span></a><a href=\"https://play.google.com/store/apps/details?id=com.boone.boone&amp;hl=en_GB\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M4.5 2.8 13.7 12l-9.2 9.2c-.3-.2-.5-.6-.5-1V3.8c0-.4.2-.8.5-1zM14.7 13l2.4 2.4-11 6.3zM14.7 11 6.1 2.3l11 6.3zM18.3 9.3l2.6 1.5c.8.5.8 1.8 0 2.3l-2.6 1.5L15.6 12z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Get it on</span><span style=\"font-size: 17px; font-weight: 700\">Google Play</span></span></a></div></div>\n          <form style=\"display: flex; flex-direction: column; gap: 10px; max-width: 420px\"><label for=\"footer-email\" style=\"font-size: 15px; color: #c9d3d8\">Nutrition tips and updates, once a month.</label><div style=\"display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px\"><input id=\"footer-email\" type=\"email\" placeholder=\"Your email\" style=\"flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #ffffff\"><button type=\"submit\" style=\"flex-shrink: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #58a754; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer\">Subscribe</button></div><span style=\"font-size: 13px; color: #9aa8b0\">See our <a href=\"/privacy-policy\" style=\"color: #c9d3d8; text-decoration: underline\">privacy policy</a> for details.</span></form>\n        </div>\n        <nav aria-label=\"Footer\" style=\"flex: 2.4 1 680px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px\"><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">The app</span><a class=\"foot-link\" href=\"/how-it-works\">How it works</a><a class=\"foot-link\" href=\"/app\">Features</a><a class=\"foot-link\" href=\"/science\">The science</a><a class=\"foot-link\" href=\"/dna-nutrition-test\">DNA test</a><a class=\"foot-link\" href=\"/activate\">Activate your test</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Food database</span><a class=\"foot-link\" href=\"/food-database\">Search the database</a><a class=\"foot-link\" href=\"/restaurant\">Restaurants</a><a class=\"foot-link\" href=\"/brand\">Brands</a><a class=\"foot-link\" href=\"/foods\">Everyday foods</a><a class=\"foot-link\" href=\"/kids-nutrition-age-adjusted-nutritional-info\">Kids nutrition</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Company</span><a class=\"foot-link\" href=\"/about\">About</a><a class=\"foot-link\" href=\"/press\">Press and recognition</a><a class=\"foot-link\" href=\"/sport\">For clubs and gyms</a><a class=\"foot-link\" href=\"/methodology\">Methodology</a><a class=\"foot-link\" href=\"/articles\">Articles</a><a class=\"foot-link\" href=\"/contact\">Contact</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Legal</span><a class=\"foot-link\" href=\"/terms-conditions\">Terms and conditions</a><a class=\"foot-link\" href=\"/privacy-policy\">Privacy policy</a><a class=\"foot-link\" href=\"/cookie-policy\">Cookie policy</a><a class=\"foot-link\" href=\"/app-usage-policy\">App usage policy</a><a class=\"foot-link\" href=\"/returns\">Returns</a><a class=\"foot-link\" href=\"/delivery\">Delivery</a></div></nav>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12)\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: #9aa8b0\"><span style=\"color: #c9d3d8\">© 2026 Boone App Ltd. All rights reserved.</span><span>Registered in England and Wales, company no. <a href=\"https://find-and-update.company-information.service.gov.uk/company/15774886\" style=\"color: #c9d3d8; text-decoration: underline\">15774886</a>. Registered office: Centrum, Colney Lane, Colney, Norwich NR4 7UG.</span></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 10px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Follow Boone</span><div style=\"display: flex; gap: 10px\"><a href=\"https://www.linkedin.com/company/boone-app\" aria-label=\"Boone on LinkedIn\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M4 9h3.2v11H4zM5.6 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM9.5 9h3.1v1.5c.5-.9 1.7-1.8 3.4-1.8 3.4 0 4 2.2 4 5.1V20h-3.2v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V20H9.5z\" fill=\"#ffffff\"></path></svg></a><a href=\"https://www.instagram.com/boonenutrition/\" aria-label=\"Boone on Instagram\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></rect><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></circle><circle cx=\"17.2\" cy=\"6.8\" r=\"1.2\" fill=\"#ffffff\"></circle></svg></a><a href=\"https://www.tiktok.com/@booneapp\" aria-label=\"Boone on TikTok\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3c.3 2.2 1.7 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.9-1.1v6.1a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.3a2.4 2.4 0 1 0 1.5 2.2V3z\" fill=\"#ffffff\"></path></svg></a></div></div>\n      </div>\n    </div>\n  </footer>\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n\n    const DIETS = ['Vegetarian', 'Vegan', 'Pescatarian', 'Meat eater'];\n    const LOWER = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const SLUG = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eater' };\n    const PLURAL = { 'Vegetarian': 'vegetarians', 'Vegan': 'vegans', 'Pescatarian': 'pescatarians', 'Meat eater': 'meat eaters' };\n    const DP = {\"Vegetarian\": {\"h1a\": \"A DNA nutrition test\", \"h1b\": \"for vegetarians\", \"lead\": \"Cutting out meat and fish changes where a few key nutrients come from. Your genes decide how easily you absorb and use some of them. Boone shows which matter most for you, with food advice written for a vegetarian diet.\", \"watch\": [[\"Vitamin B12\", \"Dairy and eggs are your main sources. CUBN, FUT2 and TCN2 affect how well you absorb and carry it.\", \"vit\"], [\"Omega-3\", \"Without oily fish you rely on converting plant ALA. FADS1 and ELOVL2 affect how well you do that.\", \"fats\"], [\"Choline\", \"Eggs carry most of the load. PEMT affects how much you make yourself.\", \"vit\"], [\"Iron\", \"Plant iron is absorbed less easily. HFE, TF and TMPRSS6 shape how much you take in.\", \"vit\"]]}, \"Vegan\": {\"h1a\": \"A DNA nutrition test\", \"h1b\": \"for vegans\", \"lead\": \"A vegan diet leans hardest on a handful of nutrients, and your genes can make some of them easier or harder to get. Boone shows which matter most for you, with advice written for vegan food.\", \"watch\": [[\"Vitamin B12\", \"Plants provide none. CUBN, FUT2 and TCN2 affect how well you absorb what you take.\", \"vit\"], [\"Omega-3\", \"Your EPA and DHA come from converting ALA, unless you use algae oil. FADS1 and ELOVL2 set how well you convert.\", \"fats\"], [\"Choline\", \"Without eggs, soya and beans do the work. PEMT affects how much you make yourself.\", \"vit\"], [\"Calcium and vitamin D\", \"Fortified foods and calcium-set tofu matter. VDR and CYP2R1 affect absorption.\", \"vit\"]]}, \"Pescatarian\": {\"h1a\": \"A DNA nutrition test\", \"h1b\": \"for pescatarians\", \"lead\": \"Fish covers a lot of ground, but not everything. Your genes still decide how you handle carbs, iron, choline and more. Boone shows where to put your effort, with advice written for a pescatarian diet.\", \"watch\": [[\"Omega-3\", \"Oily fish gives you EPA and DHA ready-made. Your FADS1 result shows how much that matters for you.\", \"fats\"], [\"Iron\", \"Without red meat, shellfish and pulses do more of the work. HFE, TF and TMPRSS6 shape absorption.\", \"vit\"], [\"Vitamin B12\", \"Fish, eggs and dairy are rich sources. CUBN, FUT2 and TCN2 affect how well you absorb them.\", \"vit\"], [\"Choline\", \"Eggs and fish cover most of it. PEMT affects how much you make yourself.\", \"vit\"]]}, \"Meat eater\": {\"h1a\": \"A DNA nutrition test\", \"h1b\": \"for meat eaters\", \"lead\": \"Eating everything doesn’t mean your diet suits your genes. How you handle carbs, blood fats and saturated fat varies from person to person. Boone shows where you differ, with advice written for a diet that includes meat.\", \"watch\": [[\"Blood fats\", \"APOB, LDLR and LPA shape how you clear cholesterol and fats after meals.\", \"fats\"], [\"Saturated fat\", \"APOA2 and FTO are linked to how people respond to fatty and processed meat.\", \"fats\"], [\"Glucose response\", \"TCF7L2 and GCK affect how your blood sugar responds to refined carbs.\", \"carbs\"], [\"Folate\", \"Meat brings little folate. MTHFR affects how well you activate what you eat.\", \"vit\"]]}};\n    const ADVICE = {\"Vegetarian\": {\"b12\": [\"A B12 source every day\", \"Milk, yoghurt, an egg or fortified cereal each count.\"], \"cho\": [\"Eat eggs regularly\", \"By far the richest vegetarian choline source, and good protein.\"], \"cal\": [\"Calcium three times a day\", \"Dairy, calcium-set tofu or fortified plant milk at each meal.\"], \"changes\": [\"B12 from dairy, eggs and fortified foods\", \"Algae oil for ready-made omega-3, without fish\", \"Eggs, soya and beans for choline and folate\"]}, \"Vegan\": {\"b12\": [\"Take a daily B12 supplement\", \"The simplest, most reliable way to cover B12 on a vegan diet.\"], \"cho\": [\"Soya every day\", \"Tofu, tempeh, edamame or soya milk are the best vegan choline sources.\"], \"cal\": [\"Calcium three times a day\", \"Calcium-set tofu, fortified plant milk or fortified soya yoghurt at each meal.\"], \"changes\": [\"A daily B12 supplement or fortified foods\", \"Algae oil for omega-3 from a plant source\", \"Soya, beans and fortified foods for choline and calcium\"]}, \"Pescatarian\": {\"b12\": [\"Fish two or three times a week\", \"Salmon, sardines, mackerel, tuna and shellfish are rich in B12.\"], \"cho\": [\"Eggs and fish through the week\", \"Eggs are the richest source; salmon, cod and prawns add more.\"], \"cal\": [\"Calcium three times a day\", \"Dairy, calcium-set tofu or tinned sardines with their bones.\"], \"changes\": [\"Fish, eggs and dairy for B12\", \"Oily fish twice a week for omega-3\", \"Sardines with bones as a calcium source\"]}, \"Meat eater\": {\"b12\": [\"A B12 source most days\", \"Meat, fish, eggs or dairy each count.\"], \"cho\": [\"Eggs a few times a week\", \"The richest choline source of all.\"], \"cal\": [\"Calcium three times a day\", \"Milk, yoghurt or cheese at each meal is the easiest route.\"], \"changes\": [\"Meat, fish, eggs and dairy for B12\", \"Oily fish twice a week for omega-3\", \"Eggs, chicken and beef for choline\"]}};\n    const COL = {\"carbs\": [\"#e07b39\", \"#fce9dc\", \"#9a4a12\"], \"fats\": [\"#3f86c0\", \"#e2edf6\", \"#1b4a63\"], \"protein\": [\"#a463a0\", \"#f3e6f2\", \"#6b3368\"], \"vit\": [\"#58a754\", \"#e3f1dd\", \"#2f5e1b\"], \"beh\": [\"#e2a024\", \"#fbeed9\", \"#8a4a0b\"]};\n    const AREASLUG = {\"carbs\": [\"carbs-and-energy\", \"Carbs and energy\"], \"fats\": [\"fats\", \"Fats\"], \"protein\": [\"protein\", \"Protein\"], \"vit\": [\"vitamins-and-minerals\", \"Vitamins and minerals\"], \"beh\": [\"behaviour-and-sensitivities\", \"Behaviour and sensitivities\"]};\n    const diet = DP[this.props.diet] ? this.props.diet : 'Vegan';\n    const p = DP[diet];\n    const ad = ADVICE[diet];\n    return {\n      diet: diet, dietLower: LOWER[diet], h1a: p.h1a, h1b: p.h1b, lead: p.lead, crumb: 'For ' + PLURAL[diet],\n      pdfHref: '/downloads/boone-sample-dna-report-' + SLUG[diet] + '.pdf',\n      watch: p.watch.map((w) => ({ t: w[0], s: w[1], c: COL[w[2]][0], tint: COL[w[2]][1], deep: COL[w[2]][2], href: '/dna-nutrition-test/' + AREASLUG[w[2]][0], area: AREASLUG[w[2]][1] })),\n      advice: [\n        { n: 1, area: 'Vitamin B12', t: ad.b12[0], s: ad.b12[1] },\n        { n: 2, area: 'Choline', t: ad.cho[0], s: ad.cho[1] },\n        { n: 3, area: 'Calcium', t: ad.cal[0], s: ad.cal[1] }\n      ],\n      otherDiets: DIETS.filter((d) => d !== diet).map((d) => ({ label: 'For ' + PLURAL[d], href: '/dna-nutrition-test/' + SLUG[d] }))\n    };\n  }\n}"}, "RptProfile": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 60px 40px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 18px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -60px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">Your profile at a glance</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: #0f1a0b; color: #ffffff\">\n    <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Your profile · {{dietTitle}}</span>\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05\">Appetite-led, protein-responsive</h1>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.55; color: #e3e9ec; text-wrap: pretty\">{{lead}}</p>\n    <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px\">\n      <div style=\"display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.10)\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800\">11</span><span style=\"font-size: 13px; line-height: 1.3\"><strong>Focus</strong><br>strong genetic say</span></div>\n      <div style=\"display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(226,160,36,0.22)\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; color: #f5c56b\">3</span><span style=\"font-size: 13px; line-height: 1.3\"><strong>Worth knowing</strong><br>a useful fact each</span></div>\n      <div style=\"display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(88,167,84,0.22)\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; color: #9fd49a\">9</span><span style=\"font-size: 13px; line-height: 1.3\"><strong>No change</strong><br>habits lead here</span></div>\n    </div>\n  </section>\n\n  <h2 style=\"margin: 4px 0 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700\">Your five priorities</h2>\n\n  <div style=\"display: flex; flex-direction: column; gap: 10px\">\n    <div style=\"display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #f3e6f2\">\n      <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #a463a0\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3v18\"></path><path d=\"M4 3v5a3 3 0 0 0 6 0V3\"></path><path d=\"M17 21V3c-2.2 0-3.5 2.5-3.5 6s1.3 5 3.5 5\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 3px\">\n        <span style=\"font-size: 16px; font-weight: 700\">Build every meal around protein and fibre</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">Three linked results all score 5. Protein at each meal is likely to keep you fuller and make snacking easier to manage.</span>\n      </div>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #6b3368; text-align: right\">p5</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #58a754\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 3px\">\n        <span style=\"font-size: 16px; font-weight: 700\">{{p2t}}</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">{{p2b}}</span>\n      </div>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #2f5e1b; text-align: right\">p6</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #e2edf6\">\n      <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #3f86c0\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 3px\">\n        <span style=\"font-size: 16px; font-weight: 700\">{{p3t}}</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">{{p3b}}</span>\n      </div>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #1b4a63; text-align: right\">p7</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fce9dc\">\n      <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #e07b39\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L4 14h7l-1 8 9-12h-7z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 3px\">\n        <span style=\"font-size: 16px; font-weight: 700\">Don't eat carbs on their own</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">Your blood sugar may swing more after refined carbs. Pair them with protein, fat or fibre, and go wholegrain.</span>\n      </div>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #9a4a12; text-align: right\">p8</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #58a754\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3c3.5 0 6.5 5.5 6.5 10a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 3px\">\n        <span style=\"font-size: 16px; font-weight: 700\">{{p5t}}</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">{{p5b}}</span>\n      </div>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700; color: #2f5e1b; text-align: right\">p9 to 10</span>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">3</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const base = 'Your genes have the most say over how full you feel, how your blood sugar responds to refined carbs, and how well you use ';\n    const C = {\n      'Vegetarian': {\n        lead: base + 'a few nutrients that are harder to get on a vegetarian diet.',\n        p2t: 'Make B12 a daily habit', p2b: 'You may absorb B12 less well, and a vegetarian diet has fewer sources. Dairy, eggs or fortified foods every day.',\n        p3t: 'Get omega-3 in a ready-to-use form', p3b: 'You may convert plant omega-3 less efficiently. Algae oil gives you EPA and DHA directly, without fish.',\n        p5t: 'Lean on eggs, soya, beans and greens', p5b: 'Choline, folate, vitamin C and calcium all score 4 or 5. These foods cover them between them.'\n      },\n      'Vegan': {\n        lead: base + 'a few nutrients that are hardest to get on a vegan diet.',\n        p2t: 'Take B12 every day', p2b: 'You may absorb B12 less well, and plants don’t provide it. A daily supplement or fortified foods is essential.',\n        p3t: 'Get omega-3 in a ready-to-use form', p3b: 'You may convert plant omega-3 less efficiently. Algae oil gives you EPA and DHA directly, from a plant source.',\n        p5t: 'Lean on soya, beans, greens and fortified foods', p5b: 'Choline, folate, vitamin C and calcium all score 4 or 5. Without eggs or dairy, soya and fortified foods do the heavy lifting.'\n      },\n      'Pescatarian': {\n        lead: base + 'a few key nutrients, including omega-3 and B12.',\n        p2t: 'Keep B12 steady', p2b: 'You may absorb B12 less well. Fish, eggs and dairy cover it if you eat them most days.',\n        p3t: 'Eat oily fish twice a week', p3b: 'You may convert plant omega-3 less efficiently. Salmon, mackerel and sardines give you EPA and DHA ready-made.',\n        p5t: 'Lean on eggs, fish, beans and greens', p5b: 'Choline, folate, vitamin C and calcium all score 4 or 5. These foods cover them between them.'\n      },\n      'Meat eater': {\n        lead: base + 'a few key nutrients, including omega-3 and choline.',\n        p2t: 'Keep B12 steady', p2b: 'You may absorb B12 less well. Meat, fish, eggs and dairy cover it if you eat them most days.',\n        p3t: 'Eat oily fish twice a week', p3b: 'You may convert plant omega-3 less efficiently. Salmon, mackerel and sardines give you EPA and DHA ready-made.',\n        p5t: 'Lean on eggs, beans and greens', p5b: 'Choline, folate, vitamin C and calcium all score 4 or 5. Eggs and meat cover choline; beans and greens cover the rest.'\n      }\n    };\n    const c = C[d] || C['Vegetarian'];\n    return Object.assign({ dietTitle: d, dietLower: L[d] || 'vegetarian' }, c);\n  }\n}"}, "RptMain": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 52px 60px 48px; background: #58a754; font-family: 'Figtree', system-ui, sans-serif; color: #0f1a0b; display: flex; flex-direction: column; gap: 28px; overflow: hidden; position: relative\">\n\n  <div aria-hidden=\"true\" style=\"position: absolute; right: -140px; top: -120px; width: 420px; height: 420px; border-radius: 999px; background: #9fd49a; opacity: 0.45\"></div>\n  <div aria-hidden=\"true\" style=\"position: absolute; left: -90px; bottom: 210px; width: 220px; height: 220px; border-radius: 999px; background: #b5dcab; opacity: 0.35\"></div>\n\n  <div style=\"position: relative; display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 10px\">\n      <img src=\"/_blob/a1ec57baf0f2a6d5ba6325d91ddfc387\" alt=\"Boone\" style=\"height: 52px; width: auto; display: block; margin-left: -10px\">\n    </div>\n    <span style=\"padding: 7px 14px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase\">{{pill}}</span>\n  </div>\n\n  <div style=\"position: relative; display: flex; flex-direction: column; gap: 12px\">\n    <span style=\"font-family: 'Caveat', cursive; font-size: 28px; color: #ffffff; transform: rotate(-3deg); align-self: flex-start\">made for you, not the average</span>\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 58px; line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance\">{{coverTitle}}</h1>\n    <p style=\"margin: 0; max-width: 540px; font-size: 18px; line-height: 1.5; color: #17251d; text-wrap: pretty\">23 results from 48 genes, in plain English, with food advice matched to a {{dietLower}} diet.</p>\n  </div>\n\n  <figure style=\"position: relative; margin: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 26px; border-radius: 24px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.18)\">\n    <svg role=\"img\" aria-label=\"Radial chart of 23 results coloured by area; longer petals show more genetic influence\" width=\"360\" height=\"360\" viewBox=\"0 0 520 520\">\n      <circle cx=\"260\" cy=\"260\" r=\"240\" fill=\"none\" stroke=\"#eef1ec\" stroke-width=\"1.5\"></circle>\n      <circle cx=\"260\" cy=\"260\" r=\"180\" fill=\"none\" stroke=\"#eef1ec\" stroke-width=\"1.5\"></circle>\n      <circle cx=\"260\" cy=\"260\" r=\"120\" fill=\"none\" stroke=\"#eef1ec\" stroke-width=\"1.5\"></circle>\n      <line x1=\"268.7\" y1=\"182.5\" x2=\"283.5\" y2=\"51.3\" stroke=\"#e07b39\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"301.5\" y1=\"194.0\" x2=\"371.7\" y2=\"82.2\" stroke=\"#3f86c0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"315.2\" y1=\"204.8\" x2=\"408.5\" y2=\"111.5\" stroke=\"#3f86c0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"326.0\" y1=\"218.5\" x2=\"387.0\" y2=\"180.2\" stroke=\"#3f86c0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"333.6\" y1=\"234.2\" x2=\"373.3\" y2=\"220.4\" stroke=\"#3f86c0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"337.5\" y1=\"268.7\" x2=\"498.5\" y2=\"286.9\" stroke=\"#a463a0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"333.6\" y1=\"285.8\" x2=\"486.5\" y2=\"339.3\" stroke=\"#a463a0\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"315.2\" y1=\"315.2\" x2=\"429.7\" y2=\"429.7\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"301.5\" y1=\"326.0\" x2=\"387.7\" y2=\"463.2\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"285.8\" y1=\"333.6\" x2=\"329.4\" y2=\"458.2\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"268.7\" y1=\"337.5\" x2=\"283.5\" y2=\"468.7\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"251.3\" y1=\"337.5\" x2=\"236.5\" y2=\"468.7\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"234.2\" y1=\"333.6\" x2=\"210.5\" y2=\"401.6\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"218.5\" y1=\"326.0\" x2=\"180.2\" y2=\"387.0\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"204.8\" y1=\"315.2\" x2=\"175.1\" y2=\"344.9\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"194.0\" y1=\"301.5\" x2=\"158.4\" y2=\"323.8\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"186.4\" y1=\"285.8\" x2=\"146.7\" y2=\"299.6\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"182.5\" y1=\"268.7\" x2=\"140.8\" y2=\"273.4\" stroke=\"#58a754\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"186.4\" y1=\"234.2\" x2=\"33.5\" y2=\"180.7\" stroke=\"#e2a024\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"194.0\" y1=\"218.5\" x2=\"158.4\" y2=\"196.2\" stroke=\"#e2a024\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"204.8\" y1=\"204.8\" x2=\"175.1\" y2=\"175.1\" stroke=\"#e2a024\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"218.5\" y1=\"194.0\" x2=\"212.1\" y2=\"183.8\" stroke=\"#e2a024\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <line x1=\"234.2\" y1=\"186.4\" x2=\"230.3\" y2=\"175.1\" stroke=\"#e2a024\" stroke-width=\"15\" stroke-linecap=\"round\"></line>\n      <circle cx=\"260\" cy=\"260\" r=\"58\" fill=\"#0f1a0b\"></circle>\n      <text x=\"260\" y=\"256\" text-anchor=\"middle\" font-family=\"Bricolage Grotesque, sans-serif\" font-size=\"34\" font-weight=\"800\" fill=\"#ffffff\">23</text>\n      <text x=\"260\" y=\"282\" text-anchor=\"middle\" font-family=\"Figtree, sans-serif\" font-size=\"15\" font-weight=\"600\" fill=\"#9fd49a\">results</text>\n    </svg>\n    <div style=\"display: flex; flex-direction: column; gap: 10px\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 800; line-height: 1.15\">Your genetic fingerprint</span>\n      <span style=\"font-size: 12.5px; line-height: 1.45; color: #4d5a62\">Each petal is one result. Longer petals show where your genes have more say.</span>\n      <div style=\"display: flex; flex-direction: column; gap: 7px; margin-top: 4px\">\n        <span style=\"display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #9a4a12\"><span style=\"width: 12px; height: 12px; border-radius: 4px; background: #e07b39\"></span>Carbs · 1</span>\n        <span style=\"display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1b4a63\"><span style=\"width: 12px; height: 12px; border-radius: 4px; background: #3f86c0\"></span>Fats · 4</span>\n        <span style=\"display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #6b3368\"><span style=\"width: 12px; height: 12px; border-radius: 4px; background: #a463a0\"></span>Protein · 2</span>\n        <span style=\"display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #2f5e1b\"><span style=\"width: 12px; height: 12px; border-radius: 4px; background: #58a754\"></span>Vitamins and minerals · 11</span>\n        <span style=\"display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #8a4a0b\"><span style=\"width: 12px; height: 12px; border-radius: 4px; background: #e2a024\"></span>Behaviour · 5</span>\n      </div>\n      <span style=\"font-size: 11.5px; line-height: 1.4; color: #4d5a62; margin-top: 4px\">Colour shows the area, never good or bad.</span>\n    </div>\n  </figure>\n\n  <div style=\"position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px\">\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #17251d\">Your profile</span>\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Appetite-led, protein-responsive</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px\">\n      <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.28)\"><span style=\"font-size: 12px; font-weight: 600; color: #17251d\">{{nameLabel}}</span><span style=\"font-size: 15px; font-weight: 700\">{{nameValue}}</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.28)\"><span style=\"font-size: 12px; font-weight: 600; color: #17251d\">Food advice for</span><span style=\"font-size: 15px; font-weight: 700\">{{dietTitle}}</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.28)\"><span style=\"font-size: 12px; font-weight: 600; color: #17251d\">Report date</span><span style=\"font-size: 15px; font-weight: 700\">15 Oct 2026</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.28)\"><span style=\"font-size: 12px; font-weight: 600; color: #17251d\">Results</span><span style=\"font-size: 15px; font-weight: 700\">23 from 48 genes</span></div>\n    </div>\n    <p style=\"margin: 0; font-size: 12px; line-height: 1.5; color: #17251d\">For information and education. Not a medical or diagnostic test. myboone.app</p>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return { dietTitle: d, dietLower: L[d] || 'vegetarian' };\n  }\n}"}, "RptCholine": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">Priority 5 of 5 · Part 1</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #e3f1dd\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #58a754\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3c3.5 0 6.5 5.5 6.5 10a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #2f5e1b\">Vitamins and minerals</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Choline and B vitamins</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">{{lead}}</p>\n    <div style=\"display: flex; flex-direction: column; gap: 6px\">\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Choline</span><span style=\"font-size: 12px; color: #4d5a62\">You may make less of your own, so food matters more</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #2f5e1b; line-height: 1\">5/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Emerging</span></div>\n      </div>\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">B2, B6 and B9 (folate)</span><span style=\"font-size: 12px; color: #4d5a62\">May activate folate less efficiently</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #2f5e1b; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Moderate</span></div>\n      </div>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Choline and folate work in the same processes, so they lean on each other. PEMT, BHMT and CHDH affect how much choline you make and use. MTHFR, helped by vitamin B2, activates folate.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">{{why}}</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <sc-for list=\"{{actions}}\" as=\"a\" hint-placeholder-count=\"4\">\n        <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 13px; font-weight: 800\">{{a.n}}</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">{{a.t}}</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{a.s}}</span></div></div>\n      </sc-for>\n</div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{lean}}\" as=\"f\" hint-placeholder-count=\"7\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{easy}}\" as=\"f\" hint-placeholder-count=\"2\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n      <span style=\"font-size: 12px; line-height: 1.45; color: #5a3b0c\">From December 2026, UK white flour has folic acid added by law, so white bread adds a little folate too.</span>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">PEMT · BHMT · CHDH · MTHFR</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #58a754\"></span>Vitamin B12 · p6</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f3e6f2; color: #6b3368; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #a463a0\"></span>Protein · p5</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">9</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const greens = { n: 3, t: 'Steam your greens', s: 'Boiling leaves folate in the water. Steaming keeps more.' };\n    const C = {\n      'Vegetarian': {\n        lead: 'You may need more choline from food and use folate a little less efficiently. Eggs, beans and leafy greens cover both.',\n        why: 'Choline comes mostly from eggs and animal foods, so it’s easy to fall short as a vegetarian. Folate comes from greens and pulses and is easily lost in cooking water.',\n        actions: [\n          { n: 1, t: 'Eat eggs regularly', s: 'By far the richest vegetarian choline source, and good protein.' },\n          { n: 2, t: 'Beans, lentils or soya daily', s: 'They supply choline and folate together.' },\n          greens,\n          { n: 4, t: 'Keep dairy in your week', s: 'Milk and yoghurt give vitamin B2, which your folate gene relies on.' }\n        ],\n        lean: ['Eggs', 'Tofu, tempeh and edamame', 'Lentils and chickpeas', 'Spinach and spring greens', 'Broccoli and sprouts', 'Milk and yoghurt', 'Peanuts'],\n        easy: ['Boiled-to-soft veg', 'Days with no eggs, pulses or soya']\n      },\n      'Vegan': {\n        lead: 'You may need more choline from food and use folate a little less efficiently. Without eggs, soya and beans do the heavy lifting for both.',\n        why: 'Choline comes mostly from eggs and animal foods, so vegans are the likeliest to fall short. Folate is easy on a vegan diet, but is lost in cooking water.',\n        actions: [\n          { n: 1, t: 'Soya every day', s: 'Tofu, tempeh, edamame or soya milk are the best vegan choline sources.' },\n          { n: 2, t: 'Beans or lentils at most meals', s: 'They add choline and folate together. Quinoa helps too.' },\n          greens,\n          { n: 4, t: 'Find your vitamin B2', s: 'Fortified plant milks, cereals, yeast extract, almonds and mushrooms. Your folate gene relies on it.' }\n        ],\n        lean: ['Tofu and tempeh', 'Edamame and soya milk', 'Lentils and chickpeas', 'Quinoa', 'Spinach and spring greens', 'Broccoli and sprouts', 'Fortified plant milks'],\n        easy: ['Boiled-to-soft veg', 'Days with no soya or pulses']\n      },\n      'Pescatarian': {\n        lead: 'You may need more choline from food and use folate a little less efficiently. Eggs and fish cover choline; greens and pulses cover folate.',\n        why: 'Choline comes mostly from eggs, fish and other animal foods. Folate comes from greens and pulses and is easily lost in cooking water.',\n        actions: [\n          { n: 1, t: 'Eggs and fish through the week', s: 'Eggs are the richest source; salmon, cod and prawns add more.' },\n          { n: 2, t: 'Beans, lentils or soya often', s: 'They supply choline and folate together.' },\n          greens,\n          { n: 4, t: 'Keep dairy in your week', s: 'Milk and yoghurt give vitamin B2, which your folate gene relies on.' }\n        ],\n        lean: ['Eggs', 'Salmon and cod', 'Prawns', 'Lentils and chickpeas', 'Spinach and spring greens', 'Broccoli and sprouts', 'Milk and yoghurt'],\n        easy: ['Boiled-to-soft veg', 'Days with no eggs, fish or pulses']\n      },\n      'Meat eater': {\n        lead: 'You may need more choline from food and use folate a little less efficiently. Eggs and meat cover choline; greens and pulses cover folate.',\n        why: 'Choline is plentiful in eggs, meat and fish, so supply is rarely the problem for you. Folate is the likelier gap: it comes from greens and pulses and is lost in cooking water.',\n        actions: [\n          { n: 1, t: 'Eggs a few times a week', s: 'The richest choline source of all.' },\n          { n: 2, t: 'Chicken, beef or fish regularly', s: 'Good everyday choline, plus vitamin B2.' },\n          greens,\n          { n: 4, t: 'Add beans or lentils', s: 'Meat brings little folate. Pulses fill the gap.' }\n        ],\n        lean: ['Eggs', 'Chicken', 'Beef', 'Fish', 'Lentils and chickpeas', 'Spinach and spring greens', 'Broccoli and sprouts'],\n        easy: ['Boiled-to-soft veg', 'Days with no greens or pulses']\n      }\n    };\n    return Object.assign({ dietLower: L[d] || 'vegetarian' }, C[d] || C['Vegetarian']);\n  }\n}"}, "RptB12": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">Priority 2 of 5</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #e3f1dd\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #58a754\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #2f5e1b\">Vitamins and minerals</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Vitamin B12</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">{{lead}}</p>\n    <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n      <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">B12 absorption and use</span><span style=\"font-size: 12px; color: #4d5a62\">Some variation in absorbing and carrying B12</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n      <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #2f5e1b; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Moderate</span></div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #0f1a0b; color: #ffffff\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 800; color: #9fd49a; white-space: nowrap\">Why diet matters</span>\n      <span style=\"font-size: 13px; line-height: 1.45; color: #e3e9ec\">{{dietNote}}</span>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Variants in the genes that absorb B12 in your gut and carry it in your blood are linked to lower B12 levels. Each effect is small, but they add up with what you eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">B12 contributes to normal energy release, nerve function and red blood cell formation. Low levels build slowly and often show up first as tiredness.</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <sc-for list=\"{{actions}}\" as=\"a\" hint-placeholder-count=\"4\">\n        <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 13px; font-weight: 800\">{{a.n}}</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">{{a.t}}</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{a.s}}</span></div></div>\n      </sc-for>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{lean}}\" as=\"f\" hint-placeholder-count=\"6\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{easy}}\" as=\"f\" hint-placeholder-count=\"1\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">CUBN · FUT2 · TCN2 · MTHFR</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #58a754\"></span>B2, B6 and B9 · p9</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f3e6f2; color: #6b3368; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #a463a0\"></span>Protein · p5</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">6</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const tired = { n: 4, t: 'Often tired? Get tested', s: 'A GP blood test shows your actual level, which DNA can’t.' };\n    const C = {\n      'Vegetarian': {\n        lead: 'You may absorb B12 a little less efficiently, and a vegetarian diet has fewer B12 sources. Together, that makes this one of your most practical results.',\n        dietNote: 'B12 comes almost only from animal foods and fortified products. Plants don’t provide B12 your body can use, so dairy, eggs and fortified foods do all the work.',\n        actions: [\n          { n: 1, t: 'A B12 source every day', s: 'Milk, yoghurt, an egg or fortified cereal each count.' },\n          { n: 2, t: 'Check fortified labels', s: 'Plant milks and nutritional yeast only help if B12 is listed.' },\n          { n: 3, t: 'A supplement as a safety net', s: 'Worth it if you rarely eat dairy, eggs or fortified foods.' },\n          tired\n        ],\n        lean: ['Milk and yoghurt', 'Cheese', 'Eggs', 'Fortified plant milks', 'Fortified cereals', 'Fortified nutritional yeast'],\n        easy: ['Relying on unfortified plant foods for B12']\n      },\n      'Vegan': {\n        lead: 'You may absorb B12 a little less efficiently, and plants provide none. On a vegan diet, a reliable B12 source every day is essential.',\n        dietNote: 'B12 is made by bacteria, not plants. Vegans need fortified foods or a supplement; there is no reliable plant source.',\n        actions: [\n          { n: 1, t: 'Take a daily B12 supplement', s: 'The simplest, most reliable way to cover B12 on a vegan diet.' },\n          { n: 2, t: 'Use fortified foods too', s: 'Plant milks, cereals and nutritional yeast with B12 on the label.' },\n          { n: 3, t: 'Don’t rely on “natural” sources', s: 'Seaweed, spirulina and mushrooms don’t provide usable B12.' },\n          tired\n        ],\n        lean: ['B12 supplement', 'Fortified plant milks', 'Fortified cereals', 'Fortified nutritional yeast', 'Fortified yeast extract'],\n        easy: ['Seaweed or spirulina as B12 sources']\n      },\n      'Pescatarian': {\n        lead: 'You may absorb B12 a little less efficiently. Fish, eggs and dairy are rich sources, so eating them regularly keeps you covered.',\n        dietNote: 'Fish and shellfish are among the richest B12 sources. Two or three fish meals a week plus dairy and eggs cover most people.',\n        actions: [\n          { n: 1, t: 'Fish two or three times a week', s: 'Salmon, sardines, mackerel, tuna and shellfish are rich in B12.' },\n          { n: 2, t: 'Dairy or eggs most days', s: 'Milk, yoghurt, cheese and eggs fill the gaps.' },\n          { n: 3, t: 'Fortified foods as backup', s: 'Cereals and plant milks with B12 on the label.' },\n          tired\n        ],\n        lean: ['Salmon and sardines', 'Mackerel and tuna', 'Shellfish', 'Eggs', 'Milk and yoghurt', 'Cheese'],\n        easy: ['Long gaps without B12 foods']\n      },\n      'Meat eater': {\n        lead: 'You may absorb B12 a little less efficiently. Your diet has plenty of sources, so this is about eating them regularly.',\n        dietNote: 'Meat, fish, eggs and dairy all provide B12. For you, absorption is a likelier gap than supply.',\n        actions: [\n          { n: 1, t: 'A B12 source most days', s: 'Meat, fish, eggs or dairy each count.' },\n          { n: 2, t: 'Fish or red meat weekly', s: 'Among the richest B12 sources.' },\n          { n: 3, t: 'Fortified foods as backup', s: 'Cereals and plant milks with B12 on the label.' },\n          tired\n        ],\n        lean: ['Beef and lamb', 'Chicken', 'Fish and shellfish', 'Eggs', 'Milk and yoghurt', 'Cheese'],\n        easy: ['Long gaps without B12 foods']\n      }\n    };\n    const c = C[d] || C['Vegetarian'];\n    return Object.assign({ dietLower: L[d] || 'vegetarian' }, c);\n  }\n}"}, "DNAArea": {"tpl": "<div style=\"width: 100%; background: #f5f5f3; padding: 16px 24px 0; box-sizing: border-box; overflow: hidden\">\n  <div style=\"max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px\">\n    <!-- Floating rounded announcement banner -->\n    <div style=\"display: flex; justify-content: center\">\n      <a href=\"#\" style=\"display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #141a12; color: #ffffff; box-shadow: 0 8px 24px rgba(20,26,18,0.12); max-width: 100%; box-sizing: border-box\">\n        <span style=\"display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0\">New</span>\n        <span class=\"banner-text-long\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">Every McDonald's item ranked by sugar, salt and calories for your age</span>\n        <span class=\"banner-text-short\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap\">McDonald's, ranked for your age</span>\n        <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n        </span>\n      </a>\n    </div>\n\n    <!-- Navigation: floating white pill -->\n    <div style=\"display: flex; justify-content: center\">\n      <nav aria-label=\"Main\" style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 8px 8px 8px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 12px 32px rgba(20,26,18,0.10), 0 2px 6px rgba(20,26,18,0.05)\">\n        <a href=\"#\" style=\"display: flex; align-items: center; gap: 10px; flex-shrink: 0\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #58a754\">\n            <svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f1a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21c-4.4 0-8-3.1-8-7.5C4 8 9 4 12 3c3 1 8 5 8 10.5 0 4.4-3.6 7.5-8 7.5Z\"></path><path d=\"M12 21V11\"></path></svg>\n          </span>\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em\">Boone</span>\n        </a>\n\n        <div class=\"nav-links\" style=\"display: flex; align-items: center; gap: 2px; min-width: 0\">\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Food database\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">The app\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Clubs and gyms</a>\n          <div class=\"nav-dd\" style=\"position: relative\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" aria-current=\"page\" aria-haspopup=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #f3f8ef; color: #2f5e1b\">DNA <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg></a><div class=\"nav-dd-panel\" style=\"position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; z-index: 60\"><div style=\"width: 330px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 24px 48px rgba(20,26,18,0.14)\"><a class=\"nav-dd-item\" href=\"/dna-nutrition-test\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Overview</span><span style=\"font-size: 13px; color: #5d676d\">What the test is and how it works</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">What it tests</span><span style=\"font-size: 13px; color: #5d676d\">23 results across five areas of your diet</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/sample-report\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Sample reports</span><span style=\"font-size: 13px; color: #5d676d\">Read or download a real report</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#by-diet\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">By diet</span><span style=\"font-size: 13px; color: #5d676d\">Vegetarian, vegan, pescatarian, meat eater</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Genes and method</span><span style=\"font-size: 13px; color: #5d676d\">All 48 genes and how we score them</span></a><a href=\"/dna-nutrition-test#order\" style=\"margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Order your DNA test<span>£198</span></a></div></div></div>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Pricing</a>\n        </div>\n\n        <div style=\"display: flex; align-items: center; gap: 6px; flex-shrink: 0\">\n          <a class=\"nav-signin nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500\">Sign in</a>\n          <a class=\"nav-cta\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Get the app</a>\n          <button class=\"nav-menu\" type=\"button\" aria-label=\"Open menu\" style=\"display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #f3f8ef; color: #1b2b36; cursor: pointer\">\n            <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 17h16\"></path></svg>\n          </button>\n        </div>\n      </nav>\n    </div>\n\n    <nav aria-label=\"DNA test\" style=\"display: flex; justify-content: center\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 6px 6px 6px 18px; border-radius: 22px; background: #e3f1dd\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>DNA test</span>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 2px\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Overview</a><a class=\"\" href=\"/dna-nutrition-test#what-it-tests\" aria-current=\"page\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: #1b2b36; color: #ffffff\">What it tests</a><a class=\"nav-link\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Sample reports</a><a class=\"nav-link\" href=\"/dna-nutrition-test#by-diet\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">By diet</a><a class=\"nav-link\" href=\"/dna-nutrition-test/genes\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Genes and method</a></div>\n        <a class=\"nav-cta\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap\">Order · £198</a>\n      </div>\n    </nav>\n\n\n    <section style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 56px 24px 72px\">\n      <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px\">\n        <nav aria-label=\"Breadcrumb\" style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px\"><a href=\"/\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">Home</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><a href=\"/dna-nutrition-test\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">DNA test</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><span aria-current=\"page\" style=\"color: #1b2b36; font-weight: 600\">{{name}}</span></nav>\n        <span style=\"align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: {{tint}}; color: {{deep}}; font-size: 15px; font-weight: 700\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: {{c}}\"></span>Boone DNA test · {{count}}</span>\n        <h1 class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 68px; line-height: 1; font-weight: 800; letter-spacing: -0.045em\">{{name}} <span style=\"color: {{deep}}\">and your genes</span></h1>\n        <p style=\"margin: 0; font-size: 21px; line-height: 1.55; color: #4d5a62; max-width: 620px\">{{intro}}</p>\n        <div style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 16px\">\n          <a class=\"btn-primary\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 17px; font-weight: 700\">Order your DNA test <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n          <a href=\"#example\" style=\"font-size: 17px; font-weight: 700; color: #2f5e1b; text-decoration: underline; text-underline-offset: 4px\">See an example page</a>\n        </div>\n      </div>\n      <div style=\"flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 32px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.10)\">\n        <div style=\"display: flex; align-items: center; gap: 14px; padding-bottom: 12px\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 22px; background: {{c}}\"><sc-if value=\"{{is_carbs}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L4 14h7l-1 8 9-12h-7z\"></path></svg></sc-if><sc-if value=\"{{is_fats}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z\"></path></svg></sc-if><sc-if value=\"{{is_protein}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3v18\"></path><path d=\"M4 3v5a3 3 0 0 0 6 0V3\"></path><path d=\"M17 21V3c-2.2 0-3.5 2.5-3.5 6s1.3 5 3.5 5\"></path></svg></sc-if><sc-if value=\"{{is_vit}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></sc-if><sc-if value=\"{{is_beh}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M9 10h.01\"></path><path d=\"M15 10h.01\"></path><path d=\"M8.5 15c1 1.2 2.2 1.8 3.5 1.8s2.5-.6 3.5-1.8\"></path></svg></sc-if></span>\n          <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5d676d\">From the sample report</span><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800\">{{name}}</span></div>\n        </div>\n        <sc-for list=\"{{results}}\" as=\"r\" hint-placeholder-count=\"4\">\n          <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: {{r.bg}}\">\n            <span style=\"font-size: 16px; font-weight: 700\">{{r.name}}</span>\n            <div style=\"display: flex; gap: 3px\"><sc-for list=\"{{r.segs}}\" as=\"s\" hint-placeholder-count=\"5\"><span style=\"width: 16px; height: 9px; border-radius: 3px; background: {{s.bg}}\"></span></sc-for></div>\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: {{r.deep}}; min-width: 34px; text-align: right\">{{r.score}}/5</span>\n          </div>\n        </sc-for>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #5d676d; padding-top: 6px\">Scores show genetic influence, 0 to 5. Your own results will differ.</span>\n      </div>\n    </section>\n\n  </div>\n\n  <section class=\"reveal\" aria-labelledby=\"measures-heading\" style=\"margin: 0 -24px; background: #ffffff; padding: 112px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 64px\">\n      <div style=\"flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">Why it matters</span>\n        <h2 id=\"measures-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; font-size: 48px\">What we <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">look at</span></h2>\n        <p style=\"margin: 0; font-size: 19px; line-height: 1.6; color: #4d5a62\">{{why}}</p>\n      </div>\n      <div style=\"flex: 1.4 1 560px; min-width: 0; display: flex; flex-direction: column\">\n        <sc-for list=\"{{results}}\" as=\"r\" hint-placeholder-count=\"4\">\n          <div style=\"display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid #eef0ec\">\n            <span style=\"align-self: stretch; border-radius: 4px; background: {{r.c}}\"></span>\n            <div style=\"display: flex; flex-direction: column; gap: 4px\">\n              <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em\">{{r.name}}</span>\n              <span style=\"font-size: 16px; line-height: 1.5; color: #4d5a62\">{{r.what}}</span>\n            </div>\n            <span style=\"padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; {{r.labelStyle}}\">{{r.label}} in sample</span>\n          </div>\n        </sc-for>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"genes-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 112px 0 64px; display: flex; flex-direction: column; gap: 36px\">\n    <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px\">\n      <div style=\"display: flex; flex-direction: column; gap: 14px; max-width: 760px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">The genes</span>\n        <h2 id=\"genes-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; font-size: 48px\">{{geneCount}} genes behind <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">these results</span></h2>\n      </div>\n      <a href=\"/dna-nutrition-test/genes\" style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #2f5e1b; text-decoration: underline; text-underline-offset: 4px\">All 48 genes <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px\">\n      <sc-for list=\"{{genes}}\" as=\"g\" hint-placeholder-count=\"8\">\n        <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: #ffffff; border: 1px solid #e3e8df\">\n          <div style=\"display: flex; align-items: center; justify-content: space-between; gap: 10px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.01em\">{{g.name}}</span><span style=\"padding: 3px 10px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 12px; font-weight: 700\">{{g.result}}</span></div>\n          <span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{g.text}}</span>\n        </div>\n      </sc-for>\n    </div>\n  </section>\n\n  <section class=\"reveal\" id=\"example\" aria-labelledby=\"example-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 64px 0 112px\">\n    <div style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 56px; border-radius: 40px; background: {{tint}}\">\n      <div style=\"flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #ffffff; color: {{deep}}; font-size: 14px; font-weight: 600\">From the sample report · {{page}}</span>\n        <h2 id=\"example-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; font-size: 48px\">What the advice looks like</h2>\n        <p style=\"margin: 0; font-size: 18px; line-height: 1.6; color: #3d4a52\">Every Focus result gets its own page: what it means, why it matters, four things to do, and the foods to lean on and go easy on. Switch diet to see the advice change.</p>\n        <div role=\"tablist\" aria-label=\"Choose a diet\" style=\"display: flex; flex-wrap: wrap; gap: 8px\"><sc-for list=\"{{tabsLight}}\" as=\"t\" hint-placeholder-count=\"4\"><button class=\"tab-btn\" type=\"button\" role=\"tab\" aria-selected=\"{{t.selected}}\" onClick=\"{{t.pick}}\" style=\"height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; {{t.style}}\">{{t.label}}</button></sc-for></div>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px\">\n          <a class=\"btn-primary\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 17px; font-weight: 700\">Read the full sample <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n        </div>\n      </div>\n      <div style=\"flex: 0 1 476px; min-width: 0; display: flex; justify-content: center\"><sc-if value=\"{{is_carbs}}\" hint-placeholder-val=\"{{ true }}\"><div style=\"flex-shrink: 0; width: 476px; height: 674px; overflow: hidden; border-radius: 8px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.18); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.6); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptGlucose\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{is_fats}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 476px; height: 674px; overflow: hidden; border-radius: 8px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.18); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.6); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptOmega3\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{is_protein}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 476px; height: 674px; overflow: hidden; border-radius: 8px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.18); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.6); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptAppetite\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{is_vit}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 476px; height: 674px; overflow: hidden; border-radius: 8px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.18); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.6); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptB12\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{is_beh}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 476px; height: 674px; overflow: hidden; border-radius: 8px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.18); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.6); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptWorthKnowing\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if></div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"other-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 0 0 112px; display: flex; flex-direction: column; gap: 28px\">\n    <h2 id=\"other-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; font-size: 40px\">Other areas the test covers</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px\">\n      <sc-for list=\"{{others}}\" as=\"o\" hint-placeholder-count=\"4\">\n        <a class=\"area-card\" href=\"{{o.href}}\" style=\"display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 24px; background: {{o.tint}}; color: #1b2b36\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: {{o.c}}; flex-shrink: 0\"><sc-if value=\"{{o.is_carbs}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L4 14h7l-1 8 9-12h-7z\"></path></svg></sc-if><sc-if value=\"{{o.is_fats}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z\"></path></svg></sc-if><sc-if value=\"{{o.is_protein}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3v18\"></path><path d=\"M4 3v5a3 3 0 0 0 6 0V3\"></path><path d=\"M17 21V3c-2.2 0-3.5 2.5-3.5 6s1.3 5 3.5 5\"></path></svg></sc-if><sc-if value=\"{{o.is_vit}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></sc-if><sc-if value=\"{{o.is_beh}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M9 10h.01\"></path><path d=\"M15 10h.01\"></path><path d=\"M8.5 15c1 1.2 2.2 1.8 3.5 1.8s2.5-.6 3.5-1.8\"></path></svg></sc-if></span>\n          <span style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 17px; font-weight: 700\">{{o.name}}</span><span style=\"font-size: 14px; font-weight: 600; color: {{o.deep}}\">{{o.count}}</span></span>\n        </a>\n      </sc-for>\n    </div>\n  </section>\n\n  <section aria-labelledby=\"cta-heading\" style=\"max-width: 1280px; margin: 0 auto 96px; box-sizing: border-box; background: #58a754; border-radius: 40px; padding: 80px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden\">\n    <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n      <h2 id=\"cta-heading\" class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #ffffff\">Stop eating by guesswork.<br>Start eating with your biology.</h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #13250d; max-width: 560px\">A personalised nutrition blueprint that connects your genetics with the meals you actually eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 10px\">\n      <a class=\"store-btn\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test · £198</a>\n      <span style=\"font-size: 14px; font-weight: 600; color: #13250d\">Free UK delivery · Secure checkout</span>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer style=\"margin: 0 -24px; background: #1b2b36; color: #c9d3d8; padding: 88px 24px 40px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px\">\n      <div style=\"display: flex; flex-wrap: wrap; gap: 56px\">\n        <div style=\"flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px\">\n          <a href=\"#\" style=\"display: flex; align-items: center\"><img src=\"/_blob/5930dc2c89021dbab3e64b01c6af9d7b\" alt=\"Boone Logo: Personalised Nutrition\" style=\"height: 44px; width: auto; display: block\"></a>\n          <p style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; max-width: 380px\">Personalised nutrition, aligned with your biology.</p>\n          <div style=\"display: flex; flex-direction: column; gap: 12px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Get the app</span><div style=\"display: flex; flex-wrap: wrap; gap: 10px\"><a href=\"https://apps.apple.com/gb/app/boone/id6739210113\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-1-2.4-4zM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Download on the</span><span style=\"font-size: 17px; font-weight: 700\">App Store</span></span></a><a href=\"https://play.google.com/store/apps/details?id=com.boone.boone&amp;hl=en_GB\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M4.5 2.8 13.7 12l-9.2 9.2c-.3-.2-.5-.6-.5-1V3.8c0-.4.2-.8.5-1zM14.7 13l2.4 2.4-11 6.3zM14.7 11 6.1 2.3l11 6.3zM18.3 9.3l2.6 1.5c.8.5.8 1.8 0 2.3l-2.6 1.5L15.6 12z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Get it on</span><span style=\"font-size: 17px; font-weight: 700\">Google Play</span></span></a></div></div>\n          <form style=\"display: flex; flex-direction: column; gap: 10px; max-width: 420px\"><label for=\"footer-email\" style=\"font-size: 15px; color: #c9d3d8\">Nutrition tips and updates, once a month.</label><div style=\"display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px\"><input id=\"footer-email\" type=\"email\" placeholder=\"Your email\" style=\"flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #ffffff\"><button type=\"submit\" style=\"flex-shrink: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #58a754; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer\">Subscribe</button></div><span style=\"font-size: 13px; color: #9aa8b0\">See our <a href=\"/privacy-policy\" style=\"color: #c9d3d8; text-decoration: underline\">privacy policy</a> for details.</span></form>\n        </div>\n        <nav aria-label=\"Footer\" style=\"flex: 2.4 1 680px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px\"><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">The app</span><a class=\"foot-link\" href=\"/how-it-works\">How it works</a><a class=\"foot-link\" href=\"/app\">Features</a><a class=\"foot-link\" href=\"/science\">The science</a><a class=\"foot-link\" href=\"/dna-nutrition-test\">DNA test</a><a class=\"foot-link\" href=\"/activate\">Activate your test</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Food database</span><a class=\"foot-link\" href=\"/food-database\">Search the database</a><a class=\"foot-link\" href=\"/restaurant\">Restaurants</a><a class=\"foot-link\" href=\"/brand\">Brands</a><a class=\"foot-link\" href=\"/foods\">Everyday foods</a><a class=\"foot-link\" href=\"/kids-nutrition-age-adjusted-nutritional-info\">Kids nutrition</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Company</span><a class=\"foot-link\" href=\"/about\">About</a><a class=\"foot-link\" href=\"/press\">Press and recognition</a><a class=\"foot-link\" href=\"/sport\">For clubs and gyms</a><a class=\"foot-link\" href=\"/methodology\">Methodology</a><a class=\"foot-link\" href=\"/articles\">Articles</a><a class=\"foot-link\" href=\"/contact\">Contact</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Legal</span><a class=\"foot-link\" href=\"/terms-conditions\">Terms and conditions</a><a class=\"foot-link\" href=\"/privacy-policy\">Privacy policy</a><a class=\"foot-link\" href=\"/cookie-policy\">Cookie policy</a><a class=\"foot-link\" href=\"/app-usage-policy\">App usage policy</a><a class=\"foot-link\" href=\"/returns\">Returns</a><a class=\"foot-link\" href=\"/delivery\">Delivery</a></div></nav>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12)\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: #9aa8b0\"><span style=\"color: #c9d3d8\">© 2026 Boone App Ltd. All rights reserved.</span><span>Registered in England and Wales, company no. <a href=\"https://find-and-update.company-information.service.gov.uk/company/15774886\" style=\"color: #c9d3d8; text-decoration: underline\">15774886</a>. Registered office: Centrum, Colney Lane, Colney, Norwich NR4 7UG.</span></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 10px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Follow Boone</span><div style=\"display: flex; gap: 10px\"><a href=\"https://www.linkedin.com/company/boone-app\" aria-label=\"Boone on LinkedIn\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M4 9h3.2v11H4zM5.6 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM9.5 9h3.1v1.5c.5-.9 1.7-1.8 3.4-1.8 3.4 0 4 2.2 4 5.1V20h-3.2v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V20H9.5z\" fill=\"#ffffff\"></path></svg></a><a href=\"https://www.instagram.com/boonenutrition/\" aria-label=\"Boone on Instagram\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></rect><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></circle><circle cx=\"17.2\" cy=\"6.8\" r=\"1.2\" fill=\"#ffffff\"></circle></svg></a><a href=\"https://www.tiktok.com/@booneapp\" aria-label=\"Boone on TikTok\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3c.3 2.2 1.7 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.9-1.1v6.1a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.3a2.4 2.4 0 1 0 1.5 2.2V3z\" fill=\"#ffffff\"></path></svg></a></div></div>\n      </div>\n    </div>\n  </footer>\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const DEFAULT_DIET = 'Vegetarian';\n    const DIETS = ['Vegetarian', 'Vegan', 'Pescatarian', 'Meat eater'];\n    const LOWER = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const SLUG = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eater' };\n    const st = this.state || {};\n    const diet = st.diet || DEFAULT_DIET;\n    const mkTabs = (dark) => DIETS.map((d) => {\n      const on = d === diet;\n      return {\n        label: d, selected: on ? 'true' : 'false',\n        style: on ? 'background: #58a754; color: #0f1a0b; border-color: #58a754' : (dark ? 'background: transparent; color: #e3e9ec; border-color: rgba(255,255,255,0.28)' : 'background: #ffffff; color: #1b2b36; border-color: #dfe5db'),\n        pick: () => this.setState({ diet: d })\n      };\n    });\n\n    const labelStyle = (l) => l === 'Focus' ? 'background: #1b2b36; color: #ffffff' : (l === 'Worth knowing' ? 'background: #fbeed9; color: #8a4a0b' : 'background: #e7efe3; color: #2f5e1b');\n    const segs = (n, c, off) => [1, 2, 3, 4, 5].map((i) => ({ bg: i <= n ? c : (off || '#e6e9e4') }));\n\n    const AREAS = [{\"key\": \"carbs\", \"name\": \"Carbs and energy\", \"short\": \"Carbs\", \"slug\": \"carbs-and-energy\", \"c\": \"#e07b39\", \"tint\": \"#fce9dc\", \"deep\": \"#9a4a12\", \"intro\": \"How your blood sugar may respond to carbohydrates, and how quickly your body releases insulin to bring it back down.\", \"why\": \"Two people can eat the same bowl of white pasta and see very different blood sugar curves. Your genes are one reason why. Knowing your tendency tells you whether swapping to wholegrains, or pairing carbs with protein and fibre, is likely to make a real difference for you.\", \"page\": \"page 8\", \"results\": [{\"name\": \"Glucose response\", \"what\": \"How much your blood sugar may rise after refined carbs, and how quickly it settles.\", \"score\": 4, \"label\": \"Focus\"}], \"genes\": [\"ADCY5\", \"ADIPOQ\", \"G6PC2\", \"GCK\", \"GCKR\", \"IRS1\", \"PPARG\", \"TCF7L2\"]}, {\"key\": \"fats\", \"name\": \"Fats\", \"short\": \"Fats\", \"slug\": \"fats\", \"c\": \"#3f86c0\", \"tint\": \"#e2edf6\", \"deep\": \"#1b4a63\", \"intro\": \"How you convert plant omega-3, clear fats from your blood after meals, and respond to saturated and unsaturated fat.\", \"why\": \"Fat advice is usually one size fits all. Your genes shape how much ready-made omega-3 you need, and whether swapping fats is likely to move your numbers.\", \"page\": \"page 7\", \"results\": [{\"name\": \"Omega-3\", \"what\": \"How well you turn plant omega-3 (ALA) into EPA and DHA.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Lipid handling\", \"what\": \"How quickly you clear fats and cholesterol from your blood after meals.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Saturated fat\", \"what\": \"Whether your genes change how you respond to saturated fat.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Unsaturated fat\", \"what\": \"How you respond to olive oil, nuts, seeds and oily fish.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"APOA2\", \"APOA5\", \"APOB\", \"ELOVL2\", \"FADS1\", \"FTO\", \"GCKR\", \"LDLR\", \"LPA\", \"LPL\", \"PNPLA3\", \"PPARG\", \"TRIB1\"]}, {\"key\": \"protein\", \"name\": \"Protein\", \"short\": \"Protein\", \"slug\": \"protein\", \"c\": \"#a463a0\", \"tint\": \"#f3e6f2\", \"deep\": \"#6b3368\", \"intro\": \"How strongly protein keeps you full, and whether the total amount you eat matters more for you than for most people.\", \"why\": \"For some people protein is the single most useful lever on appetite. If that is you, building meals around it makes the rest of your diet easier.\", \"page\": \"page 5\", \"results\": [{\"name\": \"Protein and fullness\", \"what\": \"How strongly protein keeps you full after a meal.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Protein amount\", \"what\": \"Whether your total daily protein matters more for you than average.\", \"score\": 5, \"label\": \"Focus\"}], \"genes\": [\"FGF21\", \"FTO\", \"TFAP2B\"]}, {\"key\": \"vit\", \"name\": \"Vitamins and minerals\", \"short\": \"Vitamins\", \"slug\": \"vitamins-and-minerals\", \"c\": \"#58a754\", \"tint\": \"#e3f1dd\", \"deep\": \"#2f5e1b\", \"intro\": \"How you absorb, activate and carry eleven vitamins and minerals, from B12 and folate to calcium, iron and vitamin D.\", \"why\": \"Your genes can make some nutrients harder to get from the same food. That matters most when your diet already has fewer sources, such as B12 on a plant-based diet.\", \"page\": \"page 6\", \"results\": [{\"name\": \"Choline\", \"what\": \"How much choline you make yourself, so how much you need from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin C\", \"what\": \"How efficiently you absorb vitamin C from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin B12\", \"what\": \"How well you absorb and carry B12.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"B2, B6 and B9\", \"what\": \"How efficiently you turn folate into its active form.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Calcium\", \"what\": \"How vitamin D helps you absorb calcium.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Vitamin D\", \"what\": \"How you make, carry and activate vitamin D.\", \"score\": 2, \"label\": \"Worth knowing\"}, {\"name\": \"Vitamin A\", \"what\": \"How you convert beta-carotene from plants into vitamin A.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Iron\", \"what\": \"How you absorb and store iron.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Sodium\", \"what\": \"Whether your genes change how you handle salt.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin E\", \"what\": \"How you use and store vitamin E.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin K\", \"what\": \"How you break down vitamin K.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"ADD1\", \"BCO1\", \"BHMT\", \"CHDH\", \"CUBN\", \"CYP1A1\", \"CYP2R1\", \"CYP4F2\", \"FUT2\", \"GC\", \"HFE\", \"MTHFR\", \"PEMT\", \"RBP4\", \"SCARB1\", \"SLC23A1\", \"TCN2\", \"TF\", \"TMPRSS6\", \"TTR\", \"VDR\"]}, {\"key\": \"beh\", \"name\": \"Behaviour and sensitivities\", \"short\": \"Behaviour\", \"slug\": \"behaviour-and-sensitivities\", \"c\": \"#e2a024\", \"tint\": \"#fbeed9\", \"deep\": \"#8a4a0b\", \"intro\": \"Appetite and snacking, caffeine, alcohol, lactose and bitter taste: the traits that shape what you reach for.\", \"why\": \"These results explain everyday experiences, like why a late coffee does or doesn’t keep you up, or why snacks are harder to ignore. They are often the most recognisable part of the report.\", \"page\": \"page 11\", \"results\": [{\"name\": \"Snacking and appetite\", \"what\": \"How strongly you feel hunger and the pull of snacks.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Caffeine\", \"what\": \"Whether you clear caffeine faster or slower than average.\", \"score\": 1, \"label\": \"Worth knowing\"}, {\"name\": \"Alcohol\", \"what\": \"How quickly you break down acetaldehyde, the by-product of alcohol.\", \"score\": 0, \"label\": \"Worth knowing\"}, {\"name\": \"Bitter taste\", \"what\": \"How bitter greens like broccoli and kale taste to you.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Lactose\", \"what\": \"Whether you are likely to digest lactose as an adult.\", \"score\": 0, \"label\": \"No change\"}], \"genes\": [\"ALDH2\", \"BDNF\", \"CYP1A1\", \"CYP1A2\", \"MC4R\", \"MCM6\", \"TAS2R38\"]}];\n    const GENES = {\"ADCY5\": \"Helps signal insulin release from the pancreas. Linked to small differences in fasting blood sugar.\", \"ADD1\": \"Involved in how the kidneys handle salt. Linked to blood pressure in population studies.\", \"ADIPOQ\": \"Makes adiponectin, a hormone from fat tissue that helps your body respond to insulin.\", \"ALDH2\": \"Breaks down acetaldehyde, the by-product of alcohol that causes flushing.\", \"APOA2\": \"Linked in some studies to how the body responds to saturated fat.\", \"APOA5\": \"Helps clear triglycerides, the main blood fats, after a meal.\", \"APOB\": \"Builds the particles that carry cholesterol and fats in your blood.\", \"BCO1\": \"Converts beta-carotene from plants into vitamin A.\", \"BDNF\": \"Involved in brain signals for hunger and fullness.\", \"BHMT\": \"Uses betaine, made from choline, in an important recycling step in the liver.\", \"CHDH\": \"Turns choline into betaine.\", \"CUBN\": \"Absorbs vitamin B12 from your gut.\", \"CYP1A1\": \"A liver enzyme that helps break down caffeine and other compounds.\", \"CYP1A2\": \"The main enzyme that clears caffeine. Variants make people faster or slower clearers.\", \"CYP2R1\": \"Activates vitamin D in the liver. Variants are linked to lower blood vitamin D.\", \"CYP4F2\": \"Breaks down vitamins E and K. Also used to guide doses of the blood thinner warfarin.\", \"ELOVL2\": \"Lengthens omega-3 fats on the way to making DHA.\", \"FADS1\": \"A key step in turning plant omega-3 (ALA) into EPA and DHA.\", \"FGF21\": \"A hormone linked to food choice, including how much protein and sugar people prefer.\", \"FTO\": \"The best-studied appetite gene. Linked to energy balance and how people respond to diet.\", \"FUT2\": \"Shapes your gut environment. Linked to B12 levels in the blood.\", \"G6PC2\": \"Helps set your fasting blood sugar level.\", \"GC\": \"Makes the protein that carries vitamin D in your blood.\", \"GCK\": \"Your body’s glucose sensor. Sets when insulin is released.\", \"GCKR\": \"Controls how the liver handles glucose, and affects blood fat levels.\", \"HFE\": \"Controls how much iron your gut absorbs.\", \"IRS1\": \"Passes insulin’s signal into your cells.\", \"LDLR\": \"Clears LDL cholesterol from your blood.\", \"LPA\": \"Sets your level of lipoprotein(a), a blood fat particle largely decided by genes.\", \"LPL\": \"Breaks down blood fats so your body can use or store them.\", \"MC4R\": \"A key appetite gene in the brain. Common variants have a small effect on hunger.\", \"MCM6\": \"Controls whether the lactase enzyme stays switched on in adulthood.\", \"MTHFR\": \"Turns folate into its active form, with help from vitamin B2.\", \"PEMT\": \"Lets your liver make some of its own choline.\", \"PNPLA3\": \"Involved in how the liver handles fat.\", \"PPARG\": \"Guides fat cell development and how tissues respond to insulin.\", \"RBP4\": \"Carries vitamin A in your blood.\", \"SCARB1\": \"Takes up fat-soluble nutrients, including vitamin E, into cells.\", \"SLC23A1\": \"Absorbs vitamin C from your gut.\", \"TAS2R38\": \"A bitter taste receptor that decides how bitter some vegetables taste to you.\", \"TCF7L2\": \"The strongest common gene linked to blood sugar control and insulin release.\", \"TCN2\": \"Carries vitamin B12 in your blood to your cells.\", \"TF\": \"Makes transferrin, the protein that carries iron in your blood.\", \"TFAP2B\": \"Linked to where the body stores fat and how people respond to different diets.\", \"TMPRSS6\": \"Helps set hepcidin, the hormone that controls iron absorption.\", \"TRIB1\": \"Linked to blood fat levels.\", \"TTR\": \"Helps carry vitamin A in your blood. Boone looks only at that role.\", \"VDR\": \"The vitamin D receptor, which helps you absorb calcium.\"};\n    const GR = {\"ADCY5\": \"Glucose\", \"ADD1\": \"Sodium\", \"ADIPOQ\": \"Glucose\", \"ALDH2\": \"Alcohol\", \"APOA2\": \"Saturated fat\", \"APOA5\": \"Saturated fat\", \"APOB\": \"Lipid handling\", \"BCO1\": \"Vitamin A\", \"BDNF\": \"Snacking\", \"BHMT\": \"Choline\", \"CHDH\": \"Choline\", \"CUBN\": \"B12\", \"CYP1A1\": \"Caffeine, sodium\", \"CYP1A2\": \"Caffeine\", \"CYP2R1\": \"Vitamin D, calcium\", \"CYP4F2\": \"Vitamins E and K\", \"ELOVL2\": \"Omega-3\", \"FADS1\": \"Omega-3\", \"FGF21\": \"Protein and fullness\", \"FTO\": \"Protein amount, saturated fat\", \"FUT2\": \"B12\", \"G6PC2\": \"Glucose\", \"GC\": \"Vitamin D\", \"GCK\": \"Glucose\", \"GCKR\": \"Glucose, lipid handling\", \"HFE\": \"Iron\", \"IRS1\": \"Glucose\", \"LDLR\": \"Lipid handling\", \"LPA\": \"Lipid handling\", \"LPL\": \"Unsaturated fat\", \"MC4R\": \"Snacking\", \"MCM6\": \"Lactose\", \"MTHFR\": \"Folate, B12\", \"PEMT\": \"Choline\", \"PNPLA3\": \"Lipid handling\", \"PPARG\": \"Glucose, saturated fat\", \"RBP4\": \"Vitamin A\", \"SCARB1\": \"Vitamin E\", \"SLC23A1\": \"Vitamin C\", \"TAS2R38\": \"Bitter taste\", \"TCF7L2\": \"Glucose\", \"TCN2\": \"B12\", \"TF\": \"Iron\", \"TFAP2B\": \"Protein amount\", \"TMPRSS6\": \"Iron\", \"TRIB1\": \"Lipid handling\", \"TTR\": \"Vitamin A\", \"VDR\": \"Calcium\"};\n    const key = this.props.area ?? 'carbs';\n    const a = AREAS.find((x) => x.key === key) || AREAS[0];\n    const cnt = (x) => x.results.length === 1 ? '1 result' : x.results.length + ' results';\n    const out = {\n      name: a.name, intro: a.intro, why: a.why, c: a.c, tint: a.tint, deep: a.deep, page: a.page,\n      count: cnt(a) + ' · ' + a.genes.length + ' genes', geneCount: a.genes.length,\n      diet: diet, tabsLight: mkTabs(false),\n      results: a.results.map((r) => ({ name: r.name, what: r.what, score: r.score, label: r.label, labelStyle: labelStyle(r.label),\n        c: a.c, deep: a.deep, bg: r.label === 'Focus' ? a.tint : '#f5f5f3', segs: segs(r.score, a.c, '#dfe5db') })),\n      genes: a.genes.map((g) => ({ name: g, text: GENES[g], result: GR[g], tint: a.tint, deep: a.deep })),\n      others: AREAS.filter((x) => x.key !== a.key).map((x) => ({ name: x.name, href: '/dna-nutrition-test/' + x.slug, c: x.c, tint: x.tint, deep: x.deep, count: cnt(x),\n        is_carbs: x.key === 'carbs', is_fats: x.key === 'fats', is_protein: x.key === 'protein', is_vit: x.key === 'vit', is_beh: x.key === 'beh' }))\n    };\n    AREAS.forEach((x) => { out['is_' + x.key] = x.key === a.key; });\n    return out;\n  }\n}"}, "RptWorthKnowing": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #e2a024\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 12px; font-weight: 700\">Worth knowing</span>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 6px\">\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05\">Low scores, useful facts</h1>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.5; color: #4d5a62\">Your genes don't push hard on these three, but each comes with something practical.</p>\n  </div>\n\n  <sc-for list=\"{{items}}\" as=\"it\" hint-placeholder-count=\"3\">\n    <section style=\"display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 20px; background: {{it.tint}}\">\n      <div style=\"display: flex; align-items: center; gap: 14px\">\n        <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: {{it.c}}\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 11v6\"></path><path d=\"M12 7.5v.5\"></path></svg></span>\n        <div style=\"flex: 1; display: flex; flex-direction: column; gap: 2px\">\n          <span style=\"font-size: 12px; font-weight: 700; color: {{it.deep}}\">{{it.area}}</span>\n          <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800\">{{it.name}}</h2>\n        </div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 4px\">\n          <div style=\"display: flex; align-items: center; gap: 8px\"><div style=\"display: flex; gap: 3px\"><sc-for list=\"{{it.segs}}\" as=\"s\" hint-placeholder-count=\"5\"><span style=\"width: 18px; height: 10px; border-radius: 3px; background: {{s.bg}}\"></span></sc-for></div><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; color: {{it.deep}}\">{{it.score}}/5</span></div>\n          <span style=\"font-size: 11px; color: #4d5a62\">{{it.ev}} science</span>\n        </div>\n      </div>\n      <p style=\"margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4\">{{it.headline}}</p>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.55; color: #3d4a52\">{{it.body}}</p>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #ffffff\">\n        <span style=\"font-size: 13px; font-weight: 700\">{{it.todo}}</span>\n        <span style=\"font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #4d5a62; white-space: nowrap\">{{it.genes}}</span>\n      </div>\n    </section>\n  </sc-for>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">11</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    let d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const DF = {\n      'Vegetarian': 'Eggs, fortified cereals and spreads, and UV-exposed mushrooms help a little.',\n      'Vegan': 'Fortified plant milks, cereals and spreads and UV-exposed mushrooms help a little. Most vitamin D3 comes from sheep’s wool, so look for D2 or lichen-based D3.',\n      'Pescatarian': 'Oily fish such as salmon, mackerel and sardines is the best food source. Eggs and fortified cereals add a little.',\n      'Meat eater': 'Oily fish is the best food source. Eggs, red meat and fortified cereals add a little.'\n    };\n    const DT = {\n      'Vegetarian': 'Do: consider 10 micrograms a day, October to March',\n      'Vegan': 'Do: 10 micrograms of D2 or lichen D3, October to March',\n      'Pescatarian': 'Do: oily fish weekly; consider 10 micrograms in winter',\n      'Meat eater': 'Do: oily fish weekly; consider 10 micrograms in winter'\n    };\n    if (!DF[d]) { d = 'Vegetarian'; }\n    const item = (c, tint, deep, area, name, score, ev, headline, body, todo, genes) => ({\n      c: c, tint: tint, deep: deep, area: area, name: name, score: score, ev: ev,\n      headline: headline, body: body, todo: todo, genes: genes,\n      segs: [1, 2, 3, 4, 5].map((i) => ({ bg: i <= score ? c : '#ffffff' }))\n    });\n    return {\n      dietLower: L[d] || 'vegetarian',\n      items: [\n        item('#58a754', '#e3f1dd', '#2f5e1b', 'Vitamins and minerals', 'Vitamin D', 2, 'Moderate',\n          'Your genes have little effect on vitamin D. UK winters do.',\n          'From October to March, UK sunlight is too weak for your skin to make vitamin D. That’s why the NHS advises everyone to consider a 10 microgram vitamin D supplement in autumn and winter. ' + DF[d],\n          DT[d], 'CYP2R1 · GC'),\n        item('#e2a024', '#fbeed9', '#8a4a0b', 'Behaviour and sensitivities', 'Caffeine', 1, 'Strong',\n          'You probably clear caffeine faster than average.',\n          'Its effects may wear off sooner for you. Some research suggests faster clearers get a clearer performance lift from caffeine before exercise. A late coffee can still affect anyone’s sleep. UK and EU guidance puts the safe limit for adults at 400 mg a day, about four mugs of coffee.',\n          'Do: stay under 400 mg a day; try it before training', 'CYP1A2 · CYP1A1'),\n        item('#e2a024', '#fbeed9', '#8a4a0b', 'Behaviour and sensitivities', 'Alcohol', 0, 'Strong',\n          'You may feel fewer immediate effects from alcohol. The risks are the same.',\n          'Your variants suggest less build-up of acetaldehyde, the by-product behind flushing and feeling unwell after drinking. That can make it easier to drink more without noticing. It doesn’t protect you from alcohol’s longer-term harms.',\n          'Do: 14 units a week or less, spread over 3 or more days', 'ALDH2')\n      ]\n    };\n  }\n}"}, "RptOmega3": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #3f86c0\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e2edf6; color: #1b4a63; font-size: 12px; font-weight: 700\">Priority 3 of 5</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #e2edf6\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #3f86c0\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #1b4a63\">Fats</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Omega-3 and blood fats</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">{{lead}}</p>\n    <div style=\"display: flex; flex-direction: column; gap: 6px\">\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Omega-3 conversion</span><span style=\"font-size: 12px; color: #4d5a62\">Turns plant omega-3 into EPA and DHA less well</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #1b4a63; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Strong</span></div>\n      </div>\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Lipid handling</span><span style=\"font-size: 12px; color: #4d5a62\">Clears fats from your blood a little slower</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #3f86c0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #1b4a63; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Moderate</span></div>\n      </div>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">FADS1 and ELOVL2 turn the omega-3 in flax, chia and walnuts into EPA and DHA, the forms your body uses. Your variants suggest this step is slower. Other genes affect how fats travel in your blood.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">{{why}}</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <sc-for list=\"{{actions}}\" as=\"a\" hint-placeholder-count=\"4\">\n        <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #3f86c0; color: #ffffff; font-size: 13px; font-weight: 800\">{{a.n}}</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">{{a.t}}</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{a.s}}</span></div></div>\n      </sc-for>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{lean}}\" as=\"f\" hint-placeholder-count=\"8\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{easy}}\" as=\"f\" hint-placeholder-count=\"4\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">FADS1 · ELOVL2 · APOB · LDLR · TRIB1 · PNPLA3 · LPA · GCKR</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e2edf6; color: #1b4a63; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #3f86c0\"></span>Saturated fat · p12</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e2edf6; color: #1b4a63; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #3f86c0\"></span>Unsaturated fat · p12</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">7</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const plantLead = 'You may turn plant omega-3 into its active forms less efficiently, and clear fats from your blood a little more slowly. The answer to both is choosing the right fats.';\n    const fishLead = 'You may turn plant omega-3 into its active forms less efficiently, and clear fats from your blood a little more slowly. Oily fish and the right cooking fats cover both.';\n    const plantActs = (spread) => [\n      { n: 1, t: 'Add algae oil', s: 'EPA and DHA ready-made, without fish. It’s where fish get theirs.' },\n      { n: 2, t: 'Keep plant omega-3', s: 'Ground flax, chia and walnuts still help, even if less converts.' },\n      { n: 3, t: 'Cook with olive or rapeseed oil', s: 'In place of ' + spread + '. Cold-pressed where you can.' },\n      { n: 4, t: 'Fried food and pastry: occasional', s: 'The meals your body takes longest to clear fat from.' }\n    ];\n    const fishActs = (last) => [\n      { n: 1, t: 'Oily fish twice a week', s: 'Salmon, mackerel, sardines, trout or herring.' },\n      { n: 2, t: 'Keep plant omega-3 too', s: 'Ground flax, chia and walnuts add to your intake.' },\n      { n: 3, t: 'Cook with olive or rapeseed oil', s: 'In place of butter and ghee. Cold-pressed where you can.' },\n      last\n    ];\n    const C = {\n      'Vegetarian': {\n        lead: plantLead,\n        why: 'Most people get EPA and DHA ready-made from oily fish. On a vegetarian diet you rely on conversion, which is the exact step your genes slow down.',\n        actions: plantActs('butter, ghee and coconut oil'),\n        lean: ['Algae oil', 'Ground flaxseed', 'Chia seeds', 'Walnuts', 'Rapeseed oil', 'Extra virgin olive oil', 'Avocado', 'Oats'],\n        easy: ['Butter and ghee', 'Coconut and palm oil', 'Fried foods', 'Pastries and pies']\n      },\n      'Vegan': {\n        lead: plantLead,\n        why: 'Most people get EPA and DHA ready-made from oily fish. On a vegan diet you rely on conversion, which is the exact step your genes slow down.',\n        actions: plantActs('coconut oil and palm-based spreads'),\n        lean: ['Algae oil', 'Ground flaxseed', 'Chia seeds', 'Hemp seeds', 'Walnuts', 'Rapeseed oil', 'Extra virgin olive oil', 'Avocado'],\n        easy: ['Coconut and palm oil', 'Fried foods', 'Pastries and pies']\n      },\n      'Pescatarian': {\n        lead: fishLead,\n        why: 'Most people get EPA and DHA ready-made from oily fish. Because your conversion may be slower, eating it regularly matters more for you.',\n        actions: fishActs({ n: 4, t: 'Fried food and pastry: occasional', s: 'Battered fish counts too. Grill, bake or poach instead.' }),\n        lean: ['Salmon', 'Mackerel', 'Sardines', 'Trout', 'Ground flaxseed', 'Walnuts', 'Rapeseed oil', 'Extra virgin olive oil'],\n        easy: ['Butter and ghee', 'Fish and chips', 'Fried foods', 'Pastries and pies']\n      },\n      'Meat eater': {\n        lead: fishLead,\n        why: 'Most people get EPA and DHA ready-made from oily fish. Because your conversion may be slower, eating it regularly matters more for you.',\n        actions: fishActs({ n: 4, t: 'Fatty and processed meat: occasional', s: 'Swap in fish, beans or lean cuts most days.' }),\n        lean: ['Salmon', 'Mackerel', 'Sardines', 'Trout', 'Lean chicken', 'Walnuts', 'Rapeseed oil', 'Extra virgin olive oil'],\n        easy: ['Fatty and processed meats', 'Butter and ghee', 'Fried foods', 'Pastries and pies']\n      }\n    };\n    const c = C[d] || C['Vegetarian'];\n    return Object.assign({ dietLower: L[d] || 'vegetarian' }, c);\n  }\n}"}, "RptGlucose": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #e07b39\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #fce9dc; color: #9a4a12; font-size: 12px; font-weight: 700\">Priority 4 of 5</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fce9dc\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #e07b39\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L4 14h7l-1 8 9-12h-7z\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #9a4a12\">Carbs and energy</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Carbs and blood sugar</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">Your blood sugar may rise and fall more after refined carbs. How you pair and time carbs matters more for you than cutting them out.</p>\n    <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n      <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Glucose response</span><span style=\"font-size: 12px; color: #4d5a62\">Bigger swings after refined carbs and sugar</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e07b39\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e07b39\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e07b39\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e07b39\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n      <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #9a4a12; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Moderate</span></div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #0f1a0b; color: #ffffff\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 800; color: #f5b98c; white-space: nowrap\">Built on 8 genes</span>\n      <span style=\"font-size: 13px; line-height: 1.45; color: #e3e9ec\">Including TCF7L2, the strongest common genetic link to blood sugar control found in large studies.</span>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">These genes control insulin release and how your body senses and stores glucose. Each has a small effect; together they nudge you towards a stronger blood sugar response.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Sharper rises and dips can affect your energy, focus and hunger a couple of hours after eating, which links straight back to your appetite results.</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #e07b39; color: #0f1a0b; font-size: 13px; font-weight: 800\">1</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">Never carbs on their own</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{pairing}}</span></div></div>\n      <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #e07b39; color: #0f1a0b; font-size: 13px; font-weight: 800\">2</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">Go wholegrain and intact</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">Oats, brown rice, quinoa, potatoes with skins on.</span></div></div>\n      <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #e07b39; color: #0f1a0b; font-size: 13px; font-weight: 800\">3</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">Spread carbs across the day</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">A huge plate of white pasta or rice gives the sharpest rise.</span></div></div>\n      <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #e07b39; color: #0f1a0b; font-size: 13px; font-weight: 800\">4</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">Eat at regular times</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">Avoid long gaps followed by large, fast-digesting meals.</span></div></div>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Oats</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Lentils and beans</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Quinoa and bulgur</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Wholemeal bread</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Potatoes with skins</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Sweet potato</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Vegetables</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Berries</span>\n      </div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Sugary drinks</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Sweets and cakes</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Sugary cereals</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">Fruit juice</span>\n        <span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">White bread</span>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">TCF7L2 · GCK · GCKR · G6PC2 · ADCY5 · ADIPOQ · IRS1 · PPARG</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fbeed9; color: #8a4a0b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #e2a024\"></span>Snacking · p5</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #f3e6f2; color: #6b3368; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #a463a0\"></span>Protein and fullness · p5</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">8</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const P = {\n      'Vegetarian': 'Toast with eggs, fruit with yoghurt, rice with beans.',\n      'Vegan': 'Toast with peanut butter, fruit with soya yoghurt, rice with beans.',\n      'Pescatarian': 'Toast with eggs, fruit with yoghurt, rice with fish or beans.',\n      'Meat eater': 'Toast with eggs, fruit with yoghurt, rice with chicken or beans.'\n    };\n    return { dietLower: L[d] || 'vegetarian', pairing: P[d] || P['Vegetarian'] };\n  }\n}"}, "RptAppetite": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #a463a0\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #f3e6f2; color: #6b3368; font-size: 12px; font-weight: 700\">Priority 1 of 5</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #f3e6f2\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #a463a0\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3v18\"></path><path d=\"M4 3v5a3 3 0 0 0 6 0V3\"></path><path d=\"M17 21V3c-2.2 0-3.5 2.5-3.5 6s1.3 5 3.5 5\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #6b3368\">Protein · Behaviour</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Protein, fullness and snacking</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">Three of your strongest results point the same way: protein is likely to matter more than average for how full you feel and how often you snack.</p>\n    <div style=\"display: flex; flex-direction: column; gap: 6px\">\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Protein and fullness</span><span style=\"font-size: 12px; color: #4d5a62\">Protein likely drives how full you feel</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #6b3368; line-height: 1\">5/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Emerging</span></div>\n      </div>\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Protein amount</span><span style=\"font-size: 12px; color: #4d5a62\">Total protein may affect your energy more</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #a463a0\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #6b3368; line-height: 1\">5/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Emerging</span></div>\n      </div>\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Snacking and appetite</span><span style=\"font-size: 12px; color: #4d5a62\">You may feel the pull of snacks more</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e2a024\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e2a024\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e2a024\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e2a024\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e2a024\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #8a4a0b; line-height: 1\">5/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Moderate</span></div>\n      </div>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Your appetite signals and protein seem closely linked. Meals light on protein may leave you hungry sooner, and you may notice food cues, like snacks in sight, more than most.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">This isn't about willpower. How you build your meals is likely to make the biggest difference to your energy and how often you reach for snacks.</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <sc-for list=\"{{actions}}\" as=\"a\" hint-placeholder-count=\"4\">\n        <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #a463a0; color: #ffffff; font-size: 13px; font-weight: 800\">{{a.n}}</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">{{a.t}}</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{a.s}}</span></div></div>\n      </sc-for>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{lean}}\" as=\"f\" hint-placeholder-count=\"8\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{easy}}\" as=\"f\" hint-placeholder-count=\"4\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">FGF21 · FTO · TFAP2B · MC4R · BDNF</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fce9dc; color: #9a4a12; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #e07b39\"></span>Glucose · p8</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #58a754\"></span>Choline · p9</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">5</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const src = {\n      'Vegetarian': 'eggs, yoghurt, tofu, beans',\n      'Vegan': 'tofu, tempeh, beans, soya yoghurt',\n      'Pescatarian': 'eggs, fish, yoghurt, beans',\n      'Meat eater': 'eggs, chicken, fish, beans'\n    };\n    const snack = d === 'Vegan' ? 'hummus and veg, soya yoghurt, nuts' : 'hummus and veg, yoghurt, nuts';\n    const lean = {\n      'Vegetarian': ['Eggs', 'Greek yoghurt and skyr', 'Cottage cheese', 'Lentils and chickpeas', 'Tofu and tempeh', 'Edamame', 'Nuts and seeds', 'Oats'],\n      'Vegan': ['Tofu and tempeh', 'Seitan', 'Lentils and chickpeas', 'Edamame', 'Soya yoghurt', 'Soya milk', 'Nuts and seeds', 'Oats'],\n      'Pescatarian': ['Fish and seafood', 'Eggs', 'Greek yoghurt and skyr', 'Cottage cheese', 'Lentils and chickpeas', 'Tofu', 'Nuts and seeds', 'Oats'],\n      'Meat eater': ['Chicken and turkey', 'Fish', 'Eggs', 'Greek yoghurt', 'Lean red meat', 'Lentils and chickpeas', 'Nuts and seeds', 'Oats']\n    };\n    const easy = ['Low-protein meals', 'Sugary drinks', 'Sweets as snacks', 'High-sugar protein bars'];\n    if (d === 'Meat eater') easy.push('Processed meats');\n    return {\n      dietLower: L[d] || 'vegetarian',\n      actions: [\n        { n: 1, t: 'Protein at every meal', s: 'A palm-sized portion, breakfast included: ' + (src[d] || src['Vegetarian']) + '.' },\n        { n: 2, t: 'Spread it evenly', s: 'Similar amounts at each meal beat one large protein meal.' },\n        { n: 3, t: 'Plan snacks, don’t fight them', s: 'Pair each with protein or fibre: ' + snack + '.' },\n        { n: 4, t: 'Change what’s in sight', s: 'Fruit and nuts on show, biscuits in a cupboard.' }\n      ],\n      lean: lean[d] || lean['Vegetarian'],\n      easy: easy\n    };\n  }\n}"}, "DNASample": {"tpl": "<div style=\"width: 100%; background: #f5f5f3; padding: 16px 24px 0; box-sizing: border-box; overflow: hidden\">\n  <div style=\"max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px\">\n    <!-- Floating rounded announcement banner -->\n    <div style=\"display: flex; justify-content: center\">\n      <a href=\"#\" style=\"display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #141a12; color: #ffffff; box-shadow: 0 8px 24px rgba(20,26,18,0.12); max-width: 100%; box-sizing: border-box\">\n        <span style=\"display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0\">New</span>\n        <span class=\"banner-text-long\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">Every McDonald's item ranked by sugar, salt and calories for your age</span>\n        <span class=\"banner-text-short\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap\">McDonald's, ranked for your age</span>\n        <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n        </span>\n      </a>\n    </div>\n\n    <!-- Navigation: floating white pill -->\n    <div style=\"display: flex; justify-content: center\">\n      <nav aria-label=\"Main\" style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 8px 8px 8px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 12px 32px rgba(20,26,18,0.10), 0 2px 6px rgba(20,26,18,0.05)\">\n        <a href=\"#\" style=\"display: flex; align-items: center; gap: 10px; flex-shrink: 0\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #58a754\">\n            <svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f1a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21c-4.4 0-8-3.1-8-7.5C4 8 9 4 12 3c3 1 8 5 8 10.5 0 4.4-3.6 7.5-8 7.5Z\"></path><path d=\"M12 21V11\"></path></svg>\n          </span>\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em\">Boone</span>\n        </a>\n\n        <div class=\"nav-links\" style=\"display: flex; align-items: center; gap: 2px; min-width: 0\">\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Food database\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">The app\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Clubs and gyms</a>\n          <div class=\"nav-dd\" style=\"position: relative\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" aria-current=\"page\" aria-haspopup=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #f3f8ef; color: #2f5e1b\">DNA <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg></a><div class=\"nav-dd-panel\" style=\"position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; z-index: 60\"><div style=\"width: 330px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 24px 48px rgba(20,26,18,0.14)\"><a class=\"nav-dd-item\" href=\"/dna-nutrition-test\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Overview</span><span style=\"font-size: 13px; color: #5d676d\">What the test is and how it works</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">What it tests</span><span style=\"font-size: 13px; color: #5d676d\">23 results across five areas of your diet</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/sample-report\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Sample reports</span><span style=\"font-size: 13px; color: #5d676d\">Read or download a real report</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#by-diet\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">By diet</span><span style=\"font-size: 13px; color: #5d676d\">Vegetarian, vegan, pescatarian, meat eater</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Genes and method</span><span style=\"font-size: 13px; color: #5d676d\">All 48 genes and how we score them</span></a><a href=\"/dna-nutrition-test#order\" style=\"margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Order your DNA test<span>£198</span></a></div></div></div>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Pricing</a>\n        </div>\n\n        <div style=\"display: flex; align-items: center; gap: 6px; flex-shrink: 0\">\n          <a class=\"nav-signin nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500\">Sign in</a>\n          <a class=\"nav-cta\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Get the app</a>\n          <button class=\"nav-menu\" type=\"button\" aria-label=\"Open menu\" style=\"display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #f3f8ef; color: #1b2b36; cursor: pointer\">\n            <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 17h16\"></path></svg>\n          </button>\n        </div>\n      </nav>\n    </div>\n\n    <nav aria-label=\"DNA test\" style=\"display: flex; justify-content: center\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 6px 6px 6px 18px; border-radius: 22px; background: #e3f1dd\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>DNA test</span>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 2px\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Overview</a><a class=\"nav-link\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">What it tests</a><a class=\"\" href=\"/dna-nutrition-test/sample-report\" aria-current=\"page\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: #1b2b36; color: #ffffff\">Sample reports</a><a class=\"nav-link\" href=\"/dna-nutrition-test#by-diet\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">By diet</a><a class=\"nav-link\" href=\"/dna-nutrition-test/genes\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Genes and method</a></div>\n        <a class=\"nav-cta\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap\">Order · £198</a>\n      </div>\n    </nav>\n\n\n    <section style=\"display: flex; flex-direction: column; gap: 22px; padding: 56px 24px 40px; max-width: 980px\">\n      <nav aria-label=\"Breadcrumb\" style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px\"><a href=\"/\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">Home</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><a href=\"/dna-nutrition-test\" style=\"color: #4d5a62; text-decoration: underline; text-underline-offset: 3px\">DNA test</a><span aria-hidden=\"true\" style=\"color: #9aa8b0\">/</span><span aria-current=\"page\" style=\"color: #1b2b36; font-weight: 600\">Sample report</span></nav>\n      <h1 class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.045em\">See exactly <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">what you get</span></h1>\n      <p style=\"margin: 0; font-size: 21px; line-height: 1.55; color: #4d5a62; max-width: 760px\">A real Boone DNA report with the name removed. Pick your diet to see how the food advice changes. The genetic results stay the same.</p>\n      <div role=\"tablist\" aria-label=\"Choose a diet\" style=\"display: flex; flex-wrap: wrap; gap: 8px\"><sc-for list=\"{{tabsLight}}\" as=\"t\" hint-placeholder-count=\"4\"><button class=\"tab-btn\" type=\"button\" role=\"tab\" aria-selected=\"{{t.selected}}\" onClick=\"{{t.pick}}\" style=\"height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; {{t.style}}\">{{t.label}}</button></sc-for></div>\n    </section>\n\n  </div>\n\n  <section aria-label=\"Sample report viewer\" style=\"max-width: 1280px; margin: 0 auto; padding: 8px 0 96px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px\">\n    <div style=\"flex: 0 1 620px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; border-radius: 32px; background: #e9ece6\">\n      <sc-if value=\"{{show_Main}}\" hint-placeholder-val=\"{{ true }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_HowToRead}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptHowToRead\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Profile}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptProfile\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_AllResults}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptAllResults\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Appetite}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptAppetite\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_B12}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptB12\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Omega3}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptOmega3\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Glucose}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptGlucose\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Choline}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptCholine\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_VitaminC}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptVitaminC\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_WorthKnowing}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptWorthKnowing\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_NoChange}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptNoChange\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Genes1}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptGenes1\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_Genes2}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptGenes2\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n<sc-if value=\"{{show_About}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 572px; height: 809px; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 30px 60px rgba(27,43,54,0.16); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.72); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptAbout\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n      <div style=\"display: flex; align-items: center; justify-content: space-between; width: 572px; max-width: 100%\">\n        <button type=\"button\" onClick=\"{{prev}}\" class=\"btn-soft\" style=\"height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: #ffffff; font-family: inherit; font-size: 15px; font-weight: 700; color: #1b2b36; cursor: pointer\">← Previous</button>\n        <span style=\"font-size: 15px; font-weight: 600; color: #4d5a62\">Page {{pageNo}} of 15</span>\n        <button type=\"button\" onClick=\"{{next}}\" class=\"btn-soft\" style=\"height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: #ffffff; font-family: inherit; font-size: 15px; font-weight: 700; color: #1b2b36; cursor: pointer\">Next →</button>\n      </div>\n    </div>\n    <div style=\"flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px\">\n      <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 24px; background: #1b2b36; color: #ffffff\">\n        <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">You’re reading</span>\n        <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em\">The {{dietLower}} sample</span>\n        <span style=\"font-size: 15px; line-height: 1.5; color: #c9d3d8\">15 pages · food advice for a {{dietLower}} diet</span>\n        <a href=\"{{pdfHref}}\" style=\"margin-top: 12px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 16px; font-weight: 700\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4v11\"></path><path d=\"m7 10 5 5 5-5\"></path><path d=\"M5 20h14\"></path></svg> Download this PDF</a>\n      </div>\n      <nav aria-label=\"Report pages\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 24px; background: #ffffff; border: 1px solid #e3e8df\">\n        <sc-for list=\"{{pages}}\" as=\"p\" hint-placeholder-count=\"15\">\n          <button class=\"page-btn\" type=\"button\" onClick=\"{{p.pick}}\" aria-current=\"{{p.current}}\" style=\"display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; border-radius: 14px; font-family: inherit; text-align: left; cursor: pointer; {{p.style}}\">\n            <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font-size: 13px; font-weight: 800; {{p.numStyle}}\">{{p.n}}</span>\n            <span style=\"font-size: 15px; font-weight: 600; color: #1b2b36\">{{p.title}}</span>\n            <span style=\"width: 10px; height: 10px; border-radius: 999px; background: {{p.dot}}\"></span>\n          </button>\n        </sc-for>\n      </nav>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"dl-heading\" style=\"margin: 0 -24px; background: #ffffff; padding: 112px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px\">\n      <div style=\"display: flex; flex-direction: column; gap: 14px; max-width: 760px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">Download a sample</span>\n        <h2 id=\"dl-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Four versions, <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">one for each diet</span></h2>\n        <p style=\"margin: 0; font-size: 19px; line-height: 1.55; color: #4d5a62\">Share one with someone who eats differently. Same results, different food advice.</p>\n      </div>\n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px\">\n        <sc-for list=\"{{dl}}\" as=\"d\" hint-placeholder-count=\"4\">\n          <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 28px; background: #f5f5f3\">\n            <sc-if value=\"{{d.is_Vegetarian}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 206px; height: 292px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.26); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"Vegetarian\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n            <sc-if value=\"{{d.is_Vegan}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 206px; height: 292px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.26); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"Vegan\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n            <sc-if value=\"{{d.is_Pescatarian}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 206px; height: 292px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.26); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"Pescatarian\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n            <sc-if value=\"{{d.is_Meat}}\" hint-placeholder-val=\"{{ false }}\"><div style=\"flex-shrink: 0; width: 206px; height: 292px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); \"><div style=\"width: 794px; height: 1123px; transform: scale(0.26); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"Meat eater\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div></sc-if>\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em\">{{d.name}}</span>\n            <span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{d.blurb}}</span>\n            <div style=\"display: flex; flex-wrap: wrap; gap: 8px\">\n              <a href=\"{{d.pdf}}\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4v11\"></path><path d=\"m7 10 5 5 5-5\"></path><path d=\"M5 20h14\"></path></svg> PDF</a>\n              <a href=\"{{d.href}}\" style=\"display: inline-flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #c9d3d8; font-size: 15px; font-weight: 700\">About this diet</a>\n            </div>\n          </div>\n        </sc-for>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"reveal\" aria-labelledby=\"notice-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 112px 0 96px; display: flex; flex-direction: column; gap: 36px\">\n    <h2 id=\"notice-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; max-width: 820px\">What you’ll notice <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">in your own report</span></h2>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px\">\n      <sc-for list=\"{{notice}}\" as=\"n\" hint-placeholder-count=\"3\">\n        <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 28px; background: #ffffff; border: 1px solid #e3e8df\">\n          <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2f5e1b\">{{n.where}}</span>\n          <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">{{n.t}}</h3>\n          <p style=\"margin: 0; font-size: 16px; line-height: 1.6; color: #4d5a62\">{{n.s}}</p>\n        </div>\n      </sc-for>\n    </div>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.55; color: #5d676d; max-width: 820px\">Your report will show your own results, so your priorities and scores will differ from this sample. For information and education; not a medical or diagnostic test.</p>\n  </section>\n\n  <section aria-labelledby=\"cta-heading\" style=\"max-width: 1280px; margin: 0 auto 96px; box-sizing: border-box; background: #58a754; border-radius: 40px; padding: 80px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden\">\n    <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n      <h2 id=\"cta-heading\" class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #ffffff\">Your genes,<br>your report.</h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #13250d; max-width: 560px\">Order the test and get a report like this one, written for the way you eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 10px\">\n      <a class=\"store-btn\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test · £198</a>\n      <span style=\"font-size: 14px; font-weight: 600; color: #13250d\">Free UK delivery · Secure checkout</span>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer style=\"margin: 0 -24px; background: #1b2b36; color: #c9d3d8; padding: 88px 24px 40px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px\">\n      <div style=\"display: flex; flex-wrap: wrap; gap: 56px\">\n        <div style=\"flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px\">\n          <a href=\"#\" style=\"display: flex; align-items: center\"><img src=\"/_blob/5930dc2c89021dbab3e64b01c6af9d7b\" alt=\"Boone Logo: Personalised Nutrition\" style=\"height: 44px; width: auto; display: block\"></a>\n          <p style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; max-width: 380px\">Personalised nutrition, aligned with your biology.</p>\n          <div style=\"display: flex; flex-direction: column; gap: 12px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Get the app</span><div style=\"display: flex; flex-wrap: wrap; gap: 10px\"><a href=\"https://apps.apple.com/gb/app/boone/id6739210113\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-1-2.4-4zM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Download on the</span><span style=\"font-size: 17px; font-weight: 700\">App Store</span></span></a><a href=\"https://play.google.com/store/apps/details?id=com.boone.boone&amp;hl=en_GB\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M4.5 2.8 13.7 12l-9.2 9.2c-.3-.2-.5-.6-.5-1V3.8c0-.4.2-.8.5-1zM14.7 13l2.4 2.4-11 6.3zM14.7 11 6.1 2.3l11 6.3zM18.3 9.3l2.6 1.5c.8.5.8 1.8 0 2.3l-2.6 1.5L15.6 12z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Get it on</span><span style=\"font-size: 17px; font-weight: 700\">Google Play</span></span></a></div></div>\n          <form style=\"display: flex; flex-direction: column; gap: 10px; max-width: 420px\"><label for=\"footer-email\" style=\"font-size: 15px; color: #c9d3d8\">Nutrition tips and updates, once a month.</label><div style=\"display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px\"><input id=\"footer-email\" type=\"email\" placeholder=\"Your email\" style=\"flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #ffffff\"><button type=\"submit\" style=\"flex-shrink: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #58a754; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer\">Subscribe</button></div><span style=\"font-size: 13px; color: #9aa8b0\">See our <a href=\"/privacy-policy\" style=\"color: #c9d3d8; text-decoration: underline\">privacy policy</a> for details.</span></form>\n        </div>\n        <nav aria-label=\"Footer\" style=\"flex: 2.4 1 680px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px\"><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">The app</span><a class=\"foot-link\" href=\"/how-it-works\">How it works</a><a class=\"foot-link\" href=\"/app\">Features</a><a class=\"foot-link\" href=\"/science\">The science</a><a class=\"foot-link\" href=\"/dna-nutrition-test\">DNA test</a><a class=\"foot-link\" href=\"/activate\">Activate your test</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Food database</span><a class=\"foot-link\" href=\"/food-database\">Search the database</a><a class=\"foot-link\" href=\"/restaurant\">Restaurants</a><a class=\"foot-link\" href=\"/brand\">Brands</a><a class=\"foot-link\" href=\"/foods\">Everyday foods</a><a class=\"foot-link\" href=\"/kids-nutrition-age-adjusted-nutritional-info\">Kids nutrition</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Company</span><a class=\"foot-link\" href=\"/about\">About</a><a class=\"foot-link\" href=\"/press\">Press and recognition</a><a class=\"foot-link\" href=\"/sport\">For clubs and gyms</a><a class=\"foot-link\" href=\"/methodology\">Methodology</a><a class=\"foot-link\" href=\"/articles\">Articles</a><a class=\"foot-link\" href=\"/contact\">Contact</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Legal</span><a class=\"foot-link\" href=\"/terms-conditions\">Terms and conditions</a><a class=\"foot-link\" href=\"/privacy-policy\">Privacy policy</a><a class=\"foot-link\" href=\"/cookie-policy\">Cookie policy</a><a class=\"foot-link\" href=\"/app-usage-policy\">App usage policy</a><a class=\"foot-link\" href=\"/returns\">Returns</a><a class=\"foot-link\" href=\"/delivery\">Delivery</a></div></nav>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12)\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: #9aa8b0\"><span style=\"color: #c9d3d8\">© 2026 Boone App Ltd. All rights reserved.</span><span>Registered in England and Wales, company no. <a href=\"https://find-and-update.company-information.service.gov.uk/company/15774886\" style=\"color: #c9d3d8; text-decoration: underline\">15774886</a>. Registered office: Centrum, Colney Lane, Colney, Norwich NR4 7UG.</span></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 10px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Follow Boone</span><div style=\"display: flex; gap: 10px\"><a href=\"https://www.linkedin.com/company/boone-app\" aria-label=\"Boone on LinkedIn\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M4 9h3.2v11H4zM5.6 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM9.5 9h3.1v1.5c.5-.9 1.7-1.8 3.4-1.8 3.4 0 4 2.2 4 5.1V20h-3.2v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V20H9.5z\" fill=\"#ffffff\"></path></svg></a><a href=\"https://www.instagram.com/boonenutrition/\" aria-label=\"Boone on Instagram\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></rect><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></circle><circle cx=\"17.2\" cy=\"6.8\" r=\"1.2\" fill=\"#ffffff\"></circle></svg></a><a href=\"https://www.tiktok.com/@booneapp\" aria-label=\"Boone on TikTok\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3c.3 2.2 1.7 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.9-1.1v6.1a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.3a2.4 2.4 0 1 0 1.5 2.2V3z\" fill=\"#ffffff\"></path></svg></a></div></div>\n      </div>\n    </div>\n  </footer>\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const DEFAULT_DIET = 'Vegan';\n    const DIETS = ['Vegetarian', 'Vegan', 'Pescatarian', 'Meat eater'];\n    const LOWER = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const SLUG = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eater' };\n    const st = this.state || {};\n    const diet = st.diet || DEFAULT_DIET;\n    const mkTabs = (dark) => DIETS.map((d) => {\n      const on = d === diet;\n      return {\n        label: d, selected: on ? 'true' : 'false',\n        style: on ? 'background: #58a754; color: #0f1a0b; border-color: #58a754' : (dark ? 'background: transparent; color: #e3e9ec; border-color: rgba(255,255,255,0.28)' : 'background: #ffffff; color: #1b2b36; border-color: #dfe5db'),\n        pick: () => this.setState({ diet: d })\n      };\n    });\n\n    const PAGES = [[\"Main\", \"Cover\", \"#c9d3d8\"], [\"HowToRead\", \"How to read\", \"#c9d3d8\"], [\"Profile\", \"Your profile\", \"#c9d3d8\"], [\"AllResults\", \"All 23 results\", \"#c9d3d8\"], [\"Appetite\", \"Protein and appetite\", \"#a463a0\"], [\"B12\", \"Vitamin B12\", \"#58a754\"], [\"Omega3\", \"Omega-3 and blood fats\", \"#3f86c0\"], [\"Glucose\", \"Carbs and blood sugar\", \"#e07b39\"], [\"Choline\", \"Choline and B vitamins\", \"#58a754\"], [\"VitaminC\", \"Vitamin C and calcium\", \"#58a754\"], [\"WorthKnowing\", \"Worth knowing\", \"#e2a024\"], [\"NoChange\", \"No change needed\", \"#c9d3d8\"], [\"Genes1\", \"The genes, A to G\", \"#c9d3d8\"], [\"Genes2\", \"The genes, G to V\", \"#c9d3d8\"], [\"About\", \"About the report\", \"#c9d3d8\"]];\n    const idx = st.page || 0;\n    const go = (i) => this.setState({ page: (i + 15) % 15 });\n    const pages = PAGES.map((p, i) => ({\n      n: i + 1, title: p[1], dot: p[2], current: i === idx ? 'page' : 'false', pick: () => go(i),\n      style: i === idx ? 'background: #e3f1dd' : 'background: transparent',\n      numStyle: i === idx ? 'background: #58a754; color: #0f1a0b' : 'background: #f1f4ef; color: #1b2b36'\n    }));\n    const out = { diet: diet, dietLower: LOWER[diet], tabsLight: mkTabs(false), pages: pages, pageNo: idx + 1,\n      prev: () => go(idx - 1), next: () => go(idx + 1), pdfHref: '/downloads/boone-sample-dna-report-' + SLUG[diet] + '.pdf' };\n    PAGES.forEach((p, i) => { out['show_' + p[0]] = i === idx; });\n    const BL = {\n      'Vegetarian': 'B12 from dairy and eggs, algae oil for omega-3, eggs and soya for choline.',\n      'Vegan': 'A daily B12 supplement, algae oil, and soya and fortified foods doing the heavy lifting.',\n      'Pescatarian': 'Oily fish for omega-3 and B12, sardines for calcium, eggs and fish for choline.',\n      'Meat eater': 'Plenty of B12 and choline sources; the focus shifts to carbs, blood fats and folate.'\n    };\n    out.dl = DIETS.map((d) => ({ name: d, blurb: BL[d], pdf: '/downloads/boone-sample-dna-report-' + SLUG[d] + '.pdf', href: '/dna-nutrition-test/' + SLUG[d],\n      is_Vegetarian: d === 'Vegetarian', is_Vegan: d === 'Vegan', is_Pescatarian: d === 'Pescatarian', is_Meat: d === 'Meat eater' }));\n    out.notice = [\n      { where: 'Page 3', t: 'Your five priorities, first', s: 'You don’t have to read 23 results to know what to do. Your profile page ranks what matters most for you.' },\n      { where: 'Pages 5 to 10', t: 'Actions, not just scores', s: 'Every Focus result gets four actions, foods to lean on and foods to go easy on, all written for your diet.' },\n      { where: 'Pages 13 and 14', t: 'Every gene explained', s: 'All 48 genes, what each one does and which results it feeds into, in plain English.' }\n    ];\n    return out;\n  }\n}"}, "RptVitaminC": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">Priority 5 of 5 · Part 2</span>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #e3f1dd\">\n    <div style=\"display: flex; align-items: center; gap: 16px\">\n      <span style=\"display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #58a754\"><svg aria-hidden=\"true\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 3v18\"></path><path d=\"M3 12h18\"></path><path d=\"M5.6 5.6l12.8 12.8\"></path><path d=\"M18.4 5.6L5.6 18.4\"></path></svg></span>\n      <div style=\"display: flex; flex-direction: column; gap: 4px\">\n        <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 2px 9px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 11.5px; font-weight: 700\">Focus</span><span style=\"font-size: 12.5px; font-weight: 700; color: #2f5e1b\">Vitamins and minerals</span></div>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">Vitamin C and calcium</h1>\n      </div>\n    </div>\n    <p style=\"margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a52\">{{lead}}</p>\n    <div style=\"display: flex; flex-direction: column; gap: 6px\">\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Vitamin C</span><span style=\"font-size: 12px; color: #4d5a62\">May absorb less from food · based on one gene</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #2f5e1b; line-height: 1\">5/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Emerging</span></div>\n      </div>\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #ffffff\">\n        <div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14.5px; font-weight: 700\">Calcium</span><span style=\"font-size: 12px; color: #4d5a62\">Some variation in how vitamin D helps absorb it</span></div>\n        <div style=\"display: flex; flex-direction: column; gap: 4px\"><div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 10.5px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 1px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #2f5e1b; line-height: 1\">4/5</span><span style=\"font-size: 10.5px; color: #4d5a62\">Emerging</span></div>\n      </div>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px\">\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What this means</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">SLC23A1 moves vitamin C from your gut into your body. VDR and CYP2R1 shape how vitamin D helps you take in calcium. A little less may go in from the same food.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 5px\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Why it matters</h2>\n      <p style=\"margin: 0; font-size: 13.5px; line-height: 1.5; color: #4d5a62\">{{why}}</p>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">What to do</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px\">\n      <sc-for list=\"{{actions}}\" as=\"a\" hint-placeholder-count=\"4\">\n        <div style=\"display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #e6e9e4\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 13px; font-weight: 800\">{{a.n}}</span><div style=\"display: flex; flex-direction: column; gap: 2px\"><span style=\"font-size: 14px; font-weight: 700\">{{a.t}}</span><span style=\"font-size: 12.5px; line-height: 1.4; color: #4d5a62\">{{a.s}}</span></div></div>\n      </sc-for>\n</div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px\">\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #e3f1dd\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2f5e1b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"></path></svg>Lean on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{lean}}\" as=\"f\" hint-placeholder-count=\"8\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #fbeed9\">\n      <span style=\"display: flex; align-items: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: #8a4a0b\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8a4a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 12h12\"></path></svg>Go easy on</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><sc-for list=\"{{easy}}\" as=\"f\" hint-placeholder-count=\"3\"><span style=\"padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 12.5px; font-weight: 600\">{{f}}</span></sc-for></div>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Genes behind this · p13</span>\n      <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.02em\">SLC23A1 · VDR · CYP2R1</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4d5a62\">Linked results</span>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 6px\"><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #58a754\"></span>Iron · p12</span><span style=\"display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\"><span style=\"width: 7px; height: 7px; border-radius: 999px; background: #58a754\"></span>Vitamin D · p11</span></div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">10</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const lead = 'You may absorb vitamin C and calcium a little less efficiently. Neither calls for supplements; both reward getting a little every day.';\n    const c1 = { n: 1, t: 'Vitamin C with most meals', s: 'Peppers, citrus, berries, kiwi or broccoli. Little and often.' };\n    const c2 = { n: 2, t: 'Pair it with iron-rich plants', s: 'Beans with peppers, lentils with tomatoes.' };\n    const dD = { n: 4, t: 'Look after winter vitamin D', s: 'Calcium needs it to be absorbed. See page 11.' };\n    const fruit = ['Red and orange peppers', 'Citrus and kiwi', 'Berries and blackcurrants', 'Broccoli and kale'];\n    const C = {\n      'Vegetarian': {\n        lead: lead,\n        why: 'You store little vitamin C, so a daily supply counts. It also helps you absorb iron from plants, useful as a vegetarian. Calcium contributes to normal bones and muscles.',\n        actions: [c1, c2, { n: 3, t: 'Calcium three times a day', s: 'Dairy, calcium-set tofu or fortified plant milk at each meal.' }, dD],\n        lean: fruit.concat(['Milk, yoghurt and cheese', 'Calcium-set tofu', 'Fortified plant milks', 'Tahini']),\n        easy: ['Fruit tinned in syrup', 'Unfortified plant milks', 'Lots of salt']\n      },\n      'Vegan': {\n        lead: lead,\n        why: 'You store little vitamin C, so a daily supply counts. It also helps you absorb iron from plants, which is all your iron on a vegan diet. Calcium contributes to normal bones and muscles.',\n        actions: [c1, c2, { n: 3, t: 'Calcium three times a day', s: 'Calcium-set tofu, fortified plant milk or fortified soya yoghurt at each meal.' }, dD],\n        lean: fruit.concat(['Calcium-set tofu', 'Fortified plant milks', 'Fortified soya yoghurt', 'Tahini']),\n        easy: ['Fruit tinned in syrup', 'Unfortified or organic plant milks', 'Lots of salt']\n      },\n      'Pescatarian': {\n        lead: lead,\n        why: 'You store little vitamin C, so a daily supply counts. It also helps you absorb iron from plants, useful when you are not eating meat. Calcium contributes to normal bones and muscles.',\n        actions: [c1, c2, { n: 3, t: 'Calcium three times a day', s: 'Dairy, calcium-set tofu or tinned sardines with their bones.' }, dD],\n        lean: fruit.concat(['Milk, yoghurt and cheese', 'Tinned sardines with bones', 'Calcium-set tofu', 'Fortified plant milks']),\n        easy: ['Fruit tinned in syrup', 'Unfortified plant milks', 'Lots of salt']\n      },\n      'Meat eater': {\n        lead: lead,\n        why: 'You store little vitamin C, so a daily supply counts. It also helps you absorb iron from beans and greens, though meat gives you iron that is absorbed easily anyway. Calcium contributes to normal bones and muscles.',\n        actions: [c1, { n: 2, t: 'Pair it with plant iron', s: 'Beans with peppers, greens with a squeeze of lemon.' }, { n: 3, t: 'Calcium three times a day', s: 'Milk, yoghurt or cheese at each meal is the easiest route.' }, dD],\n        lean: fruit.concat(['Milk and yoghurt', 'Cheese', 'Tinned sardines with bones', 'Fortified plant milks']),\n        easy: ['Fruit tinned in syrup', 'Unfortified plant milks', 'Lots of salt']\n      }\n    };\n    return Object.assign({ dietLower: L[d] || 'vegetarian' }, C[d] || C['Vegetarian']);\n  }\n}"}, "RptNoChange": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 14px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e7efe3; color: #2f5e1b; font-size: 12px; font-weight: 700\">No change needed</span>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 6px\">\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05\">Where your habits lead</h1>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.5; color: #4d5a62\">On these nine, your genes aren't asking for anything special. Your everyday choices matter more than your DNA.</p>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 7px\">\n    <sc-for list=\"{{rows}}\" as=\"r\" hint-placeholder-count=\"9\">\n      <div style=\"display: grid; grid-template-columns: 6px 150px minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 10px 14px 10px 10px; border-radius: 14px; background: {{r.tint}}\">\n        <span style=\"border-radius: 3px; background: {{r.c}}\"></span>\n        <div style=\"display: flex; flex-direction: column; gap: 5px; justify-content: center\">\n          <span style=\"font-size: 14.5px; font-weight: 700\">{{r.name}}</span>\n          <div style=\"display: flex; align-items: center; gap: 6px\">\n            <div style=\"display: flex; gap: 2px\"><sc-for list=\"{{r.segs}}\" as=\"s\" hint-placeholder-count=\"5\"><span style=\"width: 13px; height: 8px; border-radius: 2px; background: {{s.bg}}\"></span></sc-for></div>\n            <span style=\"font-size: 12px; font-weight: 800; color: {{r.deep}}\">{{r.score}}/5</span>\n          </div>\n          <span style=\"font-size: 10.5px; font-weight: 600; color: #4d5a62\">{{r.genes}}</span>\n        </div>\n        <div style=\"display: flex; flex-direction: column; gap: 2px; justify-content: center\">\n          <span style=\"font-size: 13.5px; font-weight: 700; line-height: 1.35\">{{r.result}}</span>\n          <span style=\"font-size: 12.5px; line-height: 1.45; color: #3d4a52\">{{r.tip}}</span>\n        </div>\n      </div>\n    </sc-for>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">12</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const TT = {\n      'Vegetarian': {\n        sat: 'Standard advice applies: keep butter, ghee, cream and coconut oil occasional.',\n        vitA: 'Carrots, squash, sweet potato, leafy greens, eggs and dairy cover you.',\n        iron: 'Pair beans and greens with vitamin C; keep tea and coffee an hour away from iron-rich meals.',\n        lac: 'If dairy still gives you symptoms, something else may be the cause. Speak to your GP.'\n      },\n      'Vegan': {\n        sat: 'Standard advice applies: keep coconut oil, palm oil and coconut-based products occasional.',\n        vitA: 'Orange and green veg cover you: carrots, squash, sweet potato, kale and spinach.',\n        iron: 'All your iron comes from plants, so pair beans, lentils and greens with vitamin C; keep tea and coffee an hour away from meals.',\n        lac: 'Not relevant on a vegan diet, but useful to know if you ever eat dairy.'\n      },\n      'Pescatarian': {\n        sat: 'Standard advice applies: keep butter, cream, cheese and coconut oil occasional.',\n        vitA: 'Carrots, squash, sweet potato, leafy greens, eggs, dairy and oily fish cover you.',\n        iron: 'Pair beans and greens with vitamin C; shellfish such as mussels add easily absorbed iron. Keep tea and coffee away from meals.',\n        lac: 'If dairy still gives you symptoms, something else may be the cause. Speak to your GP.'\n      },\n      'Meat eater': {\n        sat: 'Standard advice applies: keep fatty and processed meats, butter and cream occasional.',\n        vitA: 'Carrots, squash, sweet potato, leafy greens, eggs and dairy cover you. Liver is very high, so once a week at most.',\n        iron: 'Red meat is the best-absorbed source; beans and greens with vitamin C add more. Keep red and processed meat to about 70 g a day.',\n        lac: 'If dairy still gives you symptoms, something else may be the cause. Speak to your GP.'\n      }\n    };\n    const T = TT[d] || TT['Vegetarian'];\n    const A = {\n      fats: { c: '#3f86c0', tint: '#e2edf6', deep: '#1b4a63' },\n      vit: { c: '#58a754', tint: '#e3f1dd', deep: '#2f5e1b' },\n      beh: { c: '#e2a024', tint: '#fbeed9', deep: '#8a4a0b' }\n    };\n    const row = (k, name, score, result, tip, genes) => ({\n      name: name, score: score, result: result, tip: tip, genes: genes,\n      c: A[k].c, tint: A[k].tint, deep: A[k].deep,\n      segs: [1, 2, 3, 4, 5].map((i) => ({ bg: i <= score ? A[k].c : '#ffffff' }))\n    });\n    return {\n      dietLower: L[d] || 'vegetarian',\n      rows: [\n        row('fats', 'Saturated fat', 2, 'Little genetic effect on how you handle saturated fat.', T.sat, 'APOA2 · APOA5 · FTO · PPARG'),\n        row('fats', 'Unsaturated fat', 1, 'A typical response to olive oil, nuts and seeds.', 'Keep using them as your everyday fats.', 'LPL'),\n        row('vit', 'Vitamin A', 2, 'You convert beta-carotene from plants as expected.', T.vitA, 'BCO1 · RBP4 · TTR'),\n        row('vit', 'Iron', 1, 'Typical iron absorption.', T.iron, 'HFE · TF · TMPRSS6'),\n        row('vit', 'Sodium', 1, 'No known genetic effect on how you handle salt.', 'UK advice is under 6 g of salt a day. Most comes from bread, sauces and ready meals.', 'ADD1 · CYP1A1'),\n        row('vit', 'Vitamin E', 1, 'No known genetic effect on vitamin E.', 'Nuts, seeds, avocado and cold-pressed oils provide plenty.', 'CYP4F2 · SCARB1'),\n        row('vit', 'Vitamin K', 1, 'No known genetic effect on vitamin K.', 'Greens, broccoli and sprouts are the main sources. On blood thinners? Keep intake steady and ask your GP or pharmacist first.', 'CYP4F2'),\n        row('beh', 'Lactose', 0, 'You are likely to digest lactose normally as an adult.', T.lac, 'MCM6'),\n        row('beh', 'Bitter taste', 1, 'No strong genetic effect on how bitter greens taste to you.', 'Taste shouldn’t put you off the broccoli, sprouts and kale that help your other results.', 'TAS2R38')\n      ]\n    };\n  }\n}"}, "RptHowToRead": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 60px 40px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 20px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -60px 22px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">Before you start</span>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05\">How to read this report</h1>\n    <p style=\"margin: 0; font-size: 16px; line-height: 1.5; color: #4d5a62; text-wrap: pretty\">Every result tells you four things: its area, how much say your genes have, what to do about it, and how strong the science is.</p>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #f5f5f3\">\n    <div style=\"display: flex; align-items: baseline; justify-content: space-between\">\n      <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700\">1. The area, shown by colour</h2>\n      <span style=\"font-size: 12.5px; font-weight: 600; color: #4d5a62\">Colour never means good or bad</span>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px\">\n      <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #fce9dc\"><span style=\"width: 100%; height: 8px; border-radius: 4px; background: #e07b39\"></span><span style=\"font-size: 13px; font-weight: 700; color: #9a4a12\">Carbs and energy</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #e2edf6\"><span style=\"width: 100%; height: 8px; border-radius: 4px; background: #3f86c0\"></span><span style=\"font-size: 13px; font-weight: 700; color: #1b4a63\">Fats</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #f3e6f2\"><span style=\"width: 100%; height: 8px; border-radius: 4px; background: #a463a0\"></span><span style=\"font-size: 13px; font-weight: 700; color: #6b3368\">Protein</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #e3f1dd\"><span style=\"width: 100%; height: 8px; border-radius: 4px; background: #58a754\"></span><span style=\"font-size: 13px; font-weight: 700; color: #2f5e1b\">Vitamins and minerals</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #fbeed9\"><span style=\"width: 100%; height: 8px; border-radius: 4px; background: #e2a024\"></span><span style=\"font-size: 13px; font-weight: 700; color: #8a4a0b\">Behaviour</span></div>\n    </div>\n  </section>\n\n  <section style=\"display: flex; flex-direction: column; gap: 10px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700\">2. Genetic influence, 0 to 5</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px\">\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid #e6e9e4\">\n        <div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div>\n        <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">0 to 1 · Little</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #4d5a62\">Your genes aren't steering this. Your habits do the work.</span>\n      </div>\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid #e6e9e4\">\n        <div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #e6e9e4\"></span></div>\n        <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">2 to 3 · Some</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #4d5a62\">Your genes give this a gentle nudge.</span>\n      </div>\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid #e6e9e4\">\n        <div style=\"display: flex; gap: 3px\"><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span><span style=\"flex: 1; height: 10px; border-radius: 3px; background: #58a754\"></span></div>\n        <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">4 to 5 · Strong</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #4d5a62\">Your genes likely shape how you respond. Small changes go furthest here.</span>\n      </div>\n    </div>\n    <p style=\"margin: 0; padding: 12px 16px; border-radius: 12px; background: #0f1a0b; color: #ffffff; font-size: 14.5px; line-height: 1.5\"><strong style=\"color: #9fd49a\">A high score isn't bad and a low score isn't good.</strong> It shows where your genes have the most say, so you know where to put your effort.</p>\n  </section>\n\n  <section style=\"display: flex; flex-direction: column; gap: 10px\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700\">3. What to do with it</h2>\n    <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px\">\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #1b2b36; color: #ffffff\">\n        <span style=\"align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #ffffff; color: #1b2b36; font-size: 12px; font-weight: 700\">Focus</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #e3e9ec\">Strong genetic influence. Gets a full page with specific actions.</span>\n      </div>\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #fbeed9\">\n        <span style=\"align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 12px; font-weight: 700\">Worth knowing</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #5a3b0c\">Little genetic push, but a fact that's useful to you.</span>\n      </div>\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #e7efe3\">\n        <span style=\"align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #ffffff; color: #2f5e1b; font-size: 12px; font-weight: 700\">No change needed</span>\n        <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">Your genes aren't asking for anything special.</span>\n      </div>\n    </div>\n  </section>\n\n  <section style=\"display: flex; align-items: center; gap: 20px; padding: 14px 18px; border-radius: 14px; border: 1px solid #e6e9e4\">\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; white-space: nowrap\">4. The science</h2>\n    <div style=\"display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px\">\n      <span style=\"display: flex; align-items: center; gap: 6px\"><span style=\"display: flex; gap: 2px\"><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span></span><strong>Strong</strong> large, repeated studies</span>\n      <span style=\"display: flex; align-items: center; gap: 6px\"><span style=\"display: flex; gap: 2px\"><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #d9dfe2\"></span></span><strong>Moderate</strong> consistent, smaller effect</span>\n      <span style=\"display: flex; align-items: center; gap: 6px\"><span style=\"display: flex; gap: 2px\"><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #d9dfe2\"></span><span style=\"width: 8px; height: 8px; border-radius: 2px; background: #d9dfe2\"></span></span><strong>Emerging</strong> early, worth testing</span>\n    </div>\n  </section>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto\">\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #e3f1dd\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700\">Tendencies, not destinies</span>\n      <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">Your DNA shows how you're likely to respond. Food, sleep and movement still shape the outcome.</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #f5f5f3\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700\">Not a medical test</span>\n      <span style=\"font-size: 13px; line-height: 1.45; color: #3d4a52\">Taking medication, pregnant or managing a condition? Talk to your GP before changing your diet.</span>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">2</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return { dietLower: L[d] || 'vegetarian' };\n  }\n}"}, "RptGenes2": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 18px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">The genes · 2 of 2</span>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1.5px solid #1b2b36\">\n    <div style=\"display: flex; flex-direction: column\">\n      <sc-for list=\"{{left}}\" as=\"g\" hint-placeholder-count=\"12\">\n        <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid #e3e8df\">\n          <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 8px\"><span style=\"font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em\">{{g.name}}</span><span style=\"padding: 2px 8px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 11px; font-weight: 700; text-align: right\">{{g.area}}</span></div>\n          <span style=\"font-size: 12.5px; line-height: 1.45; color: #4d5a62\">{{g.text}}</span>\n        </div>\n      </sc-for>\n    </div>\n    <div style=\"display: flex; flex-direction: column\">\n      <sc-for list=\"{{right}}\" as=\"g\" hint-placeholder-count=\"12\">\n        <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid #e3e8df\">\n          <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 8px\"><span style=\"font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em\">{{g.name}}</span><span style=\"padding: 2px 8px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 11px; font-weight: 700; text-align: right\">{{g.area}}</span></div>\n          <span style=\"font-size: 12.5px; line-height: 1.45; color: #4d5a62\">{{g.text}}</span>\n        </div>\n      </sc-for>\n    </div>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 16px 18px; border-radius: 12px; background: #f5f5f3\">\n    <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700\">What this report leaves out</span>\n    <span style=\"font-size: 13px; line-height: 1.5; color: #4d5a62\">Some genes in raw DNA data are known mainly for links to medical conditions rather than nutrition. This report doesn’t interpret them, and it doesn’t test for any condition. If a condition runs in your family, talk to your GP.</span>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #c9d3d8; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">14</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const P = {\n      carbs: ['#fce9dc', '#9a4a12'], fats: ['#e2edf6', '#1b4a63'], protein: ['#f3e6f2', '#6b3368'],\n      vit: ['#e3f1dd', '#2f5e1b'], beh: ['#fbeed9', '#8a4a0b']\n    };\n    const K = { 'Glucose': 'carbs', 'Iron': 'vit', 'Lipid handling': 'fats', 'Unsaturated fat': 'fats', 'Snacking': 'beh', 'Lactose': 'beh', 'B2': 'vit', 'Choline': 'vit', 'Vitamin A': 'vit', 'Vitamin E': 'vit', 'Vitamin C': 'vit', 'Bitter taste': 'beh', 'B12': 'vit', 'Protein amount': 'protein', 'Calcium': 'vit' };\n    const g = (name, area, text) => {\n      const p = P[K[area.split(',')[0]] || 'vit'];\n      return { name: name, area: area, text: text, tint: p[0], deep: p[1] };\n    };\n    const dd = this.props.diet ?? 'Vegetarian';\n    const DL = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return {\n      dietLower: DL[dd] || 'vegetarian',\n      left: [\n        g('GCKR', 'Glucose, lipid handling', 'Controls how the liver handles glucose, and affects blood fat levels.'),\n        g('HFE', 'Iron', 'Controls how much iron your gut absorbs. If iron overload (haemochromatosis) runs in your family, talk to your GP.'),\n        g('IRS1', 'Glucose', 'Passes insulin’s signal into your cells.'),\n        g('LDLR', 'Lipid handling', 'Clears LDL cholesterol from your blood.'),\n        g('LPA', 'Lipid handling', 'Sets your level of lipoprotein(a), a blood fat particle largely decided by genes.'),\n        g('LPL', 'Unsaturated fat', 'Breaks down blood fats so your body can use or store them.'),\n        g('MC4R', 'Snacking', 'A key appetite gene in the brain. Common variants have a small effect on hunger.'),\n        g('MCM6', 'Lactose', 'Controls whether the lactase enzyme stays switched on in adulthood.'),\n        g('MTHFR', 'B2, B6 and B9, B12', 'Turns folate into its active form, with help from vitamin B2.'),\n        g('PEMT', 'Choline', 'Lets your liver make some of its own choline.'),\n        g('PNPLA3', 'Lipid handling', 'Involved in how the liver handles fat.'),\n        g('PPARG', 'Glucose, saturated fat', 'Guides fat cell development and how tissues respond to insulin.')\n      ],\n      right: [\n        g('RBP4', 'Vitamin A', 'Carries vitamin A in your blood.'),\n        g('SCARB1', 'Vitamin E', 'Takes up fat-soluble nutrients, including vitamin E, into cells.'),\n        g('SLC23A1', 'Vitamin C', 'Absorbs vitamin C from your gut.'),\n        g('TAS2R38', 'Bitter taste', 'A bitter taste receptor that decides how bitter some vegetables taste to you.'),\n        g('TCF7L2', 'Glucose', 'The strongest common gene linked to blood sugar control and insulin release.'),\n        g('TCN2', 'B12', 'Carries vitamin B12 in your blood to your cells.'),\n        g('TF', 'Iron', 'Makes transferrin, the protein that carries iron in your blood.'),\n        g('TFAP2B', 'Protein amount', 'Linked to where the body stores fat and how people respond to different diets.'),\n        g('TMPRSS6', 'Iron', 'Helps set hepcidin, the hormone that controls iron absorption.'),\n        g('TRIB1', 'Lipid handling', 'Linked to blood fat levels.'),\n        g('TTR', 'Vitamin A', 'Helps carry vitamin A in your blood. This report looks only at that role.'),\n        g('VDR', 'Calcium', 'The vitamin D receptor, which helps you absorb calcium.')\n      ]\n    };\n  }\n}"}, "RptGenes1": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 18px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">The genes · 1 of 2</span>\n  </div>\n\n  <div style=\"display: flex; flex-direction: column; gap: 8px\">\n    <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">The genes behind your results</h1>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.5; color: #4d5a62; text-wrap: pretty\">48 genes in alphabetical order, each with what it does in your body and which results it feeds. Some genes feed more than one result.</p>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1.5px solid #1b2b36\">\n    <div style=\"display: flex; flex-direction: column\">\n      <sc-for list=\"{{left}}\" as=\"g\" hint-placeholder-count=\"12\">\n        <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid #e3e8df\">\n          <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 8px\"><span style=\"font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em\">{{g.name}}</span><span style=\"padding: 2px 8px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 11px; font-weight: 700; text-align: right\">{{g.area}}</span></div>\n          <span style=\"font-size: 12.5px; line-height: 1.45; color: #4d5a62\">{{g.text}}</span>\n        </div>\n      </sc-for>\n    </div>\n    <div style=\"display: flex; flex-direction: column\">\n      <sc-for list=\"{{right}}\" as=\"g\" hint-placeholder-count=\"12\">\n        <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid #e3e8df\">\n          <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 8px\"><span style=\"font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em\">{{g.name}}</span><span style=\"padding: 2px 8px; border-radius: 999px; background: {{g.tint}}; color: {{g.deep}}; font-size: 11px; font-weight: 700; text-align: right\">{{g.area}}</span></div>\n          <span style=\"font-size: 12.5px; line-height: 1.45; color: #4d5a62\">{{g.text}}</span>\n        </div>\n      </sc-for>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid #c9d3d8; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">13</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const P = {\n      carbs: ['#fce9dc', '#9a4a12'], fats: ['#e2edf6', '#1b4a63'], protein: ['#f3e6f2', '#6b3368'],\n      vit: ['#e3f1dd', '#2f5e1b'], beh: ['#fbeed9', '#8a4a0b']\n    };\n    const K = { 'Glucose': 'carbs', 'Sodium': 'vit', 'Alcohol': 'beh', 'Saturated fat': 'fats', 'Lipid handling': 'fats', 'Unsaturated fat': 'fats', 'Omega-3': 'fats', 'Vitamin A': 'vit', 'Snacking': 'beh', 'Choline': 'vit', 'B12': 'vit', 'Caffeine': 'beh', 'Vitamin D': 'vit', 'Vitamin E': 'vit', 'Vitamins E and K': 'vit', 'Protein and fullness': 'protein', 'Protein amount': 'protein', 'Iron': 'vit', 'Lactose': 'beh', 'B2, B6 and B9': 'vit', 'Vitamin C': 'vit', 'Bitter taste': 'beh', 'Calcium': 'vit' };\n    const g = (name, area, text) => {\n      const p = P[K[area.split(',')[0]] || 'vit'];\n      return { name: name, area: area, text: text, tint: p[0], deep: p[1] };\n    };\n    const dd = this.props.diet ?? 'Vegetarian';\n    const DL = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return {\n      dietLower: DL[dd] || 'vegetarian',\n      left: [\n        g('ADCY5', 'Glucose', 'Helps signal insulin release from the pancreas. Linked to small differences in fasting blood sugar.'),\n        g('ADD1', 'Sodium', 'Involved in how the kidneys handle salt. Linked to blood pressure in population studies.'),\n        g('ADIPOQ', 'Glucose', 'Makes adiponectin, a hormone from fat tissue that helps your body respond to insulin.'),\n        g('ALDH2', 'Alcohol', 'Breaks down acetaldehyde, the by-product of alcohol that causes flushing.'),\n        g('APOA2', 'Saturated fat', 'Linked in some studies to how the body responds to saturated fat.'),\n        g('APOA5', 'Saturated fat', 'Helps clear triglycerides, the main blood fats, after a meal.'),\n        g('APOB', 'Lipid handling', 'Builds the particles that carry cholesterol and fats in your blood.'),\n        g('BCO1', 'Vitamin A', 'Converts beta-carotene from plants into vitamin A.'),\n        g('BDNF', 'Snacking', 'Involved in brain signals for hunger and fullness.'),\n        g('BHMT', 'Choline', 'Uses betaine, made from choline, in an important recycling step in the liver.'),\n        g('CHDH', 'Choline', 'Turns choline into betaine.'),\n        g('CUBN', 'B12', 'Absorbs vitamin B12 from your gut.')\n      ],\n      right: [\n        g('CYP1A1', 'Caffeine, sodium', 'A liver enzyme that helps break down caffeine and other compounds.'),\n        g('CYP1A2', 'Caffeine', 'The main enzyme that clears caffeine. Variants make people faster or slower clearers.'),\n        g('CYP2R1', 'Vitamin D, calcium', 'Activates vitamin D in the liver. Variants are linked to lower blood vitamin D.'),\n        g('CYP4F2', 'Vitamins E and K', 'Breaks down vitamins E and K. Also used to guide doses of the blood thinner warfarin.'),\n        g('ELOVL2', 'Omega-3', 'Lengthens omega-3 fats on the way to making DHA.'),\n        g('FADS1', 'Omega-3', 'A key step in turning plant omega-3 (ALA) into EPA and DHA.'),\n        g('FGF21', 'Protein and fullness', 'A hormone linked to food choice, including how much protein and sugar people prefer.'),\n        g('FTO', 'Protein amount, saturated fat', 'The best-studied appetite gene. Linked to energy balance and how people respond to diet.'),\n        g('FUT2', 'B12', 'Shapes your gut environment. Linked to B12 levels in the blood.'),\n        g('G6PC2', 'Glucose', 'Helps set your fasting blood sugar level.'),\n        g('GC', 'Vitamin D', 'Makes the protein that carries vitamin D in your blood.'),\n        g('GCK', 'Glucose', 'Your body’s glucose sensor. Sets when insulin is released.')\n      ]\n    };\n  }\n}"}, "RptAllResults": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 48px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 16px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -48px 22px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">All results</span>\n  </div>\n\n  <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05\">Your 23 results</h1>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start\">\n    <div style=\"display: flex; flex-direction: column; gap: 12px\">\n      <sc-for list=\"{{leftGroups}}\" as=\"g\" hint-placeholder-count=\"4\">\n        <div style=\"display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #e6e9e4\">\n          <div style=\"display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: {{g.tint}}\">\n            <span style=\"display: flex; align-items: center; gap: 8px\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: {{g.c}}\"></span><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: {{g.deep}}\">{{g.name}}</span></span>\n            <span style=\"font-size: 11.5px; font-weight: 600; color: {{g.deep}}\">{{g.count}}</span>\n          </div>\n          <sc-for list=\"{{g.rows}}\" as=\"r\" hint-placeholder-count=\"3\">\n            <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 7px 14px; border-top: 1px solid #f0f2ee\">\n              <div style=\"display: flex; align-items: center; gap: 8px\">\n                <span style=\"flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{r.name}}</span>\n                <sc-if value=\"{{r.focus}}\" hint-placeholder-val=\"{{true}}\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 10.5px; font-weight: 700\">Focus</span></sc-if>\n                <sc-if value=\"{{r.worth}}\" hint-placeholder-val=\"{{false}}\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 10.5px; font-weight: 700\">Note</span></sc-if>\n                <div style=\"display: flex; gap: 2px\">\n                  <sc-for list=\"{{r.segs}}\" as=\"s\" hint-placeholder-count=\"5\">\n                    <span style=\"width: 12px; height: 9px; border-radius: 2px; background: {{s.bg}}\"></span>\n                  </sc-for>\n                </div>\n                <span style=\"width: 12px; font-size: 13px; font-weight: 800; text-align: right; color: {{g.deep}}\">{{r.score}}</span>\n              </div>\n              <span style=\"font-size: 12px; color: #4d5a62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{r.note}}</span>\n            </div>\n          </sc-for>\n        </div>\n      </sc-for>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 12px\">\n      <sc-for list=\"{{rightGroups}}\" as=\"g\" hint-placeholder-count=\"1\">\n        <div style=\"display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #e6e9e4\">\n          <div style=\"display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: {{g.tint}}\">\n            <span style=\"display: flex; align-items: center; gap: 8px\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: {{g.c}}\"></span><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: {{g.deep}}\">{{g.name}}</span></span>\n            <span style=\"font-size: 11.5px; font-weight: 600; color: {{g.deep}}\">{{g.count}}</span>\n          </div>\n          <sc-for list=\"{{g.rows}}\" as=\"r\" hint-placeholder-count=\"11\">\n            <div style=\"display: flex; flex-direction: column; gap: 3px; padding: 7px 14px; border-top: 1px solid #f0f2ee\">\n              <div style=\"display: flex; align-items: center; gap: 8px\">\n                <span style=\"flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{r.name}}</span>\n                <sc-if value=\"{{r.focus}}\" hint-placeholder-val=\"{{true}}\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 10.5px; font-weight: 700\">Focus</span></sc-if>\n                <sc-if value=\"{{r.worth}}\" hint-placeholder-val=\"{{false}}\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 10.5px; font-weight: 700\">Note</span></sc-if>\n                <div style=\"display: flex; gap: 2px\">\n                  <sc-for list=\"{{r.segs}}\" as=\"s\" hint-placeholder-count=\"5\">\n                    <span style=\"width: 12px; height: 9px; border-radius: 2px; background: {{s.bg}}\"></span>\n                  </sc-for>\n                </div>\n                <span style=\"width: 12px; font-size: 13px; font-weight: 800; text-align: right; color: {{g.deep}}\">{{r.score}}</span>\n              </div>\n              <span style=\"font-size: 12px; color: #4d5a62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">{{r.note}}</span>\n            </div>\n          </sc-for>\n        </div>\n      </sc-for>\n      <div style=\"display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: #f5f5f3; font-size: 12.5px; line-height: 1.45; color: #3d4a52\">\n        <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700; color: #1b2b36\">Reading this page</span>\n        <span>Bars show genetic influence from 0 to 5. Colour shows the area only.</span>\n        <span style=\"display: flex; align-items: center; gap: 6px\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 10.5px; font-weight: 700\">Focus</span> has its own page with actions.</span>\n        <span style=\"display: flex; align-items: center; gap: 6px\"><span style=\"padding: 1px 7px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 10.5px; font-weight: 700\">Note</span> low score, useful fact: page 11.</span>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid #e6e9e4; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">4</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const A = {\n      carbs: { c: '#e07b39', tint: '#fce9dc', deep: '#9a4a12' },\n      fats: { c: '#3f86c0', tint: '#e2edf6', deep: '#1b4a63' },\n      protein: { c: '#a463a0', tint: '#f3e6f2', deep: '#6b3368' },\n      vit: { c: '#58a754', tint: '#e3f1dd', deep: '#2f5e1b' },\n      beh: { c: '#e2a024', tint: '#fbeed9', deep: '#8a4a0b' }\n    };\n    const group = (key, name, rows) => {\n      const a = A[key];\n      return {\n        name: name, c: a.c, tint: a.tint, deep: a.deep,\n        count: rows.length === 1 ? '1 result' : rows.length + ' results',\n        rows: rows.map((r) => ({\n          name: r[0], note: r[1], score: r[2],\n          focus: r[3] === 'focus', worth: r[3] === 'worth',\n          segs: [1, 2, 3, 4, 5].map((i) => ({ bg: i <= r[2] ? a.c : '#e6e9e4' }))\n        }))\n      };\n    };\n    const d = this.props.diet ?? 'Vegetarian';\n    const DL = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return {\n      dietLower: DL[d] || 'vegetarian',\n      leftGroups: [\n        group('carbs', 'Carbs and energy', [\n          ['Glucose response', 'Bigger swings after refined carbs', 4, 'focus']\n        ]),\n        group('fats', 'Fats', [\n          ['Omega-3', 'Converts plant omega-3 less well', 4, 'focus'],\n          ['Lipid handling', 'Clears blood fats a little slower', 4, 'focus'],\n          ['Saturated fat', 'Little genetic effect', 2, 'none'],\n          ['Unsaturated fat', 'Typical response', 1, 'none']\n        ]),\n        group('protein', 'Protein', [\n          ['Protein and fullness', 'Protein strongly drives fullness', 5, 'focus'],\n          ['Protein amount', 'Total protein matters more for you', 5, 'focus']\n        ]),\n        group('beh', 'Behaviour and sensitivities', [\n          ['Snacking and appetite', 'Feel the pull of snacks more', 5, 'focus'],\n          ['Caffeine', 'Likely clears caffeine faster', 1, 'worth'],\n          ['Bitter taste', 'No strong genetic effect', 1, 'none'],\n          ['Alcohol', 'Fewer immediate effects, same risk', 0, 'worth'],\n          ['Lactose', 'Digests lactose as an adult', 0, 'none']\n        ])\n      ],\n      rightGroups: [\n        group('vit', 'Vitamins and minerals', [\n          ['Choline', 'May need more from food', 5, 'focus'],\n          ['Vitamin C', 'May absorb it less efficiently', 5, 'focus'],\n          ['Vitamin B12', 'May absorb it less efficiently', 4, 'focus'],\n          ['B2, B6 and B9', 'May use folate less efficiently', 4, 'focus'],\n          ['Calcium', 'Some variation in absorption', 4, 'focus'],\n          ['Vitamin D', 'Little genetic effect; UK winter matters', 2, 'worth'],\n          ['Vitamin A', 'Typical beta-carotene conversion', 2, 'none'],\n          ['Iron', 'Typical absorption', 1, 'none'],\n          ['Sodium', 'No known genetic effect', 1, 'none'],\n          ['Vitamin E', 'No known genetic effect', 1, 'none'],\n          ['Vitamin K', 'No known genetic effect', 1, 'none']\n        ])\n      ]\n    };\n  }\n}"}, "RptAbout": {"tpl": "<div style=\"width: 794px; height: 1123px; box-sizing: border-box; padding: 0 56px 36px; background: #ffffff; font-family: 'Figtree', system-ui, sans-serif; color: #1b2b36; display: flex; flex-direction: column; gap: 24px; overflow: hidden\">\n\n  <div style=\"height: 10px; margin: 0 -56px 20px; background: #58a754\"></div>\n  <div style=\"display: flex; align-items: center; justify-content: space-between\">\n    <div style=\"display: flex; align-items: center; gap: 8px\">\n      <img src=\"/_blob/c7eb80ee514ebb5a2aee2a3c274a0218\" alt=\"Boone\" style=\"height: 34px; width: auto; display: block; margin-left: -6px\">\n    </div>\n    <span style=\"padding: 5px 12px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 12px; font-weight: 700\">About this report</span>\n  </div>\n\n  <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05\">How this report works</h1>\n\n  <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px\">\n    <div style=\"display: flex; flex-direction: column; gap: 8px\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; color: #58a754\">1</span>\n      <span style=\"font-size: 15px; font-weight: 700\">Your raw DNA data</span>\n      <span style=\"font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Your sample is read into raw genetic data, which Boone receives.</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 8px\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; color: #58a754\">2</span>\n      <span style=\"font-size: 15px; font-weight: 700\">Our own interpretation</span>\n      <span style=\"font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Boone interprets 48 nutrition genes with its own documented method, based on published research.</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 8px\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; color: #58a754\">3</span>\n      <span style=\"font-size: 15px; font-weight: 700\">Results you can use</span>\n      <span style=\"font-size: 13.5px; line-height: 1.5; color: #4d5a62\">The genes behind each result are combined into one 0 to 5 score, with food advice set for your diet.</span>\n    </div>\n  </div>\n\n  <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px\">\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; background: #f5f5f3\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Your data stays yours</span>\n      <span style=\"font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Your data is stored and processed in the UK. Boone will never sell or share your individual data with advertisers.</span>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; background: #f5f5f3\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700\">Check before big changes</span>\n      <span style=\"font-size: 13.5px; line-height: 1.5; color: #4d5a62\">Talk to your GP or pharmacist first if you take medication (especially blood thinners), are pregnant or breastfeeding, or have a health condition.</span>\n    </div>\n  </div>\n\n  <section style=\"display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 16px; background: #2f5e1b; color: #ffffff\">\n    <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e3f1dd\">Next step</span>\n    <h2 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1\">Your DNA shows tendencies. Boone shows what you actually eat.</h2>\n    <p style=\"margin: 0; font-size: 15px; line-height: 1.55; color: #e3f1dd\">Log meals in seconds and see how they measure up on the things this report flags for you: protein at each meal, fibre, vitamins and minerals.</p>\n    <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px\">\n      <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.10)\"><span style=\"font-size: 14px; font-weight: 700\">Log any way</span><span style=\"font-size: 13px; line-height: 1.45; color: #e3f1dd\">Photo, text, barcode or receipt</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.10)\"><span style=\"font-size: 14px; font-weight: 700\">29 micronutrients</span><span style=\"font-size: 13px; line-height: 1.45; color: #e3f1dd\">Tracked against UK guidelines</span></div>\n      <div style=\"display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.10)\"><span style=\"font-size: 14px; font-weight: 700\">Daily insights</span><span style=\"font-size: 13px; line-height: 1.45; color: #e3f1dd\">Eating patterns, diversity and trends</span></div>\n    </div>\n    <div style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.25)\">\n      <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800\">myboone.app</span>\n      <span style=\"font-size: 13px; color: #e3f1dd\">Free on the App Store and Google Play</span>\n    </div>\n  </section>\n\n  <div style=\"display: flex; flex-direction: column; gap: 6px; margin-top: auto\">\n    <span style=\"font-size: 12px; line-height: 1.5; color: #4d5a62\">This report is for information and education. It is not a medical or diagnostic test and does not replace advice from a qualified healthcare professional. Genetic results show tendencies, not certainties.</span>\n    <span style=\"font-size: 12px; line-height: 1.5; color: #4d5a62\">Boone App Ltd · Centrum, Colney Lane, Norwich NR4 7UG · Company no. 15774886</span>\n  </div>\n\n  <div style=\"display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #c9d3d8; font-size: 12px; color: #4d5a62\">\n    <span>{{who}} · Genetic nutrition profile · Food advice for a {{dietLower}} diet</span>\n    <span style=\"font-weight: 700; color: #1b2b36\">15</span>\n  </div>\n\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const sm = this.props.sample === true || this.props.sample === 'true';\n    return Object.assign(this._rv(), {\n      who: sm ? 'Sample report' : 'Sample report',\n      coverTitle: sm ? 'Your genes, translated into food' : 'Your genes, translated into food',\n      nameLabel: sm ? 'Report' : 'Report',\n      nameValue: 'Sample',\n      pill: 'Sample DNA report'\n    });\n  }\n  _rv() {\n    const d = this.props.diet ?? 'Vegetarian';\n    const L = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    return { dietLower: L[d] || 'vegetarian' };\n  }\n}"}, "DNAHub": {"tpl": "<div style=\"width: 100%; background: #f5f5f3; padding: 16px 24px 0; box-sizing: border-box; overflow: hidden\">\n  <div style=\"max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px\">\n    <!-- Floating rounded announcement banner -->\n    <div style=\"display: flex; justify-content: center\">\n      <a href=\"#\" style=\"display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #141a12; color: #ffffff; box-shadow: 0 8px 24px rgba(20,26,18,0.12); max-width: 100%; box-sizing: border-box\">\n        <span style=\"display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0\">New</span>\n        <span class=\"banner-text-long\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis\">Every McDonald's item ranked by sugar, salt and calories for your age</span>\n        <span class=\"banner-text-short\" style=\"font-size: 14px; font-weight: 500; white-space: nowrap\">McDonald's, ranked for your age</span>\n        <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n        </span>\n      </a>\n    </div>\n\n    <!-- Navigation: floating white pill -->\n    <div style=\"display: flex; justify-content: center\">\n      <nav aria-label=\"Main\" style=\"display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 8px 8px 8px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 12px 32px rgba(20,26,18,0.10), 0 2px 6px rgba(20,26,18,0.05)\">\n        <a href=\"#\" style=\"display: flex; align-items: center; gap: 10px; flex-shrink: 0\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #58a754\">\n            <svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0f1a0b\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21c-4.4 0-8-3.1-8-7.5C4 8 9 4 12 3c3 1 8 5 8 10.5 0 4.4-3.6 7.5-8 7.5Z\"></path><path d=\"M12 21V11\"></path></svg>\n          </span>\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em\">Boone</span>\n        </a>\n\n        <div class=\"nav-links\" style=\"display: flex; align-items: center; gap: 2px; min-width: 0\">\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Food database\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">The app\n            <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n          </a>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Clubs and gyms</a>\n          <div class=\"nav-dd\" style=\"position: relative\"><a class=\"nav-link\" href=\"/dna-nutrition-test\" aria-current=\"page\" aria-haspopup=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: #f3f8ef; color: #2f5e1b\">DNA <svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg></a><div class=\"nav-dd-panel\" style=\"position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; z-index: 60\"><div style=\"width: 330px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #ffffff; border: 1px solid #edf1ea; box-shadow: 0 24px 48px rgba(20,26,18,0.14)\"><a class=\"nav-dd-item\" href=\"/dna-nutrition-test\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Overview</span><span style=\"font-size: 13px; color: #5d676d\">What the test is and how it works</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">What it tests</span><span style=\"font-size: 13px; color: #5d676d\">23 results across five areas of your diet</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/sample-report\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Sample reports</span><span style=\"font-size: 13px; color: #5d676d\">Read or download a real report</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test#by-diet\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">By diet</span><span style=\"font-size: 13px; color: #5d676d\">Vegetarian, vegan, pescatarian, meat eater</span></a><a class=\"nav-dd-item\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #1b2b36\"><span style=\"font-size: 15px; font-weight: 700\">Genes and method</span><span style=\"font-size: 13px; color: #5d676d\">All 48 genes and how we score them</span></a><a href=\"/dna-nutrition-test#order\" style=\"margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Order your DNA test<span>£198</span></a></div></div></div>\n          <a class=\"nav-link\" href=\"#\" style=\"padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500\">Pricing</a>\n        </div>\n\n        <div style=\"display: flex; align-items: center; gap: 6px; flex-shrink: 0\">\n          <a class=\"nav-signin nav-link\" href=\"#\" style=\"display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500\">Sign in</a>\n          <a class=\"nav-cta\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 15px; font-weight: 700\">Get the app</a>\n          <button class=\"nav-menu\" type=\"button\" aria-label=\"Open menu\" style=\"display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #f3f8ef; color: #1b2b36; cursor: pointer\">\n            <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 7h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 17h16\"></path></svg>\n          </button>\n        </div>\n      </nav>\n    </div>\n\n    <nav aria-label=\"DNA test\" style=\"display: flex; justify-content: center\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: 100%; max-width: 1040px; box-sizing: border-box; padding: 6px 6px 6px 18px; border-radius: 22px; background: #e3f1dd\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2f5e1b\"><svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>DNA test</span>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 2px\"><a class=\"\" href=\"/dna-nutrition-test\" aria-current=\"page\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: #1b2b36; color: #ffffff\">Overview</a><a class=\"nav-link\" href=\"/dna-nutrition-test#what-it-tests\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">What it tests</a><a class=\"nav-link\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Sample reports</a><a class=\"nav-link\" href=\"/dna-nutrition-test#by-diet\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">By diet</a><a class=\"nav-link\" href=\"/dna-nutrition-test/genes\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1b2b36\">Genes and method</a></div>\n        <a class=\"nav-cta\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap\">Order · £198</a>\n      </div>\n    </nav>\n\n    <!-- DNA hero -->\n    <section style=\"position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 80px 24px 72px\">\n      <div style=\"flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 26px\">\n        <span style=\"align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 15px; font-weight: 600\">\n          <svg aria-hidden=\"true\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3c0 6 10 6 10 12s-10 6-10 6\"></path><path d=\"M17 3c0 6-10 6-10 12\"></path><path d=\"M8 7h8\"></path><path d=\"M8 17h8\"></path></svg>\n          Boone DNA nutrition test\n        </span>\n        <h1 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; color: #1b2b36\">A DNA test that <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">keeps working</span> after your <span style=\"color: #c8660c\">results</span> arrive.</h1>\n        <p style=\"margin: 0; font-size: 21px; line-height: 1.55; color: #4d5a62; max-width: 600px\">One saliva sample at home gives you a personalised nutrition blueprint. Boone then connects it to the meals you actually eat, so you can see how your diet lines up with your biology every day.</p>\n        <div style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 18px\">\n          <a class=\"btn-primary\" href=\"#\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 32px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test\n            <svg aria-hidden=\"true\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg>\n          </a>\n          <div style=\"display: flex; flex-direction: column; line-height: 1.15\">\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.03em\">£198</span>\n            <span style=\"font-size: 14px; color: #5d676d\">one-off · free UK delivery</span>\n          </div>\n        </div>\n        <a href=\"#sample\" style=\"align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #2f5e1b; text-decoration: underline; text-underline-offset: 4px\">See a real sample report <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n        <ul style=\"margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px\">\n          <sc-for list=\"{{heroTicks}}\" as=\"t\" hint-placeholder-count=\"4\">\n            <li style=\"display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #3d4a52\"><span style=\"display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: #58a754; color: #ffffff\"><svg aria-hidden=\"true\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span>{{t.label}}</li>\n          </sc-for>\n        </ul>\n      </div>\n      <div style=\"flex: 1 1 520px; min-width: 0; position: relative; height: 600px\">\n        <div style=\"position: absolute; inset: 20px 30px 60px 0; border-radius: 40px; overflow: hidden; box-shadow: 0 30px 60px rgba(27,43,54,0.18)\">\n          <img src=\"/_blob/7f1e5bc8e5412e592db85191c5c2deb1\" alt=\"Boone DNA nutrition test kit box surrounded by salmon, avocado, spinach, blueberries and almonds\" style=\"display: block; width: 100%; height: 100%; object-fit: cover\">\n        </div>\n        <img class=\"float-phone\" src=\"/_blob/6ecf7baabdd89dd3e7c8814db930590f\" alt=\"Boone app showing a genetic summary with nutrition traits\" style=\"position: absolute; right: -10px; bottom: 0; width: 230px; height: 230px; object-fit: cover; object-position: top; border-radius: 28px; border: 6px solid #ffffff; box-shadow: 0 24px 50px rgba(27,43,54,0.25)\">\n        <span class=\"hero-chip\" style=\"position: absolute; left: -16px; top: 70px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #ffffff; color: #1b2b36; font-size: 15px; font-weight: 600; box-shadow: 0 14px 30px rgba(27,43,54,0.16); transform: rotate(-3deg)\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: #58a754\"></span>Saliva sample at home</span>\n        <span class=\"hero-chip\" style=\"position: absolute; left: 30px; bottom: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 15px; font-weight: 600; box-shadow: 0 14px 30px rgba(27,43,54,0.22); transform: rotate(2deg)\"><span style=\"width: 10px; height: 10px; border-radius: 999px; background: #f0a92b\"></span>Results live in the Boone app</span>\n      </div>\n    </section>\n  </div>\n  <!-- Trait ticker -->\n  <div aria-hidden=\"true\" style=\"margin: 0 -24px; background: #b3e0f2; padding: 20px 0; overflow: hidden\">\n    <div class=\"ticker-track\" style=\"display: flex; width: max-content\">\n      <sc-for list=\"{{tickerItems}}\" as=\"item\" hint-placeholder-count=\"20\">\n        <div style=\"display: flex; align-items: center; gap: 48px; padding-right: 48px; flex-shrink: 0\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #1b2b36; white-space: nowrap\">{{item.label}}</span>\n          <span style=\"width: 10px; height: 10px; border-radius: 999px; background: #c8660c\"></span>\n        </div>\n      </sc-for>\n    </div>\n  </div>\n  <!-- NEW: what's inside the report -->\n  <section class=\"reveal\" id=\"what-it-tests\" aria-labelledby=\"inside-heading\" style=\"scroll-margin-top: 110px; max-width: 1280px; margin: 0 auto; padding: 128px 0 40px; display: flex; flex-direction: column; gap: 48px\">\n    <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px\">\n      <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 780px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">What your test covers</span>\n        <h2 id=\"inside-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">48 genes. 23 results. Advice for <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">the way you eat</span>.</h2>\n        <p style=\"margin: 0; font-size: 20px; line-height: 1.55; color: #4d5a62\">Your results are grouped into five areas of your diet. Each one is scored for how much say your genes have, then turned into food advice for a vegetarian, vegan, pescatarian or meat-eating diet.</p>\n      </div>\n    </div>\n\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px\">\n      <sc-for list=\"{{stats}}\" as=\"s\" hint-placeholder-count=\"5\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 24px; background: #ffffff; border: 1px solid #e3e8df\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: {{s.ink}}\">{{s.n}}</span>\n          <span style=\"font-size: 16px; font-weight: 700\">{{s.label}}</span>\n          <span style=\"font-size: 14px; line-height: 1.45; color: #5d676d\">{{s.sub}}</span>\n        </div>\n      </sc-for>\n    </div>\n\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch\">\n      <sc-for list=\"{{areas}}\" as=\"a\" hint-placeholder-count=\"5\">\n        <a class=\"area-card\" href=\"{{a.href}}\" style=\"display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 28px; background: {{a.tint}}; color: #1b2b36\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: {{a.c}}\"><sc-if value=\"{{a.is_carbs}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L4 14h7l-1 8 9-12h-7z\"></path></svg></sc-if><sc-if value=\"{{a.is_fats}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z\"></path></svg></sc-if><sc-if value=\"{{a.is_protein}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3v18\"></path><path d=\"M4 3v5a3 3 0 0 0 6 0V3\"></path><path d=\"M17 21V3c-2.2 0-3.5 2.5-3.5 6s1.3 5 3.5 5\"></path></svg></sc-if><sc-if value=\"{{a.is_vit}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></sc-if><sc-if value=\"{{a.is_beh}}\" hint-placeholder-val=\"{{ false }}\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M9 10h.01\"></path><path d=\"M15 10h.01\"></path><path d=\"M8.5 15c1 1.2 2.2 1.8 3.5 1.8s2.5-.6 3.5-1.8\"></path></svg></sc-if></span>\n          <div style=\"display: flex; flex-direction: column; gap: 4px\">\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1\">{{a.name}}</span>\n            <span style=\"font-size: 14px; font-weight: 700; color: {{a.deep}}\">{{a.count}}</span>\n          </div>\n          <div style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n            <sc-for list=\"{{a.results}}\" as=\"r\" hint-placeholder-count=\"4\"><span style=\"padding: 5px 10px; border-radius: 10px; background: #ffffff; font-size: 13px; font-weight: 600\">{{r.name}}</span></sc-for>\n          </div>\n          <span style=\"margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: {{a.deep}}\">Explore {{a.short}} <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></span>\n        </a>\n      </sc-for>\n    </div>\n  </section>\n  <!-- How it works -->\n  <section class=\"reveal\" aria-labelledby=\"steps-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 128px 0 120px; display: flex; flex-direction: column; gap: 56px\">\n    <div style=\"display: flex; flex-direction: column; gap: 14px; max-width: 760px\">\n      <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">How it works</span>\n      <h2 id=\"steps-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 60px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Turn your biology into <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">everyday food insight</span></h2>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px\">\n      <sc-for list=\"{{steps}}\" as=\"s\" hint-placeholder-count=\"3\">\n        <div style=\"display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; background: #ffffff; border: 1px solid #e3e8df\">\n          <div style=\"position: relative; height: 260px; background: {{s.bg}}\">\n            <img src=\"{{s.img}}\" alt=\"{{s.alt}}\" style=\"display: block; width: 100%; height: 100%; object-fit: cover; object-position: {{s.pos}}\">\n            <span style=\"position: absolute; left: 24px; bottom: -28px; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: #58a754; color: #ffffff; font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; box-shadow: 0 0 0 6px #ffffff\">{{s.n}}</span>\n          </div>\n          <div style=\"padding: 44px 28px 32px; display: flex; flex-direction: column; gap: 10px\">\n            <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">{{s.title}}</h3>\n            <p style=\"margin: 0; font-size: 17px; line-height: 1.6; color: #4d5a62\">{{s.body}}</p>\n          </div>\n        </div>\n      </sc-for>\n    </div>\n  </section>\n  <!-- NEW: sample report, by diet -->\n  <section class=\"reveal\" id=\"sample\" aria-labelledby=\"sample-heading\" style=\"margin: 0 -24px; background: #17251d; padding: 120px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 64px\">\n      <div style=\"flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; color: #ffffff\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: rgba(88,167,84,0.18); color: #9fd49a; font-size: 14px; font-weight: 600\">Sample report</span>\n        <h2 id=\"sample-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: #ffffff\">See a real report, <span style=\"background: linear-gradient(transparent 60%, rgba(88,167,84,0.65) 60%, rgba(88,167,84,0.65) 92%, transparent 92%); padding: 0 4px\">written for your diet</span></h2>\n        <p style=\"margin: 0; font-size: 19px; line-height: 1.55; color: #b8c6bc\">This is a real Boone report with the name removed. The genetic results are the same in every version. The food advice changes to match how you eat.</p>\n        <div role=\"tablist\" aria-label=\"Choose a diet\" style=\"display: flex; flex-wrap: wrap; gap: 8px\"><sc-for list=\"{{tabsDark}}\" as=\"t\" hint-placeholder-count=\"4\"><button class=\"tab-btn\" type=\"button\" role=\"tab\" aria-selected=\"{{t.selected}}\" onClick=\"{{t.pick}}\" style=\"height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; {{t.style}}\">{{t.label}}</button></sc-for></div>\n        <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12)\">\n          <span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">On the {{dietLower}} version</span>\n          <sc-for list=\"{{changes}}\" as=\"c\" hint-placeholder-count=\"3\">\n            <span style=\"display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: #e3e9ec\"><span style=\"flex-shrink: 0; margin-top: 7px; width: 8px; height: 8px; border-radius: 999px; background: #58a754\"></span>{{c.t}}</span>\n          </sc-for>\n        </div>\n        <div style=\"display: flex; flex-wrap: wrap; gap: 12px\">\n          <a class=\"btn-primary\" href=\"/dna-nutrition-test/sample-report\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 17px; font-weight: 700\">Read the full sample <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n          <a href=\"{{pdfHref}}\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 26px; border-radius: 999px; border: 2px solid #1b2b36; color: #1b2b36; font-size: 17px; font-weight: 700; border-color: rgba(255,255,255,0.4); color: #ffffff\"><svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 4v11\"></path><path d=\"m7 10 5 5 5-5\"></path><path d=\"M5 20h14\"></path></svg> Download PDF</a>\n        </div>\n        <span style=\"font-size: 14px; color: #9aa8b0\">15 pages · Free to download · {{dietTitle}} food advice</span>\n      </div>\n      <div style=\"flex: 1 1 560px; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 20px\">\n        <div style=\"flex-shrink: 0; width: 365px; height: 517px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); transform: rotate(-2deg)\"><div style=\"width: 794px; height: 1123px; transform: scale(0.46); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptMain\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div>\n        <div style=\"display: flex; flex-direction: column; gap: 20px\">\n          <div style=\"flex-shrink: 0; width: 175px; height: 247px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); transform: rotate(1.5deg)\"><div style=\"width: 794px; height: 1123px; transform: scale(0.22); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptProfile\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div>\n          <div style=\"flex-shrink: 0; width: 175px; height: 247px; overflow: hidden; border-radius: 10px; background: #ffffff; box-shadow: 0 18px 40px rgba(15,26,11,0.22); transform: rotate(-1deg)\"><div style=\"width: 794px; height: 1123px; transform: scale(0.22); transform-origin: 0 0; pointer-events: none\"><dc-import name=\"RptB12\" diet=\"{{diet}}\" sample=\"true\" hint-size=\"794px,1123px\"></dc-import></div></div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- NEW: same genes, advice per diet -->\n  <section class=\"reveal\" id=\"by-diet\" aria-labelledby=\"diet-heading\" style=\"scroll-margin-top: 110px; max-width: 1280px; margin: 0 auto; padding: 128px 0 64px; display: flex; flex-direction: column; gap: 44px\">\n    <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 820px\">\n      <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #fbeed9; color: #9a4f09; font-size: 14px; font-weight: 600\">Advice for how you eat</span>\n      <h2 id=\"diet-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Same genes. <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">Different food advice.</span></h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.55; color: #4d5a62\">Tell us how you eat and every action in your report is written for that diet. Here is the same B12 and choline result, as four people would read it. Pick yours to see what to watch on that diet.</p>\n    </div>\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px\">\n      <sc-for list=\"{{dietCards}}\" as=\"d\" hint-placeholder-count=\"4\">\n        <div style=\"display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 28px; background: #ffffff; border: 1px solid #e3e8df\">\n          <span style=\"align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 14px; font-weight: 700\">{{d.name}}</span>\n          <div style=\"display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid #eef0ec\">\n            <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2f5e1b\">Vitamin B12</span>\n            <span style=\"font-size: 18px; font-weight: 700; line-height: 1.3\">{{d.b12t}}</span>\n            <span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{d.b12s}}</span>\n          </div>\n          <div style=\"display: flex; flex-direction: column; gap: 4px\">\n            <span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2f5e1b\">Choline</span>\n            <span style=\"font-size: 18px; font-weight: 700; line-height: 1.3\">{{d.chot}}</span>\n            <span style=\"font-size: 15px; line-height: 1.5; color: #4d5a62\">{{d.chos}}</span>\n          </div>\n          <a href=\"{{d.href}}\" style=\"margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 15px; font-weight: 700\">{{d.link}} <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></a>\n        </div>\n      </sc-for>\n    </div>\n  </section>\n\n  <!-- NEW: how to read your results -->\n  <section class=\"reveal\" aria-labelledby=\"read-heading\" style=\"margin: 0 -24px; background: #ffffff; padding: 120px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px\">\n      <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 800px\">\n        <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-size: 14px; font-weight: 600\">How to read your results</span>\n        <h2 id=\"read-heading\" class=\"h-mid\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Results that show you <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">where to focus</span>, not what’s good or bad</h2>\n        <p style=\"margin: 0; font-size: 20px; line-height: 1.55; color: #4d5a62\">Every result tells you four things: its area, how much say your genes have, what to do about it, and how strong the science is.</p>\n      </div>\n\n      <div style=\"display: grid; grid-template-columns: minmax(0, 1fr) 260px 120px; gap: 24px; align-items: center; padding: 22px 28px; border-radius: 24px; background: #e3f1dd\" class=\"stack-sm\">\n        <div style=\"display: flex; align-items: center; gap: 16px\">\n          <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #58a754; flex-shrink: 0\"><svg aria-hidden=\"true\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.5 20.5a5 5 0 0 1-7-7l6-6a5 5 0 0 1 7 7z\"></path><path d=\"M8.5 8.5l7 7\"></path></svg></span>\n          <div style=\"display: flex; flex-direction: column; gap: 4px\">\n            <div style=\"display: flex; align-items: center; gap: 8px\"><span style=\"padding: 3px 10px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 12px; font-weight: 700\">Focus</span><span style=\"font-size: 14px; font-weight: 700; color: #2f5e1b\">Vitamins and minerals</span></div>\n            <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em\">Vitamin B12</span>\n            <span style=\"font-size: 15px; color: #3d4a52\">Example from the sample report: may absorb B12 a little less efficiently</span>\n          </div>\n        </div>\n        <div style=\"display: flex; flex-direction: column; gap: 6px\"><div style=\"display: flex; gap: 4px\"><span style=\"flex: 1; height: 14px; border-radius: 4px; background: #58a754\"></span><span style=\"flex: 1; height: 14px; border-radius: 4px; background: #58a754\"></span><span style=\"flex: 1; height: 14px; border-radius: 4px; background: #58a754\"></span><span style=\"flex: 1; height: 14px; border-radius: 4px; background: #58a754\"></span><span style=\"flex: 1; height: 14px; border-radius: 4px; background: #ffffff\"></span></div><div style=\"display: flex; justify-content: space-between; font-size: 13px; color: #4d5a62\"><span>Little</span><span>Some</span><span>Strong</span></div></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #2f5e1b; line-height: 1\">4/5</span><span style=\"font-size: 13px; color: #4d5a62\">Moderate evidence</span></div>\n      </div>\n\n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px\">\n        <div style=\"display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #f5f5f3\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #58a754; line-height: 1\">1</span>\n          <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">Colour shows the area</h3>\n          <div style=\"display: flex; flex-wrap: wrap; gap: 6px\">\n            <sc-for list=\"{{areas}}\" as=\"a\" hint-placeholder-count=\"5\"><span style=\"display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: {{a.tint}}; color: {{a.deep}}; font-size: 13px; font-weight: 700\"><span style=\"width: 8px; height: 8px; border-radius: 999px; background: {{a.c}}\"></span>{{a.short}}</span></sc-for>\n          </div>\n          <p style=\"margin: 0; font-size: 16px; line-height: 1.55; color: #4d5a62\">Colour never means good or bad. There’s no red in the report.</p>\n        </div>\n        <div style=\"display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #f5f5f3\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #58a754; line-height: 1\">2</span>\n          <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">Genetic influence, 0 to 5</h3>\n          <div style=\"display: flex; flex-direction: column; gap: 8px; font-size: 15px\">\n            <span style=\"display: flex; justify-content: space-between\"><strong>0 to 1 · Little</strong><span style=\"color: #4d5a62\">Habits lead</span></span>\n            <span style=\"display: flex; justify-content: space-between\"><strong>2 to 3 · Some</strong><span style=\"color: #4d5a62\">A gentle nudge</span></span>\n            <span style=\"display: flex; justify-content: space-between\"><strong>4 to 5 · Strong</strong><span style=\"color: #4d5a62\">Small changes go furthest</span></span>\n          </div>\n          <p style=\"margin: 0; font-size: 16px; line-height: 1.55; color: #4d5a62\">A high score isn’t bad. It shows where your genes have the most say.</p>\n        </div>\n        <div style=\"display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #f5f5f3\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #58a754; line-height: 1\">3</span>\n          <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">What to do with it</h3>\n          <div style=\"display: flex; flex-direction: column; gap: 8px; font-size: 15px\">\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"padding: 3px 10px; border-radius: 999px; background: #1b2b36; color: #ffffff; font-size: 12px; font-weight: 700\">Focus</span>A full page of actions</span>\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"padding: 3px 10px; border-radius: 999px; background: #e2a024; color: #0f1a0b; font-size: 12px; font-weight: 700\">Worth knowing</span>One useful fact</span>\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"padding: 3px 10px; border-radius: 999px; background: #e7efe3; color: #2f5e1b; font-size: 12px; font-weight: 700\">No change needed</span>Habits lead</span>\n          </div>\n        </div>\n        <div style=\"display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: #f5f5f3\">\n          <span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #58a754; line-height: 1\">4</span>\n          <h3 style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em\">How strong the science is</h3>\n          <div style=\"display: flex; flex-direction: column; gap: 8px; font-size: 15px\">\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"display: flex; gap: 3px\"><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span></span><strong>Strong</strong> large, repeated studies</span>\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"display: flex; gap: 3px\"><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #d9dfe2\"></span></span><strong>Moderate</strong> consistent, smaller</span>\n            <span style=\"display: flex; align-items: center; gap: 10px\"><span style=\"display: flex; gap: 3px\"><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #1b2b36\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #d9dfe2\"></span><span style=\"width: 10px; height: 10px; border-radius: 2px; background: #d9dfe2\"></span></span><strong>Emerging</strong> early, worth testing</span>\n          </div>\n        </div>\n      </div>\n      <a class=\"area-card\" href=\"/dna-nutrition-test/genes\" style=\"display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 36px; border-radius: 28px; background: #17251d; color: #ffffff\">\n        <span style=\"display: flex; flex-direction: column; gap: 6px; max-width: 760px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em\">48 genes, every one explained</span><span style=\"font-size: 17px; line-height: 1.5; color: #b8c6bc\">See each gene we read, what it does, which results it feeds into, and how raw DNA becomes a score.</span></span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 24px; border-radius: 999px; background: #58a754; color: #0f1a0b; font-size: 16px; font-weight: 700\">Genes and method <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"></path><path d=\"m13 6 6 6-6 6\"></path></svg></span>\n      </a>\n    </div>\n  </section>\n  <!-- Report vs Boone -->\n  <section class=\"reveal\" aria-labelledby=\"vs-heading\" style=\"max-width: 1280px; margin: 0 auto; padding: 128px 0 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 72px\">\n    <div style=\"flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px\">\n      <span style=\"align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #fbeed9; color: #9a4f09; font-size: 14px; font-weight: 600\">Why Boone</span>\n      <h2 id=\"vs-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">Most DNA tests <span style=\"color: #c8660c\">stop at a report</span></h2>\n      <p style=\"margin: 0; font-size: 19px; line-height: 1.55; color: #4d5a62\">A DNA report is only useful if you can act on it. Boone connects your results to daily meal tracking, micronutrient visibility and long-term diet patterns, so your insights keep working.</p>\n      <img src=\"/_blob/a46e2855a0a831118608177dba3e26be\" alt=\"A woman at a kitchen table with the Boone DNA kit and her phone, next to a bowl of porridge\" style=\"width: 100%; max-width: 520px; height: 280px; object-fit: cover; border-radius: 28px\">\n    </div>\n    <div style=\"flex: 1 1 560px; min-width: 0\">\n      <div style=\"background: #ffffff; border: 1px solid #e3e8df; border-radius: 28px; padding: 12px; box-shadow: 0 30px 60px rgba(27,43,54,0.10)\">\n        <div style=\"display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; padding: 14px 18px; font-size: 14px; font-weight: 700; color: #5d676d\">\n          <span>What you get</span>\n          <span style=\"justify-self: center; padding: 6px 14px; border-radius: 999px; background: #58a754; color: #ffffff\">Boone</span>\n          <span style=\"justify-self: center\">Typical DNA report</span>\n        </div>\n        <sc-for list=\"{{compare}}\" as=\"c\" hint-placeholder-count=\"8\">\n          <div style=\"display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; padding: 14px 18px; border-top: 1px solid #eef0ec; font-size: 16px; font-weight: 600\">\n            <span>{{c.label}}</span>\n            <span style=\"justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #e3f1dd; color: #2f5e1b; font-weight: 800\">✓</span>\n            <span style=\"justify-self: center; font-size: 14px; font-weight: 600; color: {{c.otherInk}}\">{{c.other}}</span>\n          </div>\n        </sc-for>\n      </div>\n    </div>\n  </section>  <!-- What's included + order -->\n  <section class=\"reveal\" id=\"order\" aria-labelledby=\"inc-heading\" style=\"scroll-margin-top: 110px; max-width: 1280px; margin: 0 auto; padding: 64px 0 128px\">\n    <div style=\"display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: 36px; overflow: hidden; background: #e3f1dd\">\n      <div style=\"padding: 56px; display: flex; flex-direction: column; gap: 22px\">\n        <h2 id=\"inc-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 52px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em\">What's <span style=\"color: #2f5e1b\">included</span></h2>\n        <p style=\"margin: 0; font-size: 18px; line-height: 1.55; color: #3d4a52\">An at-home testing kit, genetic nutrition analysis and access to the Boone app, so you can turn your results into everyday diet insight.</p>\n        <ul style=\"margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px\">\n          <sc-for list=\"{{included}}\" as=\"i\" hint-placeholder-count=\"8\">\n            <li style=\"display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; font-weight: 600\"><span style=\"flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #58a754; color: #ffffff\"><svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg></span>{{i.label}}</li>\n          </sc-for>\n        </ul>\n      </div>\n      <div style=\"position: relative; background: #ffffff; padding: 48px; display: flex; flex-direction: column; gap: 18px; justify-content: center\">\n        <img src=\"/_blob/6da0e50027ea3d47296e41ff110a3564\" alt=\"Opened Boone DNA kit with saliva collection tube and activation QR code\" style=\"width: 100%; height: 220px; object-fit: cover; border-radius: 22px\">\n        <div style=\"display: flex; align-items: baseline; gap: 10px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 60px; font-weight: 800; letter-spacing: -0.04em\">£198</span><span style=\"font-size: 16px; color: #5d676d\">one-off, free UK delivery</span></div>\n        <a class=\"btn-primary\" href=\"#\" style=\"display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border-radius: 999px; background: #58a754; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test →</a>\n        <div style=\"display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; color: #5d676d\">\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\"></rect><path d=\"M8 11V7a4 4 0 0 1 8 0v4\"></path></svg>\n          Secure checkout · 14-day returns on unused kits\n        </div>\n      </div>\n    </div>\n  </section>  <!-- Reviews -->\n  <section class=\"reveal\" aria-labelledby=\"reviews-heading\" style=\"margin: 0 -24px; background: #ffffff; padding: 120px 24px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px\">\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px\">\n        <div style=\"display: flex; flex-direction: column; gap: 12px\">\n          <div style=\"display: flex; align-items: center; gap: 10px\"><span style=\"font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800\">5.0</span><span style=\"color: #f0a92b; font-size: 22px; letter-spacing: 2px\">★★★★★</span><span style=\"font-size: 15px; font-weight: 600; color: #4d5a62\">on Google reviews</span></div>\n          <h2 id=\"reviews-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em\">What DNA customers <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">say</span></h2>\n        </div>\n        <a href=\"#\" style=\"font-size: 16px; font-weight: 700; color: #2f5e1b; text-decoration: underline; text-underline-offset: 3px\">Read all reviews on Google</a>\n      </div>\n      <div style=\"display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px\">\n        <sc-for list=\"{{reviews}}\" as=\"r\" hint-placeholder-count=\"2\">\n          <figure style=\"margin: 0; background: #f5f5f3; border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 22px\">\n            <span style=\"color: #f0a92b; font-size: 22px; letter-spacing: 2px\" aria-label=\"5 out of 5 stars\">★★★★★</span>\n            <blockquote style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 23px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em\">{{r.quote}}</blockquote>\n            <figcaption style=\"display: flex; align-items: center; gap: 12px; margin-top: auto\">\n              <span style=\"display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: {{r.tint}}; font-weight: 700\">{{r.initials}}</span>\n              <span style=\"display: flex; flex-direction: column; gap: 2px\"><strong style=\"font-size: 16px\">{{r.name}}</strong><span style=\"font-size: 14px; color: #5d676d\">Google review · DNA test</span></span>\n            </figcaption>\n          </figure>\n        </sc-for>\n      </div>\n    </div>\n  </section>  <!-- FAQs -->\n  <section class=\"reveal\" aria-labelledby=\"faq-heading\" style=\"max-width: 960px; margin: 0 auto; padding: 128px 0 112px; display: flex; flex-direction: column; align-items: center; gap: 32px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center\">\n      <h2 id=\"faq-heading\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em\">Your questions, <span style=\"background: linear-gradient(transparent 58%, #b5dcab 58%, #b5dcab 92%, transparent 92%); padding: 0 4px\">answered</span></h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #4d5a62\">The test, your results, and how the app works.</p>\n    </div>\n    <div style=\"width: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid #e3e8df; border-radius: 28px; padding: 8px 32px\">\n      <sc-for list=\"{{faqItems}}\" as=\"f\" hint-placeholder-count=\"12\">\n        <div style=\"{{f.rowStyle}}\">\n          <button type=\"button\" aria-expanded=\"{{f.expanded}}\" onClick=\"{{f.toggle}}\" style=\"width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; color: #1b2b36\">\n            <span style=\"font-size: 18px; font-weight: 600; line-height: 1.4\">{{f.q}}</span>\n            <span style=\"{{f.iconStyle}}\">{{f.icon}}</span>\n          </button>\n          <sc-if value=\"{{f.open}}\" hint-placeholder-val=\"{{ false }}\">\n            <p style=\"margin: 0; padding: 0 56px 24px 0; font-size: 17px; line-height: 1.65; color: #4d5a62\">{{f.a}}</p>\n          </sc-if>\n        </div>\n      </sc-for>\n    </div>\n  </section>\n  <section aria-labelledby=\"cta-heading\" style=\"max-width: 1280px; margin: 0 auto 96px; box-sizing: border-box; background: #58a754; border-radius: 40px; padding: 80px 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden\">\n    <div style=\"flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px\">\n      <h2 id=\"cta-heading\" class=\"h-big\" style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #ffffff\">Stop eating by guesswork.<br>Start eating with your biology.</h2>\n      <p style=\"margin: 0; font-size: 20px; line-height: 1.5; color: #13250d; max-width: 560px\">A personalised nutrition blueprint that connects your genetics with the meals you actually eat.</p>\n    </div>\n    <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 10px\">\n      <a class=\"store-btn\" href=\"/dna-nutrition-test#order\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 999px; background: #0f1a0b; color: #ffffff; font-size: 18px; font-weight: 700\">Order your DNA test · £198</a>\n      <span style=\"font-size: 14px; font-weight: 600; color: #13250d\">Free UK delivery · Secure checkout</span>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer style=\"margin: 0 -24px; background: #1b2b36; color: #c9d3d8; padding: 88px 24px 40px; box-sizing: border-box\">\n    <div style=\"max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px\">\n      <div style=\"display: flex; flex-wrap: wrap; gap: 56px\">\n        <div style=\"flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px\">\n          <a href=\"#\" style=\"display: flex; align-items: center\"><img src=\"/_blob/5930dc2c89021dbab3e64b01c6af9d7b\" alt=\"Boone Logo: Personalised Nutrition\" style=\"height: 44px; width: auto; display: block\"></a>\n          <p style=\"margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; max-width: 380px\">Personalised nutrition, aligned with your biology.</p>\n          <div style=\"display: flex; flex-direction: column; gap: 12px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Get the app</span><div style=\"display: flex; flex-wrap: wrap; gap: 10px\"><a href=\"https://apps.apple.com/gb/app/boone/id6739210113\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-1-2.4-4zM14 5.4c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Download on the</span><span style=\"font-size: 17px; font-weight: 700\">App Store</span></span></a><a href=\"https://play.google.com/store/apps/details?id=com.boone.boone&amp;hl=en_GB\" style=\"display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px; background: #0f1a0b; border: 1px solid rgba(255,255,255,0.28); color: #ffffff\"><svg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M4.5 2.8 13.7 12l-9.2 9.2c-.3-.2-.5-.6-.5-1V3.8c0-.4.2-.8.5-1zM14.7 13l2.4 2.4-11 6.3zM14.7 11 6.1 2.3l11 6.3zM18.3 9.3l2.6 1.5c.8.5.8 1.8 0 2.3l-2.6 1.5L15.6 12z\" fill=\"#ffffff\"></path></svg><span style=\"display: flex; flex-direction: column; line-height: 1.1\"><span style=\"font-size: 10px; opacity: 0.8\">Get it on</span><span style=\"font-size: 17px; font-weight: 700\">Google Play</span></span></a></div></div>\n          <form style=\"display: flex; flex-direction: column; gap: 10px; max-width: 420px\"><label for=\"footer-email\" style=\"font-size: 15px; color: #c9d3d8\">Nutrition tips and updates, once a month.</label><div style=\"display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 5px 5px 18px\"><input id=\"footer-email\" type=\"email\" placeholder=\"Your email\" style=\"flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #ffffff\"><button type=\"submit\" style=\"flex-shrink: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #58a754; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer\">Subscribe</button></div><span style=\"font-size: 13px; color: #9aa8b0\">See our <a href=\"/privacy-policy\" style=\"color: #c9d3d8; text-decoration: underline\">privacy policy</a> for details.</span></form>\n        </div>\n        <nav aria-label=\"Footer\" style=\"flex: 2.4 1 680px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px\"><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">The app</span><a class=\"foot-link\" href=\"/how-it-works\">How it works</a><a class=\"foot-link\" href=\"/app\">Features</a><a class=\"foot-link\" href=\"/science\">The science</a><a class=\"foot-link\" href=\"/dna-nutrition-test\">DNA test</a><a class=\"foot-link\" href=\"/activate\">Activate your test</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Food database</span><a class=\"foot-link\" href=\"/food-database\">Search the database</a><a class=\"foot-link\" href=\"/restaurant\">Restaurants</a><a class=\"foot-link\" href=\"/brand\">Brands</a><a class=\"foot-link\" href=\"/foods\">Everyday foods</a><a class=\"foot-link\" href=\"/kids-nutrition-age-adjusted-nutritional-info\">Kids nutrition</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Company</span><a class=\"foot-link\" href=\"/about\">About</a><a class=\"foot-link\" href=\"/press\">Press and recognition</a><a class=\"foot-link\" href=\"/sport\">For clubs and gyms</a><a class=\"foot-link\" href=\"/methodology\">Methodology</a><a class=\"foot-link\" href=\"/articles\">Articles</a><a class=\"foot-link\" href=\"/contact\">Contact</a></div><div style=\"display: flex; flex-direction: column; gap: 14px\"><span style=\"font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Legal</span><a class=\"foot-link\" href=\"/terms-conditions\">Terms and conditions</a><a class=\"foot-link\" href=\"/privacy-policy\">Privacy policy</a><a class=\"foot-link\" href=\"/cookie-policy\">Cookie policy</a><a class=\"foot-link\" href=\"/app-usage-policy\">App usage policy</a><a class=\"foot-link\" href=\"/returns\">Returns</a><a class=\"foot-link\" href=\"/delivery\">Delivery</a></div></nav>\n      </div>\n      <div style=\"display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12)\">\n        <div style=\"display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: #9aa8b0\"><span style=\"color: #c9d3d8\">© 2026 Boone App Ltd. All rights reserved.</span><span>Registered in England and Wales, company no. <a href=\"https://find-and-update.company-information.service.gov.uk/company/15774886\" style=\"color: #c9d3d8; text-decoration: underline\">15774886</a>. Registered office: Centrum, Colney Lane, Colney, Norwich NR4 7UG.</span></div>\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: 10px\"><span style=\"font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fd49a\">Follow Boone</span><div style=\"display: flex; gap: 10px\"><a href=\"https://www.linkedin.com/company/boone-app\" aria-label=\"Boone on LinkedIn\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M4 9h3.2v11H4zM5.6 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8zM9.5 9h3.1v1.5c.5-.9 1.7-1.8 3.4-1.8 3.4 0 4 2.2 4 5.1V20h-3.2v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V20H9.5z\" fill=\"#ffffff\"></path></svg></a><a href=\"https://www.instagram.com/boonenutrition/\" aria-label=\"Boone on Instagram\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><rect x=\"3.5\" y=\"3.5\" width=\"17\" height=\"17\" rx=\"5\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></rect><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2\"></circle><circle cx=\"17.2\" cy=\"6.8\" r=\"1.2\" fill=\"#ffffff\"></circle></svg></a><a href=\"https://www.tiktok.com/@booneapp\" aria-label=\"Boone on TikTok\" style=\"display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #ffffff\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3c.3 2.2 1.7 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.9-1.1v6.1a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.3a2.4 2.4 0 1 0 1.5 2.2V3z\" fill=\"#ffffff\"></path></svg></a></div></div>\n      </div>\n    </div>\n  </footer>\n</div>", "logic": "class Component extends DCLogic {\n  renderVals() {\n    const DEFAULT_DIET = 'Vegetarian';\n    const DIETS = ['Vegetarian', 'Vegan', 'Pescatarian', 'Meat eater'];\n    const LOWER = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eating' };\n    const SLUG = { 'Vegetarian': 'vegetarian', 'Vegan': 'vegan', 'Pescatarian': 'pescatarian', 'Meat eater': 'meat-eater' };\n    const st = this.state || {};\n    const diet = st.diet || DEFAULT_DIET;\n    const mkTabs = (dark) => DIETS.map((d) => {\n      const on = d === diet;\n      return {\n        label: d, selected: on ? 'true' : 'false',\n        style: on ? 'background: #58a754; color: #0f1a0b; border-color: #58a754' : (dark ? 'background: transparent; color: #e3e9ec; border-color: rgba(255,255,255,0.28)' : 'background: #ffffff; color: #1b2b36; border-color: #dfe5db'),\n        pick: () => this.setState({ diet: d })\n      };\n    });\n\n    const labelStyle = (l) => l === 'Focus' ? 'background: #1b2b36; color: #ffffff' : (l === 'Worth knowing' ? 'background: #fbeed9; color: #8a4a0b' : 'background: #e7efe3; color: #2f5e1b');\n    const segs = (n, c, off) => [1, 2, 3, 4, 5].map((i) => ({ bg: i <= n ? c : (off || '#e6e9e4') }));\n\n    const AREAS = [{\"key\": \"carbs\", \"name\": \"Carbs and energy\", \"short\": \"Carbs\", \"slug\": \"carbs-and-energy\", \"c\": \"#e07b39\", \"tint\": \"#fce9dc\", \"deep\": \"#9a4a12\", \"intro\": \"How your blood sugar may respond to carbohydrates, and how quickly your body releases insulin to bring it back down.\", \"why\": \"Two people can eat the same bowl of white pasta and see very different blood sugar curves. Your genes are one reason why. Knowing your tendency tells you whether swapping to wholegrains, or pairing carbs with protein and fibre, is likely to make a real difference for you.\", \"page\": \"page 8\", \"results\": [{\"name\": \"Glucose response\", \"what\": \"How much your blood sugar may rise after refined carbs, and how quickly it settles.\", \"score\": 4, \"label\": \"Focus\"}], \"genes\": [\"ADCY5\", \"ADIPOQ\", \"G6PC2\", \"GCK\", \"GCKR\", \"IRS1\", \"PPARG\", \"TCF7L2\"]}, {\"key\": \"fats\", \"name\": \"Fats\", \"short\": \"Fats\", \"slug\": \"fats\", \"c\": \"#3f86c0\", \"tint\": \"#e2edf6\", \"deep\": \"#1b4a63\", \"intro\": \"How you convert plant omega-3, clear fats from your blood after meals, and respond to saturated and unsaturated fat.\", \"why\": \"Fat advice is usually one size fits all. Your genes shape how much ready-made omega-3 you need, and whether swapping fats is likely to move your numbers.\", \"page\": \"page 7\", \"results\": [{\"name\": \"Omega-3\", \"what\": \"How well you turn plant omega-3 (ALA) into EPA and DHA.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Lipid handling\", \"what\": \"How quickly you clear fats and cholesterol from your blood after meals.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Saturated fat\", \"what\": \"Whether your genes change how you respond to saturated fat.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Unsaturated fat\", \"what\": \"How you respond to olive oil, nuts, seeds and oily fish.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"APOA2\", \"APOA5\", \"APOB\", \"ELOVL2\", \"FADS1\", \"FTO\", \"GCKR\", \"LDLR\", \"LPA\", \"LPL\", \"PNPLA3\", \"PPARG\", \"TRIB1\"]}, {\"key\": \"protein\", \"name\": \"Protein\", \"short\": \"Protein\", \"slug\": \"protein\", \"c\": \"#a463a0\", \"tint\": \"#f3e6f2\", \"deep\": \"#6b3368\", \"intro\": \"How strongly protein keeps you full, and whether the total amount you eat matters more for you than for most people.\", \"why\": \"For some people protein is the single most useful lever on appetite. If that is you, building meals around it makes the rest of your diet easier.\", \"page\": \"page 5\", \"results\": [{\"name\": \"Protein and fullness\", \"what\": \"How strongly protein keeps you full after a meal.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Protein amount\", \"what\": \"Whether your total daily protein matters more for you than average.\", \"score\": 5, \"label\": \"Focus\"}], \"genes\": [\"FGF21\", \"FTO\", \"TFAP2B\"]}, {\"key\": \"vit\", \"name\": \"Vitamins and minerals\", \"short\": \"Vitamins\", \"slug\": \"vitamins-and-minerals\", \"c\": \"#58a754\", \"tint\": \"#e3f1dd\", \"deep\": \"#2f5e1b\", \"intro\": \"How you absorb, activate and carry eleven vitamins and minerals, from B12 and folate to calcium, iron and vitamin D.\", \"why\": \"Your genes can make some nutrients harder to get from the same food. That matters most when your diet already has fewer sources, such as B12 on a plant-based diet.\", \"page\": \"page 6\", \"results\": [{\"name\": \"Choline\", \"what\": \"How much choline you make yourself, so how much you need from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin C\", \"what\": \"How efficiently you absorb vitamin C from food.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Vitamin B12\", \"what\": \"How well you absorb and carry B12.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"B2, B6 and B9\", \"what\": \"How efficiently you turn folate into its active form.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Calcium\", \"what\": \"How vitamin D helps you absorb calcium.\", \"score\": 4, \"label\": \"Focus\"}, {\"name\": \"Vitamin D\", \"what\": \"How you make, carry and activate vitamin D.\", \"score\": 2, \"label\": \"Worth knowing\"}, {\"name\": \"Vitamin A\", \"what\": \"How you convert beta-carotene from plants into vitamin A.\", \"score\": 2, \"label\": \"No change\"}, {\"name\": \"Iron\", \"what\": \"How you absorb and store iron.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Sodium\", \"what\": \"Whether your genes change how you handle salt.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin E\", \"what\": \"How you use and store vitamin E.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Vitamin K\", \"what\": \"How you break down vitamin K.\", \"score\": 1, \"label\": \"No change\"}], \"genes\": [\"ADD1\", \"BCO1\", \"BHMT\", \"CHDH\", \"CUBN\", \"CYP1A1\", \"CYP2R1\", \"CYP4F2\", \"FUT2\", \"GC\", \"HFE\", \"MTHFR\", \"PEMT\", \"RBP4\", \"SCARB1\", \"SLC23A1\", \"TCN2\", \"TF\", \"TMPRSS6\", \"TTR\", \"VDR\"]}, {\"key\": \"beh\", \"name\": \"Behaviour and sensitivities\", \"short\": \"Behaviour\", \"slug\": \"behaviour-and-sensitivities\", \"c\": \"#e2a024\", \"tint\": \"#fbeed9\", \"deep\": \"#8a4a0b\", \"intro\": \"Appetite and snacking, caffeine, alcohol, lactose and bitter taste: the traits that shape what you reach for.\", \"why\": \"These results explain everyday experiences, like why a late coffee does or doesn’t keep you up, or why snacks are harder to ignore. They are often the most recognisable part of the report.\", \"page\": \"page 11\", \"results\": [{\"name\": \"Snacking and appetite\", \"what\": \"How strongly you feel hunger and the pull of snacks.\", \"score\": 5, \"label\": \"Focus\"}, {\"name\": \"Caffeine\", \"what\": \"Whether you clear caffeine faster or slower than average.\", \"score\": 1, \"label\": \"Worth knowing\"}, {\"name\": \"Alcohol\", \"what\": \"How quickly you break down acetaldehyde, the by-product of alcohol.\", \"score\": 0, \"label\": \"Worth knowing\"}, {\"name\": \"Bitter taste\", \"what\": \"How bitter greens like broccoli and kale taste to you.\", \"score\": 1, \"label\": \"No change\"}, {\"name\": \"Lactose\", \"what\": \"Whether you are likely to digest lactose as an adult.\", \"score\": 0, \"label\": \"No change\"}], \"genes\": [\"ALDH2\", \"BDNF\", \"CYP1A1\", \"CYP1A2\", \"MC4R\", \"MCM6\", \"TAS2R38\"]}];\n    const ADVICE = {\"Vegetarian\": {\"b12\": [\"A B12 source every day\", \"Milk, yoghurt, an egg or fortified cereal each count.\"], \"cho\": [\"Eat eggs regularly\", \"By far the richest vegetarian choline source, and good protein.\"], \"cal\": [\"Calcium three times a day\", \"Dairy, calcium-set tofu or fortified plant milk at each meal.\"], \"changes\": [\"B12 from dairy, eggs and fortified foods\", \"Algae oil for ready-made omega-3, without fish\", \"Eggs, soya and beans for choline and folate\"]}, \"Vegan\": {\"b12\": [\"Take a daily B12 supplement\", \"The simplest, most reliable way to cover B12 on a vegan diet.\"], \"cho\": [\"Soya every day\", \"Tofu, tempeh, edamame or soya milk are the best vegan choline sources.\"], \"cal\": [\"Calcium three times a day\", \"Calcium-set tofu, fortified plant milk or fortified soya yoghurt at each meal.\"], \"changes\": [\"A daily B12 supplement or fortified foods\", \"Algae oil for omega-3 from a plant source\", \"Soya, beans and fortified foods for choline and calcium\"]}, \"Pescatarian\": {\"b12\": [\"Fish two or three times a week\", \"Salmon, sardines, mackerel, tuna and shellfish are rich in B12.\"], \"cho\": [\"Eggs and fish through the week\", \"Eggs are the richest source; salmon, cod and prawns add more.\"], \"cal\": [\"Calcium three times a day\", \"Dairy, calcium-set tofu or tinned sardines with their bones.\"], \"changes\": [\"Fish, eggs and dairy for B12\", \"Oily fish twice a week for omega-3\", \"Sardines with bones as a calcium source\"]}, \"Meat eater\": {\"b12\": [\"A B12 source most days\", \"Meat, fish, eggs or dairy each count.\"], \"cho\": [\"Eggs a few times a week\", \"The richest choline source of all.\"], \"cal\": [\"Calcium three times a day\", \"Milk, yoghurt or cheese at each meal is the easiest route.\"], \"changes\": [\"Meat, fish, eggs and dairy for B12\", \"Oily fish twice a week for omega-3\", \"Eggs, chicken and beef for choline\"]}};\n    const heroTicks = ['Free UK delivery', 'At-home saliva test', '14-day returns on unused kits', 'Secure checkout'].map(function (l) { return { label: l }; });\n    const words = ['Glucose response', 'Omega-3', 'Protein and fullness', 'Vitamin B12', 'Choline', 'Caffeine', 'Lactose', 'Vitamin D', 'Iron', 'Snacking and appetite', 'Calcium', 'Alcohol'];\n    const tickerItems = words.concat(words).map(function (w) { return { label: w }; });\n    const steps = [\n      { n: '1', img: '/_blob/6da0e50027ea3d47296e41ff110a3564', alt: 'Opened Boone DNA kit with saliva collection tube', pos: 'center', bg: '#e3f1dd',\n        title: 'Take your at-home DNA nutrition test', body: 'Order your kit, take a saliva sample at home and send it back. Boone reads 48 genes linked to how you use nutrients, respond to food and feel hunger.' },\n      { n: '2', img: '/_blob/6ecf7baabdd89dd3e7c8814db930590f', alt: 'Boone app genetic summary screen', pos: 'top', bg: '#dff0f8',\n        title: 'Get your report and blueprint', body: 'A 15-page report with your five priorities, all 23 results and food advice for your diet, plus your Biological Nutrition Blueprint in the app.' },\n      { n: '3', img: '/_blob/a46e2855a0a831118608177dba3e26be', alt: 'A woman logging breakfast in the Boone app at her kitchen table', pos: 'center', bg: '#fbeed9',\n        title: 'Track meals against your biology', body: 'Log meals with photos, scans or receipts. Boone shows how what you actually eat lines up with your results, day after day.' }\n    ];\n    const areas = AREAS.map((a) => Object.assign({}, a, {\n      href: '/dna-nutrition-test/' + a.slug,\n      count: a.results.length === 1 ? '1 result' : a.results.length + ' results',\n      is_carbs: a.key === 'carbs', is_fats: a.key === 'fats', is_protein: a.key === 'protein', is_vit: a.key === 'vit', is_beh: a.key === 'beh'\n    }));\n    const stats = [\n      { n: '48', label: 'genes analysed', sub: 'Each one linked to nutrition in published research', ink: '#1b2b36' },\n      { n: '23', label: 'nutrition results', sub: 'From glucose response to vitamin D', ink: '#2f5e1b' },\n      { n: '5', label: 'areas of your diet', sub: 'Carbs, fats, protein, vitamins, behaviour', ink: '#9a4a12' },\n      { n: '15', label: 'page report', sub: 'Priorities first, every gene explained', ink: '#1b4a63' },\n      { n: '4', label: 'diets supported', sub: 'Vegetarian, vegan, pescatarian, meat eater', ink: '#6b3368' }\n    ];\n    const dietCards = DIETS.map((d) => ({\n      name: d, b12t: ADVICE[d].b12[0], b12s: ADVICE[d].b12[1], chot: ADVICE[d].cho[0], chos: ADVICE[d].cho[1],\n      href: '/dna-nutrition-test/' + SLUG[d], link: 'DNA test for ' + (d === 'Meat eater' ? 'meat eaters' : LOWER[d] + 's')\n    }));\n    const changes = ADVICE[diet].changes.map((t) => ({ t: t }));\n    const muted = '#8a949a', mid = '#9a4f09';\n    const compare = [\n      { label: 'At-home DNA sample', other: 'Yes', otherInk: muted },\n      { label: 'Nutrition blueprint', other: 'Yes', otherInk: muted },\n      { label: 'Advice written for your diet', other: 'Rarely', otherInk: mid },\n      { label: 'Micronutrient tracking', other: 'Rarely', otherInk: mid },\n      { label: 'Meal photo analysis', other: 'No', otherInk: '#5d676d' },\n      { label: 'Links DNA to daily meals', other: 'No', otherInk: '#5d676d' },\n      { label: 'Long-term diet patterns', other: 'No', otherInk: '#5d676d' },\n      { label: 'Nutrition-first, not supplements', other: 'Sometimes', otherInk: mid }\n    ];\n    const included = ['At-home saliva DNA test kit', 'Laboratory genetic analysis', '15-page report with advice for your diet', 'Personalised Biological Nutrition Blueprint', 'Boone app meal analysis and nutrition tracking',\n      'Macronutrients, micronutrients and food quality', 'Long-term dietary pattern tracking', 'Free standard UK delivery'].map(function (l) { return { label: l }; });\n    const reviews = [\n      { quote: \"The DNA results are easy to understand but detailed enough to make you think carefully about your dietary choices. I've already changed a few of mine as a result.\", name: 'Josh A.', initials: 'JA', tint: '#e3f1dd' },\n      { quote: 'Incredibly useful app for anyone wishing to understand the impact their diet has on their body. I found the clear DNA analysis fascinating to read and deeply informative.', name: 'Martin K.', initials: 'MK', tint: '#dff0f8' }\n    ];\n    const faqData = [\n      { q: 'Can I see a sample report before I buy?', a: 'Yes. You can read a full 15-page sample report online or download it as a PDF, in a version for each diet: vegetarian, vegan, pescatarian or meat eater. It is a real report with the name removed.' },\n      { q: 'What will my nutrition report include?', a: 'Your five priorities, all 23 results scored 0 to 5 for genetic influence, a full page of food advice for each Focus result, useful facts for results worth knowing, and a plain-English explanation of all 48 genes.' },\n      { q: 'Is the advice different if I am vegan or vegetarian?', a: 'Your genetic results are the same whatever you eat. The food advice changes: which foods to lean on, which to go easy on and what to do first are written for your diet.' },\n      { q: 'What do the scores mean?', a: 'Each result is scored 0 to 5 for how much say your genes have. A high score is not bad and a low score is not good. It shows where small changes are likely to make the biggest difference for you.' },\n      { q: 'Which genes do you look at?', a: 'Boone interprets 48 genes linked to nutrition in published research, covering carbs, fats, protein, vitamins and minerals, and behaviour such as appetite and caffeine. You can see every gene and what it does on our genes page.' },\n      { q: 'How does the Boone DNA nutrition test work?', a: 'Order your kit online, provide a simple saliva sample at home and return it using the instructions provided. Your sample is analysed for selected genetic markers linked to nutrient metabolism, absorption and dietary response.' },\n      { q: 'Is Boone a DNA food allergy test, food sensitivity test or food intolerance test?', a: 'No. Boone is a DNA nutrition test focused on selected genetic markers linked to nutrient metabolism and dietary response. It is not a food allergy, sensitivity or intolerance test, or a medical diagnostic test.' },\n      { q: 'Is Boone a medical test?', a: 'No. Boone is designed to support personalised nutrition insight and education. It does not diagnose, treat or prevent disease, and it should not replace advice from a qualified healthcare professional.' },\n      { q: 'Is my genetic and nutrition data private?', a: \"Boone states that genetic and nutrition data are encrypted and stored securely, and that personal or genetic information is not shared without explicit permission. For full details please review Boone's privacy policy.\" },\n      { q: 'How much does the Boone DNA nutrition test cost?', a: 'The Boone DNA test kit is £198, with free standard UK delivery included on every order.' },\n      { q: 'Can I return my DNA test kit?', a: 'Returns are accepted only if the kit is unused, unopened, still in its original packaging, requested within 14 days of delivery and not registered, activated or used.' },\n      { q: 'Who is Boone for?', a: 'People who want a clearer, more personalised view of how their body may interact with food, whether they are focused on everyday health, energy, training or making better decisions for their household.' }\n    ];\n    const faqOpen = st.faqOpen !== undefined ? st.faqOpen : 0;\n    const faqItems = faqData.map((f, i) => {\n      const open = i === faqOpen;\n      const last = i === faqData.length - 1;\n      return {\n        q: f.q, a: f.a, open: open, expanded: open ? 'true' : 'false', icon: open ? '−' : '+',\n        rowStyle: last ? 'border-bottom: 0;' : (open ? 'border-bottom: 2px solid #58a754;' : 'border-bottom: 1px solid #e9ece6;'),\n        iconStyle: 'flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; font-size: 22px; font-weight: 500; line-height: 1;' + (open ? ' background: #58a754; color: #0f1a0b;' : ' background: #f1f4ef; color: #1b2b36;'),\n        toggle: () => this.setState({ faqOpen: open ? null : i })\n      };\n    });\n    return { heroTicks, tickerItems, steps, areas, stats, compare, included, reviews, faqItems, dietCards, changes,\n      diet: diet, dietTitle: diet, dietLower: LOWER[diet], tabsDark: mkTabs(true),\n      pdfHref: '/downloads/boone-sample-dna-report-' + SLUG[diet] + '.pdf' };\n  }\n}"}}, "css": ".dcx{margin:0;background:#f5f5f3;font-family:'Figtree',system-ui,sans-serif;color:#1b2b36}.dcx a{color:#1b2b36;text-decoration:none}.dcx a:hover{color:#3f7a24}.dcx .nav-link:hover{background:#f3f8ef}.dcx .nav-cta:hover{background:#4c9448 !important;color:#ffffff !important}.dcx .btn-primary:hover{background:#4c9448 !important}.dcx .btn-outline:hover{background:#ffffff !important}.dcx .press-tile{transition:transform .2s ease,box-shadow .2s ease}.dcx .press-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,0.25)}@keyframes boone-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}.dcx .ticker-track{animation:boone-ticker 40s linear infinite}.dcx .ticker-reverse{animation-direction:reverse;animation-duration:55s}.dcx .btn-soft:hover{background:#dbe3d6 !important}.dcx .mini-logo{filter:grayscale(1);opacity:0.75}.dcx .foot-link{color:#e3e9ec;font-size:16px;text-decoration:none}.dcx .foot-link:hover{color:#9fd49a}.dcx .foot-small{font-size:14px;color:#c9d3d8}.dcx .store-btn:hover{background:#1b2b36 !important}.dcx .step-num{position:relative;z-index:1;box-shadow:0 0 0 10px #17251d}@media (max-width: 900px){.dcx .steps-grid{grid-template-columns:minmax(0,1fr) !important}.dcx .steps-line{display:none}}.dcx .quick-chip:hover{border-color:#58a754 !important;background:#f3f8ef !important}@media (prefers-reduced-motion: reduce){.dcx .ticker-track{animation:none}}@keyframes plate-in{from{opacity:0;transform:rotate(-30deg) scale(.9)}to{opacity:1;transform:none}}@keyframes plate-spin{from{rotate:0deg}to{rotate:360deg}}@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes reveal-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}.dcx .hero-plate{animation:plate-in 1.2s cubic-bezier(.2,.8,.2,1) both,plate-spin 60s linear 1.2s infinite}.dcx .persona-card{animation:pop-in .7s cubic-bezier(.2,.8,.2,1) both}.dcx .persona-card:nth-child(2){animation-delay:.5s}.dcx .persona-card:nth-child(3){animation-delay:.75s}.dcx .persona-card:nth-child(4){animation-delay:1s}.dcx .bar-fill{transform-origin:left center;animation:bar-grow 1.1s cubic-bezier(.2,.8,.2,1) 1.2s both}@supports (animation-timeline: view()){.dcx .reveal{animation:reveal-up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}@media (prefers-reduced-motion: reduce){.dcx .hero-plate,.dcx .persona-card,.dcx .bar-fill,.dcx .reveal{animation:none !important}}@media (max-width: 900px){.dcx .nav-links,.dcx .nav-signin{display:none !important}.dcx .nav-menu{display:inline-flex !important}.dcx .hero-title{font-size:44px !important}.dcx .banner-text-long{display:none !important}.dcx .plate-wrap{width:320px !important;height:320px !important}.dcx .stat-card{transform:scale(0.85)}}@media (min-width: 901px){.dcx .banner-text-short{display:none !important}}.dcx .cat-card{transition:transform .25s ease,box-shadow .25s ease}.dcx .cat-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(27,43,54,0.14)}@keyframes float-a{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-10px)}}@keyframes float-b{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-14px)}}.dcx .phone-a{animation:float-a 7s ease-in-out infinite}.dcx .phone-b{animation:float-b 8s ease-in-out infinite .6s}.dcx .hero-chip{animation:pop-in .7s cubic-bezier(.2,.8,.2,1) both .8s}@media (prefers-reduced-motion: reduce){.dcx .cat-card{transition:none}.dcx .phone-a,.dcx .phone-b,.dcx .hero-chip{animation:none}}.dcx .float-phone{animation:float-c 7s ease-in-out infinite}@keyframes float-c{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.dcx .hero-chip{animation:pop-in .7s cubic-bezier(.2,.8,.2,1) both .8s}@media (prefers-reduced-motion: reduce){.dcx .float-phone,.dcx .hero-chip{animation:none}}.dcx .tab-btn{transition:background .15s ease,color .15s ease}.dcx .tab-btn:hover{border-color:#58a754 !important}.dcx .page-btn:hover{background:#f3f8ef !important}.dcx .area-card{transition:transform .2s ease,box-shadow .2s ease}.dcx .area-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,43,54,0.12)}.dcx .thumb-tilt{transition:transform .3s ease}@media (max-width: 900px){.dcx .h-big{font-size:44px !important}.dcx .h-mid{font-size:38px !important}.dcx .stack-sm{grid-template-columns:minmax(0,1fr) !important}}.dcx .nav-dd-panel{display:none}.dcx .nav-dd:hover .nav-dd-panel,.dcx .nav-dd:focus-within .nav-dd-panel{display:block}.dcx .nav-dd-item:hover{background:#f3f8ef}"}