on this /Blog page, positioned above the header "AEO-READY SOLUTIONS" add the following CSS: <style>

/* * Data Insight - AI Framework * Self-contained, namespaced CSS. No JavaScript or external assets required. * Set --di-ai-font on .di-ai-framework to use a different website font. * Uses the site's Roboto font when available; otherwise Arial/Helvetica. * Container queries respond to the EMBED width, not the browser width. */ .di-ai-framework { --di-ai-background: #081931; --di-ai-card: #1a2b42; --di-ai-border: #596f7d; --di-ai-text: #f8f9fc; --di-ai-blue: #085394; --di-ai-blue-card: #20619d; --di-ai-font: "Roboto", Arial, Helvetica, sans-serif; display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: var(--di-ai-background); color: var(--di-ai-text); font-family: var(--di-ai-font); font-style: normal; font-weight: 400; line-height: 1.4; text-align: center; text-transform: none; letter-spacing: normal; overflow-wrap: normal; word-break: normal; container-type: inline-size; container-name: di-ai-framework; isolation: isolate; } .di-ai-framework, .di-ai-framework *, .di-ai-framework *::before, .di-ai-framework *::after { box-sizing: border-box; } .di-ai-framework .di-ai__canvas { width: 100%; margin: 0; padding: 20px 14px; font-family: var(--di-ai-font); font-size: 14px; line-height: 1.4; } .di-ai-framework .di-ai__pillars, .di-ai-framework .di-ai__grid { display: grid; list-style: none; margin: 0; padding: 0; } .di-ai-framework .di-ai__pillars > li, .di-ai-framework .di-ai__grid > li { float: none; position: static; margin: 0; list-style: none; text-indent: 0; } /* Do not inherit a theme's decorative list bullets. */ .di-ai-framework .di-ai__pillars > li::before, .di-ai-framework .di-ai__pillars > li::after, .di-ai-framework .di-ai__grid > li::before, .di-ai-framework .di-ai__grid > li::after { content: none; } /* The five disciplines across the top. */ .di-ai-framework .di-ai__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .di-ai-framework .di-ai__pillar { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 82px; padding: 12px 8px; border: 0; border-radius: 20px; color: var(--di-ai-text); font-size: 18px; font-weight: 700; line-height: 1.32; text-align: center; } .di-ai-framework .di-ai__pillar--ai { background: #3b2c49; } .di-ai-framework .di-ai__pillar--retrieval { background: #102a51; } .di-ai-framework .di-ai__pillar--pr { background: #0d3044; } .di-ai-framework .di-ai__pillar--content { background: #2e3734; } .di-ai-framework .di-ai__pillar--intent { grid-column: 1 / -1; background: #362056; } .di-ai-framework .di-ai__pillar-subtitle { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; line-height: 1.3; } /* Mobile-first panel layout. Older browsers also get this usable layout. */ .di-ai-framework .di-ai__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "data" "third" "owned" "onsite" "paid" "query" "multimodal" "multimedia" "kpis"; gap: 14px; margin: 18px 0 0; padding: 0; } .di-ai-framework .di-ai__panel { display: flex; flex-direction: column; align-self: stretch; min-width: 0; margin: 0; padding: 14px; border: 2px solid var(--di-ai-border); border-radius: 22px; background: var(--di-ai-background); color: var(--di-ai-text); box-shadow: none; } .di-ai-framework .di-ai__title { display: block; margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--di-ai-text); font-family: var(--di-ai-font); font-size: 19px; font-style: normal; font-weight: 700; line-height: 1.25; text-align: center; text-transform: none; letter-spacing: normal; } .di-ai-framework .di-ai__grid { min-width: 0; grid-auto-rows: minmax(70px, auto); gap: 8px; } .di-ai-framework .di-ai__cell { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 0; padding: 8px 6px; border: 0; border-radius: 12px; background: var(--di-ai-card); color: var(--di-ai-text); font-family: var(--di-ai-font); font-size: 14px; font-weight: 400; line-height: 1.4; text-align: center; text-transform: none; letter-spacing: normal; } .di-ai-framework .di-ai__cell > span { display: block; width: 100%; min-width: 0; } .di-ai-framework .di-ai__cell strong { color: inherit; font: inherit; font-weight: 700; } /* Grid-area names keep the markup in a logical reading order. */ .di-ai-framework .di-ai__data { grid-area: data; } .di-ai-framework .di-ai__third { grid-area: third; } .di-ai-framework .di-ai__owned { grid-area: owned; } .di-ai-framework .di-ai__onsite { grid-area: onsite; } .di-ai-framework .di-ai__paid { grid-area: paid; } .di-ai-framework .di-ai__query { grid-area: query; } .di-ai-framework .di-ai__multimodal { grid-area: multimodal; } .di-ai-framework .di-ai__multimedia { grid-area: multimedia; } .di-ai-framework .di-ai__kpis { grid-area: kpis; } /* Data layer: one column on phones; the original 2/4 + 2/2/2 grid above. */ .di-ai-framework .di-ai__data-grid { grid-template-columns: minmax(0, 1fr); } .di-ai-framework .di-ai__data .di-ai__cell { border-radius: 6px; font-size: 16px; } /* Third-party citations: 3 + 3 + one full-width cell. */ .di-ai-framework .di-ai__third-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); } .di-ai-framework .di-ai__third .di-ai__cell { padding: 7px 2px; font-size: 12px; overflow-wrap: anywhere; } .di-ai-framework .di-ai__third-grid > :last-child { grid-column: 1 / -1; } /* Owned assets and on-site optimization. */ .di-ai-framework .di-ai__owned-grid, .di-ai-framework .di-ai__onsite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Paid/earned citations: 2 columns on phones; 4 + 3 on larger embeds. */ .di-ai-framework .di-ai__paid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .di-ai-framework .di-ai__paid-grid > :last-child { grid-column: 1 / -1; } /* Blue panels. */ .di-ai-framework .di-ai__query, .di-ai-framework .di-ai__kpis { background: var(--di-ai-blue); border-color: #738c9e; } .di-ai-framework .di-ai__query .di-ai__title, .di-ai-framework .di-ai__kpis .di-ai__title { font-size: 17px; } .di-ai-framework .di-ai__query .di-ai__cell, .di-ai-framework .di-ai__kpis .di-ai__cell { background: var(--di-ai-blue-card); font-size: 12px; line-height: 1.35; } .di-ai-framework .di-ai__query-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(50px, auto); } .di-ai-framework .di-ai__query .di-ai__cell { padding: 6px 2px; font-size: clamp(11px, 3.05cqw, 12px); overflow-wrap: anywhere; } /* Four single-line resource bars at the reference desktop size. */ .di-ai-framework .di-ai__multimodal-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(38px, auto); gap: 6px; } .di-ai-framework .di-ai__multimodal .di-ai__cell { padding: 6px 8px; border-radius: 5px; font-size: 14px; } /* Multimedia: 3 cells above 2 equally wide cells. */ .di-ai-framework .di-ai__multimedia-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .di-ai-framework .di-ai__multimedia .di-ai__cell { grid-column: span 2; } .di-ai-framework .di-ai__multimedia .di-ai__cell:nth-child(n + 4) { grid-column: span 3; } /* KPI order is row-by-row, matching the image. */ .di-ai-framework .di-ai__kpis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(50px, auto); gap: 8px 16px; } /* TABLET / NARROW WEBSITE COLUMNS: 760px to 1399px. */ @container di-ai-framework (min-width: 760px) { .di-ai-framework .di-ai__canvas { padding: 24px 20px; } .di-ai-framework .di-ai__pillars { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .di-ai-framework .di-ai__pillar { grid-column: span 2; min-height: 88px; font-size: 21px; } .di-ai-framework .di-ai__pillar--content, .di-ai-framework .di-ai__pillar--intent { grid-column: span 3; } .di-ai-framework .di-ai__pillar-subtitle { font-size: 16px; } .di-ai-framework .di-ai__body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "data data" "third owned" "onsite onsite" "paid paid" "query multimodal" "multimedia kpis"; gap: 16px; margin-top: 24px; } .di-ai-framework .di-ai__data-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .di-ai-framework .di-ai__data-grid > .di-ai__cell { grid-column: span 2; } .di-ai-framework .di-ai__data-grid > .di-ai__tracking { grid-column: span 4; } .di-ai-framework .di-ai__onsite-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .di-ai-framework .di-ai__third-grid { flex: 1; } .di-ai-framework .di-ai__paid-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .di-ai-framework .di-ai__paid-grid > .di-ai__cell { grid-column: span 3; } .di-ai-framework .di-ai__paid-grid > .di-ai__cell:nth-child(n + 5) { grid-column: span 4; } } /* WIDE DESKTOP: reference layout. At 2032px wide the canvas is 988px tall. */ @container di-ai-framework (min-width: 1400px) { .di-ai-framework .di-ai__canvas { /* One reference em = 16px at the original image width of 2032px. */ font-size: clamp(12px, 0.787401575cqw, 24px); padding: 2.5em 1.875em 1.75em 1.375em; } .di-ai-framework .di-ai__pillars { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25em; } .di-ai-framework .di-ai__pillar { grid-column: auto; height: 3.857142857em; min-height: 0; padding: 0.4em 0.5em; border-radius: 1em; font-size: 1.75em; line-height: 1.32; } .di-ai-framework .di-ai__pillar-subtitle { margin-top: 0.35em; font-size: 0.785714286em; } .di-ai-framework .di-ai__body { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 15.875em 15.125em 15.125em; grid-template-areas: "data data third owned owned" "onsite onsite paid paid ." "query multimodal . multimedia kpis"; gap: 0.875em 1.25em; margin-top: 2.875em; } .di-ai-framework .di-ai__panel { align-self: start; height: 15.125em; padding: 0.875em; border-width: 0.1875em; border-radius: 1.75em; } .di-ai-framework .di-ai__data { height: 15.875em; } .di-ai-framework .di-ai__title { margin-bottom: 0.727272727em; font-size: 1.375em; line-height: 1.25; } .di-ai-framework .di-ai__grid { flex: none; grid-auto-rows: 4.875em; gap: 0.5em; } .di-ai-framework .di-ai__cell { padding: 0.35em 0.4em; border-radius: 1em; font-size: 1em; } .di-ai-framework .di-ai__data .di-ai__cell { padding: 0.2em 0.3em; border-radius: 0.272727273em; font-size: 1.375em; line-height: 1.4; } .di-ai-framework .di-ai__third-grid { grid-auto-rows: 3em; } .di-ai-framework .di-ai__third .di-ai__cell { padding: 0.2em 0.1em; font-size: 0.8125em; line-height: 1.35; overflow-wrap: normal; } .di-ai-framework .di-ai__owned-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .di-ai-framework .di-ai__paid { transform: translateY(-0.375em); } .di-ai-framework .di-ai__query .di-ai__title, .di-ai-framework .di-ai__kpis .di-ai__title { margin-bottom: 0.95em; font-size: 1.25em; line-height: 1.25; } .di-ai-framework .di-ai__query-grid { grid-auto-rows: 3.125em; } .di-ai-framework .di-ai__query .di-ai__cell, .di-ai-framework .di-ai__kpis .di-ai__cell { padding: 0.35em 0.25em; border-radius: 1em; font-size: 0.75em; line-height: 1.35; overflow-wrap: normal; } .di-ai-framework .di-ai__multimodal { /* Small offsets reproduce the alignment in the supplied artwork. */ transform: translateX(0.3125em); } .di-ai-framework .di-ai__multimodal-grid { grid-auto-rows: 2.25em; gap: 0.375em; } .di-ai-framework .di-ai__multimodal .di-ai__cell { padding: 0.25em 0.4em; border-radius: 0.3125em; font-size: 1em; line-height: 1.25; } .di-ai-framework .di-ai__kpis { transform: translateX(0.625em); } .di-ai-framework .di-ai__kpis-grid { grid-auto-rows: 3em; column-gap: 2.25em; } } /* Make very narrow embeds usable without clipped words. */ @container di-ai-framework (max-width: 359px) { .di-ai-framework .di-ai__canvas { padding-right: 10px; padding-left: 10px; } .di-ai-framework .di-ai__pillar { font-size: 16px; } .di-ai-framework .di-ai__third-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .di-ai-framework .di-ai__third .di-ai__cell { overflow-wrap: normal; } }