.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } @media screen and (max-height: 1024px) { .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @media screen and (max-height: 640px) { .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } /* The front page hero. Lived in Elementor widget fb37f9d on page 5982 until 7 September 2026, when a save of that page in Elementor stripped its style tag and printed it as body text. Kept here so that cannot happen again. Every rule is scoped to the hero or to .home. */ #cmvhero{margin:6px 0 30px} #cmvhero-search .elementor-section,#cmvhero-search .elementor-container,#cmvhero-search .elementor-column,#cmvhero-search .elementor-widget-wrap{padding:0;max-width:none;width:100%} #cmvhero-search #cmvq{width:100%;max-width:100%;margin:0} #cmvhero-search input#cmvq-i{width:100%;font-size:1.15rem;padding:18px 20px;height:auto;border-color:rgba(255,255,255,.22)} #cmvhero-search input#cmvq-i:focus{border-color:var(--accent,#E0654A)} .cmvhero-hint{font-size:.82rem;opacity:.66;margin:10px 0 0} .cmvhero-live{margin-top:26px;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:16px 18px 14px;background:rgba(255,255,255,.03)} .cmvhero-live-head{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;opacity:.85;display:flex;gap:10px;align-items:center} .cmvhero-dot{width:8px;height:8px;border-radius:50%;background:var(--accent,#E0654A);flex:none;animation:cmvpulse 2.2s infinite} @keyframes cmvpulse{0%{box-shadow:0 0 0 0 rgba(224,101,74,.55)}70%{box-shadow:0 0 0 9px rgba(224,101,74,0)}100%{box-shadow:0 0 0 0 rgba(224,101,74,0)}} .cmvhero-diff{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:12px} .cmvhero-lab{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;opacity:.55} .cmvhero-diff p{margin:4px 0 0;font-size:.93rem;line-height:1.55;opacity:.92} .cmvhero-del{background:rgba(224,101,74,.18);text-decoration:line-through;text-decoration-color:rgba(224,101,74,.95);border-radius:3px;padding:0 3px} .cmvhero-add{background:rgba(224,101,74,.34);border-radius:3px;padding:0 3px;font-weight:600} .cmvhero-more{display:inline-block;margin-top:12px;font-size:.85rem;text-decoration:underline;text-underline-offset:3px} .home header.elementor-628 > section[data-id="cmvtrs"],.home header.elementor-628 > section[data-id="cmvfixs"],.home header.elementor-628 > section[data-id="cmvhomew"]{display:none} @media(max-width:640px){.cmvhero-diff{grid-template-columns:1fr;gap:12px}} /** * CMV: reading typography and data surfaces * Written 19 August 2026. * * WHY * --- * Body copy measured 13px running about 200 characters to the line. Long * arguments about recall wording are the whole product here, and that setting * fought every one of them. This sets a reading size and a reading measure. * * SCOPE * ----- * Everything is scoped to .page-content, which is the classic content wrapper * used by the studies, the model pages and the guides. Elementor-built layouts * (the homepage, the directory) have no .page-content and are untouched. */ /* ---------------------------------------------------------------- reading */ .page-content { font-size: 17px; line-height: 1.65; color: var(--ink-2); } .page-content p, .page-content li { font-size: 17px; line-height: 1.65; color: var(--ink-2); } .page-content p { /* auto, not 0, so the measure above can centre the column */ margin: 0 auto 1.15em; } /* * The theme fixes .page-content at min(100%, 1200px) with !important, so rather * than fight the container the prose blocks inside it are given a reading * measure and centred. Tables and stat rows keep the full container width, so * data reads wide and words read narrow. */ .page-content p, .page-content h2, .page-content h3, .page-content h4, .page-content ul, .page-content ol, .page-content blockquote { max-width: 68ch; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- hierarchy */ .page-content h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--ink); margin: 2.1em auto .55em; } .page-content h3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--ink); margin: 1.7em 0 .45em; } .page-content strong { color: var(--ink); font-weight: 600; } /* ----------------------------------------------------------------- links */ /* * The site already sets prose links to a rose (var(--accent)) that is clearly distinct * from body text and consistent across every page. That is a better answer than * importing a new colour, so only the underline is adjusted here. */ .page-content a { text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ------------------------------------------------------ data as an object */ .page-content table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper-2); border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; overflow: hidden; margin: 1.5em 0; } .page-content th, .page-content td { padding: .72em .9em; font-size: 15.5px; line-height: 1.45; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; } .page-content tr:last-child th, .page-content tr:last-child td { border-bottom: 0; } .page-content thead th { background: var(--paper-3); color: var(--ink); font-weight: 600; } /* -------------------------------------------------------- the stat row */ .cmv-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.4em 0 1.6em; } .cmv-stat { flex: 1 1 170px; background: var(--paper-2); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; padding: 16px 18px; } .cmv-stat-n { display: block; font-size: 36px; line-height: 1.05; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .cmv-stat-l { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--muted); } .cmv-stat-hi .cmv-stat-n { color: var(--accent); } /* --------------------------------------------------------------- mobile */ @media (max-width: 600px) { .page-content, .page-content p, .page-content li { font-size: 16.5px; } .page-content h2 { font-size: 25px; } .page-content h3 { font-size: 19px; } .page-content th, .page-content td { padding: .6em .7em; font-size: 14.5px; } .cmv-stat-n { font-size: 30px; } } /* ------------------------------------------- the decorative tip overlay */ /* * #cm-daily floated a "tip of the day" over the homepage statistics within a * second of arrival. The freshness notice at the foot of the page is a * different thing and stays: it is telling the reader something true about * whether they are looking at a cached copy. */ #cm-daily { display: none !important; } /* CM: content layout. ONE centred column, 1200px. Rewritten 5 Aug 2026. This snippet is now the ONLY content-width rule on the site. The duplicate "CM WIDE LAYOUT" rule in the WPCode global footer field, which asked for 1400px and 1560px on body main.site-main and on boxed Elementor containers, was removed on 5 Aug 2026. It had never won above 1240px because of the !important here, and below 1240px it was moot. Why margin-inline:auto is here: a max-width on its own does not centre anything. Hello Elementor only centres .site-main for bodies WITHOUT an elementor-page- class (theme.css: body:not([class*="elementor-page-"]) .site-main). Every Elementor-built page therefore had a 1200px column pinned to the left of the viewport until 5 Aug 2026. Why the rule is no longer limited to min-width 1240px: Hello Elementor also sets bootstrap-style breakpoint widths on .site-main, .page-content and .page-header (500px from 576, 600px from 768, 800px from 1024). While this snippet only acted above 1240px, a CLASSIC page at 768px rendered a 600px body column inside a 753px header band, so its H1 started at x=96.5 while the same H1 on an ELEMENTOR page started at x=20 and the footer links started at x=20. Measured 5 Aug 2026. One rule now governs every width and both page types. Rule: full-bleed bands are allowed, but every constrained wrapper shares the same centred column and the same 10px gutter, so the header, hero, body and footer content edges line up at every width. */ /* 1. One column width, every viewport. min() keeps it fluid below 1200. */ main.site-main, .page-content, .page-header, .site-header .header-inner, .site-footer .footer-inner, .cm-wrap, .cmw, .cm-data, .cm-container, .cm-banner{ max-width:min(100%,1200px) !important; margin-inline:auto !important; } /* 2. Neutralise the theme's explicit breakpoint widths so rule 1 decides. */ main.site-main, .page-content, .page-header, .site-header .header-inner, .site-footer .footer-inner{ width:100% !important; } /* 3. Site gutter below the 1240px band, matching the footer container and the Elementor e-con padding. */ @media (max-width:1239px){ main.site-main{padding-inline:10px !important;} .page-content, .page-header{padding-inline:0 !important;} } /* 4. Elementor containers share the same 1200px band above 1240px. */ @media (min-width:1240px){ .e-con{--container-max-width:1200px !important;} .e-con>.e-con-inner{max-width:min(100%,1200px) !important;margin-inline:auto !important;} .elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px !important;margin-inline:auto !important;} } /* 5. Homepage hero space reservation (5 Aug 2026). The homepage hero heading .cm-h1 renders as one line at first paint and settles at three lines once the web font and the fluid font-size resolve. Everything below it was measured moving down 77px between 120ms and 240ms (.cm-sub top 388 to 465, .cm-cta-row 567 to 644). Settled heights measured on 5 Aug 2026 at eleven viewport widths: 345/360/375/399/430 all settle at 101px, 450 to 690 settle at 67px, then the height is fluid (768 = 81px, 1024 = 108px, 1200 and above = 122px). A single min-height therefore cannot cover the whole range, so the reservation is applied only across the band where the settled height is constant AND the shift was observed, and only on the homepage, so no other page can inherit dead space. */ @media (max-width:449px){ body.home .cm-h1{min-height:101px;} } /* CarsMultiverse: readable light text on non-Elementor content pages (studies, research hub, country EV data) */ body.page:not(.elementor-page) main, body.single:not(.elementor-page) main, body.page:not(.elementor-page) main p, body.single:not(.elementor-page) main p, body.page:not(.elementor-page) main li, body.single:not(.elementor-page) main li, body.page:not(.elementor-page) main td , body.single:not(.elementor-page) main td { color: var(--ink-2); font-size: 17px; line-height: 1.7; } body.page:not(.elementor-page) main h1, body.single:not(.elementor-page) main h1, body.page:not(.elementor-page) main h2, body.single:not(.elementor-page) main h2, body.page:not(.elementor-page) main h3, body.single:not(.elementor-page) main h3, body.page:not(.elementor-page) main strong, body.single:not(.elementor-page) main strong, body.page:not(.elementor-page) main th , body.single:not(.elementor-page) main th { color: var(--ink); } body.page:not(.elementor-page) main h2 , body.single:not(.elementor-page) main h2 { margin-top: 1.6em; } body.page:not(.elementor-page) main em , body.single:not(.elementor-page) main em { color: var(--muted); } body.page:not(.elementor-page) main a , body.single:not(.elementor-page) main a { color: var(--accent); text-decoration: underline; } body.page:not(.elementor-page) main a:hover , body.single:not(.elementor-page) main a:hover { color: var(--ink); } body.page:not(.elementor-page) main table , body.single:not(.elementor-page) main table { border-collapse: collapse; width: 100%; font-size: 15px; } body.page:not(.elementor-page) main th, body.single:not(.elementor-page) main th, body.page:not(.elementor-page) main td , body.single:not(.elementor-page) main td { border-bottom: 1px solid rgba(255,255,255,.14); padding: 10px 12px; text-align: left; } body.page:not(.elementor-page) main thead th , body.single:not(.elementor-page) main thead th { border-bottom: 2px solid rgba(255,255,255,.3); } body.page:not(.elementor-page) main tbody tr:hover , body.single:not(.elementor-page) main tbody tr:hover { background: rgba(255,255,255,.04); } /* single-post override: Elementor kit sets p color with higher specificity on posts */ body.single:not(.elementor-page) main p, body.single:not(.elementor-page) main li, body.single:not(.elementor-page) main td { color: var(--ink-2) !important; } body.single:not(.elementor-page) main strong, body.single:not(.elementor-page) main th { color: var(--ink) !important; } body.single:not(.elementor-page) main a { color: var(--accent) !important; } body.single:not(.elementor-page) main em { color: var(--ink-2) !important; } /* CM RESPONSIVE FIX (25 Jul 2026): CSV download button overflowed 375px viewports (was forced single-line ~474px). */ #cm-csv-btn, button[id="cm-csv-btn"]{max-width:100%;white-space:normal;box-sizing:border-box;line-height:1.45;} @media (max-width:480px){ .page-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} } /* CM NEWSLETTER BUTTON (25 Jul 2026): match house style, replace WPForms default blue */ [data-elementor-id="620"] .wpforms-form button[type=submit]{background:var(--accent);border:0;color:var(--on-accent);font-weight:800;border-radius:10px;padding:14px 28px;width:100%;font-size:1.05em;cursor:pointer;transition:background .15s} [data-elementor-id="620"] .wpforms-form button[type=submit]:hover{background:var(--accent)} [data-elementor-id="620"] .wpforms-form input[type=email]{border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box} [data-elementor-id="620"] .wpforms-form .wpforms-field-label{color:var(--ink-2);font-weight:600} [data-elementor-id="620"] .wpforms-confirmation-container-full{color:var(--ink-2);background:rgba(230,57,70,.08);border:1px solid var(--accent);border-radius:10px;padding:14px 18px} /* WPForms overrides its button via CSS vars/specificity - force both */ [data-elementor-id="620"] .wpforms-container{--wpforms-button-background-color:var(--accent);--wpforms-button-background-color-alt:var(--accent)} [data-elementor-id="620"] .wpforms-form button[type=submit]{background:var(--accent) !important} [data-elementor-id="620"] .wpforms-form button[type=submit]:hover{background:var(--accent) !important} @media (max-width:560px){html .cmv-stack{overflow-x:visible!important}html .cmv-stack:after{content:none!important}html table.cmv-stacked.cmv-stacked{display:block!important;width:100%!important;min-width:0!important}html table.cmv-stacked.cmv-stacked thead{display:none!important}html table.cmv-stacked.cmv-stacked tbody{display:block!important}html table.cmv-stacked.cmv-stacked tbody tr{display:block!important;padding:.6rem 0;border-bottom:1px solid rgba(128,128,128,.32)}html table.cmv-stacked.cmv-stacked tbody tr:last-child{border-bottom:0}html table.cmv-stacked.cmv-stacked tbody td{display:grid!important;grid-template-columns:6.5em 1fr;gap:.55rem;align-items:baseline;padding:.14rem 0;border:0!important;white-space:normal;word-break:break-word}html table.cmv-stacked.cmv-stacked tbody td:before{content:attr(data-label);font-size:12px;line-height:1.3;opacity:.62}html table.cmv-stacked.cmv-stacked tbody td:empty{display:none!important}.cmvhero-lab,.cmvbrowse-lab,.cmvw-eyebrow{font-size:12px}.cmvw-nm small{font-size:12.5px}.cmvlag a>p:first-child{font-size:11.5px}html ul.cmvmod-list{grid-template-columns:1fr!important;padding-left:0!important;list-style:none}html ul.cmvmod-list>li{width:auto!important}html ul.cmvmod-list a{width:auto!important;max-width:100%}.cmvbrowse-row a{min-height:36px;display:inline-flex;align-items:center}html .cmvbrowse-row a:nth-of-type(n+13):not(:last-of-type){display:none}} .cmvlag{--dim:var(--muted);--far:var(--muted);--line:var(--rule);--hot:var(--accent);max-width:1000px;margin:0 auto;padding:0 20px 56px;color:var(--ink);font:400 16px/1.65 var(--sans)}.cmvlag h2{font:700 clamp(22px,3vw,31px)/1.2 var(--serif);margin:44px 0 12px;color:var(--ink)}.cmvlag h3{font:600 19px/1.3 var(--serif);margin:30px 0 10px;color:var(--ink)}.cmvlag p{color:var(--dim);max-width:66ch;margin:0 0 14px}.cmvlag .lead{font-size:18px;color:var(--ink-2);max-width:64ch}.cmvlag .eyebrow{font:800 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hot);margin:0 0 10px}.cmvlag .figs{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}.cmvlag .fig{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:rgba(255,255,255,.02)}.cmvlag .fig b{display:block;font:700 27px/1.1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}.cmvlag .fig span{display:block;font-size:12.5px;color:var(--far);margin-top:5px;line-height:1.4}.cmvlag .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 6px;max-width:100%}.cmvlag div.scroll table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px !important}.cmvlag th{text-align:left;font:600 11.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--far);padding:0 12px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}.cmvlag td{padding:10px 12px 10px 0;border-bottom:1px solid rgba(34,48,61,.6);color:var(--dim);vertical-align:baseline}.cmvlag td.n{font-variant-numeric:tabular-nums;white-space:nowrap}.cmvlag td.name{color:var(--ink)}.cmvlag td.name a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(244,247,251,.25)}.cmvlag .bar{display:inline-block;height:7px;border-radius:4px;background:var(--hot);vertical-align:middle;min-width:2px;opacity:.85}.cmvlag .rank{color:var(--far);font-variant-numeric:tabular-nums}.cmvlag .note{border-left:2px solid var(--line);padding:2px 0 2px 16px;margin:22px 0;color:var(--far);font-size:14.5px;max-width:70ch}.cmvlag .cta{display:inline-block;padding:11px 18px;border-radius:8px;background:var(--hot);color:var(--on-accent);font:600 15px/1 var(--sans);text-decoration:none;margin:6px 10px 0 0}.cmvlag .cta.alt{background:none;border:1px solid var(--rule-2);color:var(--ink)}@media(max-width:600px){.cmvlag .fig b{font-size:23px}} @media (min-width:1025px){ .page-content > p,.page-content > h2,.page-content > h3,.page-content > h4, .page-content > ul,.page-content > ol,.page-content > blockquote, .page-content > div:not(.cmv-tw){max-width:46rem} } #cm-head,#cm-mob,#cm-alsoon-row,#cm-morelinks{display:none!important}.cmvnav{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:40}.cmvnav-in{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;min-height:60px;flex-wrap:wrap}.cmvnav-mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink);font:700 15px/1 var(--serif);letter-spacing:.02em;flex:0 0 auto}.cmvnav-mark span{color:var(--accent)}.cmvnav-mark em{font:500 10px/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}.cmvnav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.cmvnav ul::-webkit-scrollbar{display:none}.cmvnav li{margin:0;white-space:nowrap}.cmvnav ul a{display:block;padding:6px 0;text-decoration:none;color:var(--muted);font:500 14.5px/1.4 var(--sans);border-bottom:2px solid transparent}.cmvnav ul a:hover{color:var(--ink)}.cmvnav ul a.on{color:var(--ink);border-bottom-color:var(--accent)}.cmvnav-cta{flex:0 0 auto;padding:9px 16px;border-radius:0;background:var(--accent);color:var(--on-accent);font:600 14px/1 var(--sans);text-decoration:none}.cmvnav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.cmvfoot{background:var(--paper);border-top:1px solid var(--rule);padding:34px 0 40px}.cmvfoot-in{max-width:1040px;margin:0 auto;padding:0 20px}.cmvfoot-line{margin:0 0 18px;max-width:62ch;font:400 15px/1.65 var(--sans);color:var(--muted)}.cmvfoot ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 18px;padding:0}.cmvfoot li{margin:0}.cmvfoot a{color:var(--ink);text-decoration:none;font:500 14.5px/1.5 var(--sans);border-bottom:1px solid rgba(244,247,251,.22)}.cmvfoot a:hover{border-bottom-color:var(--accent)}.cmvfoot-small{margin:0;font:400 12.5px/1.6 var(--sans);color:var(--muted)}@media(max-width:720px){.cmvnav-in{gap:14px;padding:10px 16px}.cmvnav ul{order:3;width:100%;gap:16px}.cmvnav-cta{margin-left:auto}} .cmv-cp-fresh{margin:.9em auto 1.1em;max-width:68ch;font-size:.95em;line-height:1.6}.cmv-cp-cite{margin:1.2em auto;max-width:68ch;border:1px solid var(--rule,#2a3542);border-radius:8px;padding:.6em .9em}.cmv-cp-cite summary{cursor:pointer;font-weight:600}.cmv-cp-cite p{margin:.6em 0;line-height:1.6}.cmv-cp-cite-line code{display:block;padding:.5em .6em;border-radius:6px;background:rgba(127,127,127,.12);word-break:break-word}