.brxe-code{width:100%}/* BREAKPOINT: Desktop (BASE) *//* =====================================================================  STATE OF NOTION CONSULTING 2026 — Report styles (v4)  ---------------------------------------------------------------------  WHAT CHANGED FROM v3  1. The report no longer caps its own width. The ACSS Container owns the   outer width + side gutters; every block here fills it (width:100%).   Removed --report-wide and the .report padding-inline/padding-block.  2. Prose sections (Methodology + the 7 questions) are now a two-column   EDITORIAL GRID: a heading rail (eyebrow + H2) on the left, a readable   body column on the right. Fills the width AND keeps line length sane.   Requires the HTML wrappers .report__section-head / -body (see HTML).  3. The "for buyers" bullets go 3-up on desktop.  ---------------------------------------------------------------------  Section keeps the class .report (theme tokens cascade from it). This  file lives in Page Settings > Custom CSS. ACSS vars + fallbacks,  British spelling, 0.2s transitions, reduced-motion support.  ===================================================================== */.report { /* theme tokens */ --report-cream: var(--editorial-cream, #f7f3eb); --report-ink: var(--text-dark, #1e293b); --report-body: var(--text-medium, #475569); --report-line: var(--base-light, #e5e7eb); --report-blue: var(--primary, #3b82f6); --report-green: var(--action, #22c55e); /* prose-grid measures */ --report-rail: 22rem;     /* heading rail width */ --report-measure: 46rem;    /* readable body column */ --report-read: 50rem;     /* dataset intro + footer text cap */ /* base text */ color: var(--report-body); font-size: var(--text-m, 1.0625rem); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* No padding here on purpose: the ACSS Container owns the outer width +   side gutters, and the Bricks Section padding owns the top/bottom gap.   The report only manages its INTERNAL rhythm below. */}/* =====================================================================  LAYOUT — every block fills the container; prose gets a heading rail  ===================================================================== */.report__hero,.report__section,.report__utility,.report__footer { width: 100%; }/* vertical rhythm: margin-top only (Section padding gives the outer gaps) */.report__hero { margin: 0; } .report__section,.report__utility,.report__footer { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }/* editorial grid for running prose */.report__section--prose { display: grid; grid-template-columns: 1fr;      /* mobile: stacked */ gap: var(--space-l, 2rem);}@media (min-width: 920px) { .report__section--prose {  grid-template-columns: minmax(0, var(--report-rail, 22rem))              minmax(0, var(--report-measure, 46rem));  column-gap: clamp(2.5rem, 4vw, 4.5rem);  row-gap: 0;  align-items: start;  justify-content: start;       /* shared left edge with the bands */ }} .report__section--prose .report__h2 { max-width: none; } /* column governs width */.report__section-body > :first-child { margin-top: 0; }/* ============================ HERO ================================= */.report__hero { background: var(--report-cream); border-radius: var(--radius-l, 16px); padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);} .report__hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem);}@media (min-width: 900px) { .report__hero-grid {  grid-template-columns: 1.05fr 0.95fr;  gap: clamp(2.5rem, 5vw, 4.5rem);  align-items: end; }} .report__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--report-blue); margin: 0 0 var(--space-s, 0.875rem);} .report__title { font-family: var(--font-serif, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: var(--h1, clamp(2.25rem, 4.5vw, 3.5rem)); line-height: 1.08; color: var(--report-ink); margin: 0;} .report__title-accent { display: block; font-style: italic; font-weight: 600; color: var(--secondary, #64748b); margin-top: 0.15em;} .report__dek { font-size: var(--text-l, 1.2rem); line-height: 1.6; color: var(--report-ink); margin: 0 0 var(--space-m, 1.25rem);} .report__dek strong { color: var(--report-ink); font-weight: 700; } .report__byline { font-size: var(--text-s, 0.9rem); color: var(--secondary, #64748b); margin: 0;} .report__byline strong { color: var(--report-ink); } .report__byline-sep { margin-inline: 0.5em; } .report__rule { height: 3px; border: 0; border-radius: 3px; background: linear-gradient(90deg, var(--report-blue), var(--report-green));} .report__hero .report__rule { margin-top: clamp(1.75rem, 4vw, 3rem); }/* ============================ TYPOGRAPHY ========================== */.report__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--report-blue); margin: 0 0 var(--space-xs, 0.5rem);} .report__h2 { font-family: var(--font-serif, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: var(--h2, clamp(1.6rem, 3.4vw, 2.25rem)); line-height: 1.2; color: var(--report-ink); margin: 0 0 var(--space-m, 1.25rem); scroll-margin-top: 5rem;} .report__h2--q { max-width: 26ch; } .report__h2--center { text-align: center; max-width: none; } .report__h3 { font-size: var(--text-l, 1.2rem); font-weight: 700; color: var(--report-ink); margin: var(--space-l, 2rem) 0 var(--space-s, 0.875rem);} .report__h3-note { font-weight: 400; font-style: italic; color: var(--secondary, #64748b); font-size: var(--text-s, 0.9rem);} .report__answer { font-size: var(--text-l, 1.2rem); line-height: 1.6; color: var(--report-ink); border-left: 3px solid var(--report-blue); padding-left: var(--space-m, 1.25rem); margin: 0 0 var(--space-l, 1.75rem);} .report__answer strong { font-weight: 700; } .report__lead { font-size: var(--text-l, 1.2rem); line-height: 1.6; color: var(--report-ink); margin: 0 0 var(--space-m, 1.25rem);} .report__body { margin: 0 0 var(--space-m, 1.25rem); } .report__body strong { color: var(--report-ink); } .report__aside { font-family: var(--font-serif, 'Playfair Display', Georgia, serif); font-style: italic; font-size: var(--text-l, 1.2rem); color: var(--secondary, #64748b); margin: var(--space-m, 1.25rem) 0 0;} .report__note { font-size: var(--text-s, 0.9rem); color: var(--secondary, #64748b); background: var(--base-ultra-light, #f9fafb); border-radius: var(--radius-m, 12px); padding: var(--space-m, 1.25rem); margin-top: var(--space-l, 2rem);} .report__method-list { margin: var(--space-m, 1.25rem) 0; padding-left: 1.25rem; display: grid; gap: var(--space-m, 1.25rem);} .report__method-list li { padding-left: 0.25rem; } .report__method-list strong { color: var(--report-ink); }/* ===================== AT A GLANCE (full width) ============== */.report__glance-grid { list-style: none; margin: 0 0 var(--space-m, 1.25rem); padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-s, 1rem);}@media (min-width: 640px) { .report__glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (min-width: 992px) { .report__glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .report__glance-card { background: var(--white, #fff); border: 1px solid var(--report-line); border-radius: var(--radius-m, 12px); padding: var(--space-l, 1.75rem); display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;} .report__glance-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 12px 32px -10px rgba(2, 6, 23, 0.12), 0 4px 8px -4px rgba(2, 6, 23, 0.06);} .report__glance-num { font-family: var(--font-serif, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.05; color: var(--report-ink); font-variant-numeric: tabular-nums;} .report__glance-pct { font-size: 0.62em; color: var(--report-blue); margin-left: 0.04em; } .report__glance-arrow { color: var(--report-green); margin-inline: 0.12em; font-size: 0.7em; } .report__glance-unit { display: inline-block; font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.42em; font-weight: 600; color: var(--report-blue); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.3em; vertical-align: baseline;} .report__glance-label { font-size: var(--text-s, 0.9rem); line-height: 1.55; color: var(--report-body);} .report__glance-label strong { color: var(--report-ink); } .report__glance-foot { font-size: var(--text-xs, 0.78rem); color: var(--secondary, #64748b); text-align: center; margin: 0;}/* ================ CITE + GET DATA (full width) ============== */.report__utility { background: var(--report-cream); border-radius: var(--radius-l, 16px); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr; gap: var(--space-l, 2rem);}@media (min-width: 768px) { .report__utility { grid-template-columns: 1.6fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } .report__utility-col--data {  border-left: 1px solid rgba(2, 6, 23, 0.1);  padding-left: clamp(2rem, 4vw, 3.5rem); }} .report__utility-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--report-blue); margin: 0 0 var(--space-s, 0.75rem);} .report__utility-cite { font-size: var(--text-s, 0.92rem); line-height: 1.6; color: var(--report-ink); margin: 0; max-width: 46rem;} .report__utility-text { font-size: var(--text-s, 0.92rem); color: var(--report-body); margin: 0 0 var(--space-m, 1.25rem);} .report__cite-url { display: block; margin-top: 0.4rem; color: var(--report-blue); word-break: break-word;}/* Download buttons (utility + dataset) */.report__download { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-s, 0.92rem); font-weight: 600; text-decoration: none; color: var(--report-blue); border: 1.5px solid var(--report-blue); border-radius: var(--radius-s, 8px); padding: 0.6rem 1rem; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;} .report__download:hover { background: var(--report-blue); color: var(--white, #fff); } .report__download-icon { width: 18px; height: 18px; flex: none; } .report__download--solid { background: var(--report-green); border-color: var(--report-green); color: var(--white, #fff); } .report__download--solid:hover { transform: translateY(-2px); filter: brightness(1.03); color: var(--white, #fff); } .report__download--ghost { color: var(--report-ink); border-color: var(--report-line); } .report__download--ghost:hover { background: var(--report-ink); color: var(--white, #fff); border-color: var(--report-ink); }/* ============================ TABLES ============================== */.report__figure { margin: var(--space-m, 1.25rem) 0 var(--space-l, 2rem); } .report__table { width: 100%; border-collapse: collapse; font-size: var(--text-s, 0.95rem); background: var(--white, #fff);} .report__table caption { caption-side: top; text-align: left; font-size: var(--text-xs, 0.78rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary, #64748b); padding-bottom: var(--space-s, 0.75rem);} .report__table thead th { text-align: left; font-size: var(--text-xs, 0.78rem); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--report-ink); border-bottom: 2px solid var(--report-ink); padding: 0.65rem 0.75rem;} .report__table .report__col-share { text-align: right; } .report__table tbody th,.report__table tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--report-line); vertical-align: middle;} .report__table tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--report-ink);} .report__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--report-ink);} .report__tag { display: inline-block; font-size: var(--text-xs, 0.7rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--report-green); background: rgba(34, 197, 94, 0.1); border-radius: 999px; padding: 0.1rem 0.55rem; margin-left: 0.5rem; vertical-align: middle;} .report__table--bars .report__bar-cell { position: relative; width: 46%; text-align: right; isolation: isolate;} .report__table--bars .report__bar-cell::before { content: ""; position: absolute; inset: 0.35rem auto 0.35rem 0; width: max(2px, calc(var(--val, 0) * 1%)); background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(34, 197, 94, 0.16)); border-radius: 5px; z-index: -1;} .report__bar-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--report-ink); } .report__row--peak .report__bar-cell::before { background: linear-gradient(90deg, var(--report-blue), var(--report-green)); opacity: 0.85;} .report__row--lowlight th[scope="row"],.report__row--lowlight .report__bar-num { color: var(--secondary, #64748b); } .report__table-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-l, 2rem);}@media (min-width: 640px) { .report__table-pair { grid-template-columns: 1fr 1fr; } }/* ========================== PULL-QUOTE =========================== */.report__pullquote { margin: var(--space-l, 2rem) 0; padding: var(--space-l, 2rem); background: var(--report-cream); border-left: 4px solid var(--report-blue); border-radius: 0 var(--radius-m, 12px) var(--radius-m, 12px) 0;} .report__pullquote p { font-family: var(--font-serif, 'Playfair Display', Georgia, serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35; color: var(--report-ink); margin: 0 0 var(--space-s, 0.875rem);} .report__pullquote-cite { display: block; font-style: normal; font-size: var(--text-xs, 0.78rem); color: var(--secondary, #64748b);}/* ============================ BULLETS ============================ */.report__bullets { margin: var(--space-m, 1.25rem) 0; padding: 0; list-style: none; display: grid; gap: var(--space-s, 0.875rem);} .report__bullets li { position: relative; padding-left: 1.5rem; } .report__bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 999px; background: linear-gradient(135deg, var(--report-blue), var(--report-green));} .report__bullets strong { color: var(--report-ink); }/* ===================== TAKEAWAY / FOR BUYERS (full width) ======== */.report__section--takeaway { background: var(--base-ultra-light, #f9fafb); border-radius: var(--radius-l, 16px); padding: clamp(1.75rem, 4vw, 3rem);} .report__section--takeaway .report__lead { max-width: 58rem; }/* three buyer takeaways side by side on desktop */@media (min-width: 768px) { .report__bullets--takeaway {  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: clamp(1.5rem, 3vw, 2.5rem);  align-items: start; }} .report__companion { margin: var(--space-l, 2rem) 0 0; font-size: var(--text-m, 1.0625rem); } .report__companion a { color: var(--report-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 0.2s ease;} .report__companion a:hover { color: var(--primary-dark, #2563eb); }/* ===================== DATASET (full width) ================ */.report__section--dataset { border-top: 1px solid var(--report-line); padding-top: clamp(2rem, 5vw, 3rem);} .report__dataset-head { max-width: var(--report-read, 50rem); } /* intro text only */.report__data-actions { display: flex; flex-wrap: wrap; gap: var(--space-s, 0.875rem); margin: var(--space-m, 1.25rem) 0 var(--space-l, 2rem);} .report__data-details { border: 1px solid var(--report-line); border-radius: var(--radius-m, 12px); overflow: hidden;} .report__data-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s, 0.875rem); padding: var(--space-m, 1.1rem) var(--space-l, 1.5rem); cursor: pointer; font-weight: 600; color: var(--report-ink); background: var(--base-ultra-light, #f9fafb); list-style: none; transition: background-color 0.2s ease;} .report__data-summary::-webkit-details-marker { display: none; } .report__data-summary:hover { background: var(--report-cream); } .report__data-summary-chevron { width: 20px; height: 20px; flex: none; transition: transform 0.2s ease; color: var(--report-blue); } .report__data-details[open] .report__data-summary-chevron { transform: rotate(180deg); } .report__data-scroll { max-height: 32rem; overflow: auto; padding: var(--space-s, 0.75rem); } .report__table--data { font-size: var(--text-xs, 0.82rem); min-width: 64rem; } /* 11 cols: scroll, don't crush */.report__table--data thead th { position: sticky; top: 0; background: var(--white, #fff); white-space: nowrap; } .report__table--data tbody td { padding: 0.45rem 0.6rem; } .report__data-placeholder td { text-align: center; color: var(--secondary, #64748b); font-style: italic; padding: var(--space-l, 2rem) !important;}/* ============================ FOOTER ============================= */.report__footer-text { font-size: var(--text-s, 0.92rem); color: var(--report-body); max-width: var(--report-read, 50rem); } .report__footer-text a { color: var(--report-blue); text-decoration: none; border-bottom: 1px solid currentColor; } .report__footer-cite { font-size: var(--text-xs, 0.78rem); color: var(--secondary, #64748b); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-s, 0.875rem);} .report__footer .report__rule { margin-bottom: var(--space-m, 1.25rem); }/* ====================== RESPONSIVE: small ======================= */@media (max-width: 575px) { .report__answer { padding-left: var(--space-s, 0.875rem); } .report__table { font-size: var(--text-xs, 0.85rem); } .report__table thead th, .report__table tbody th, .report__table tbody td { padding: 0.55rem 0.5rem; } .report__table--bars .report__bar-cell { width: 38%; }}/* ========================= REDUCED MOTION ====================== */@media (prefers-reduced-motion: reduce) { .report__glance-card, .report__download, .report__data-summary, .report__data-summary-chevron, .report__companion a { transition: none; } .report__glance-card:hover, .report__download--solid:hover { transform: none; }}