that wpautop may touch), so any injected box needs display set. */
.mls-vessel { display:block; position:relative; height:190px; border-radius:12px;
background:#f1f3f5; border:1px solid #e3e8ec; overflow:hidden; }
.mls-vessel .fl { position:absolute; left:0; right:0; bottom:0;
background:#8597a8; }
ul.mls-water > li[data-tone="hot"] .fl { background:var(--mls-accent); }
/* readout + caption are now siblings ABOVE the gauge, so they are static blocks
and cannot collide with the fill edge at any value. */
ul.mls-water > li > .up { display:block; text-align:center;
font-family:'Poppins','Figtree',sans-serif; font-weight:600;
font-size:clamp(34px, 2.9vw, 46px) !important; line-height:1; color:#0e0048;
font-variant-numeric:tabular-nums; margin:0 0 4px; }
ul.mls-water > li > .uc { display:block; text-align:center;
font-size:13px !important; font-weight:600; letter-spacing:.04em;
text-transform:uppercase; color:#5f6b78; margin:0 0 14px; }
/* the inverse caption sits ON the fill, so it gets a darkened underlay rather
than relying on the fill colour to carry 4.5 behind white text */
.mls-vessel .inv { position:absolute; left:0; right:0; bottom:0;
padding:10px 8px 12px; text-align:center; font-size:14px !important;
font-weight:700; color:#fff; background:linear-gradient(transparent,rgba(14,0,72,.42)); }
ul.mls-water > li > .lb { display:block;
font-size:clamp(17px, 1.32vw, 20px) !important; line-height:1.35 !important;
color:#363d44; margin:14px 0 0; text-wrap:balance; }
/* ---- RANKED BARS: VALUE AT THE TIP -------------------------------------
Five factors, 58 -> 33. The percentage travels with the end of its own bar
instead of sitting in a fixed right-hand column, so ranking reads as one
diagonal and the eye never jumps from bar end to number. the CD picked this
over a tick scale and a hero treatment (CHANGELOG v44).
THE TRACK IS GONE, and that was a contrast fix, not a style choice. The
old full-width #e7ebee track was what both fills sat on, and a data mark
is measured against what it sits on:
grey fill #8597a8 on #e7ebee 2.51 fails the 3.0 graphics floor
orange #FC4C02 on #e7ebee 2.84 fails
the track #e7ebee on the band 1.08 invisible anyway
It was too dark for the bars and too light to be seen. Removing it puts
both marks on the band instead, where they pass:
grey fill #5f6b78 on #f1f3f5 4.89 pass
orange #FC4C02 on #f1f3f5 3.06 pass (documented as tight)
#8597a8 was retired from the bars for the same reason it is banned for
text - see the grey table.
Emphasis, not categorical: the leader in the partner accent, the other
four in one grey. The four non-leaders used to carry teal numerals as
well, which meant two colours plus grey bars fighting over a ranking.
One accent, one grey, or the ranking stops reading.
WHY .tk RESERVES 120px ON THE RIGHT: the bar is a percentage of .tk's
CONTENT box, so reserving room for the numeral guarantees a 100% bar and
its number still fit inside the column - and every bar keeps the same
0-100 scale, because they all measure against the same reduced width.
Without the reserve a partner value in the 80s would push its own numeral
out of the container.
---------------------------------------------------------------------- */
ul.mls-rrow.mls-bars { display:block; margin:26px 0 0; }
ul.mls-rrow.mls-bars > li { display:block; flex:none;
padding:14px 0; min-width:0; }
ul.mls-rrow.mls-bars .bl { display:block; margin:0 0 10px;
font-size:clamp(16px, 1.32vw, 18px) !important; line-height:1.3 !important;
color:#363d44; }
ul.mls-rrow.mls-bars .tk { display:flex; align-items:center;
height:26px; padding-right:120px; background:none; position:static;
border-radius:0; }
ul.mls-rrow.mls-bars .tk i { position:static; flex:none; height:12px;
background:#5f6b78; border-radius:0 4px 4px 0; }
ul.mls-rrow.mls-bars .tk > b { flex:none; margin:0 0 0 14px !important;
font-size:clamp(22px, 1.95vw, 30px) !important; line-height:1 !important;
/* !important is required, not decorative: the kit has
ul.mls-rrow li b { color:var(--mls-accent-2) !important } for the stat
rows, and an !important declaration beats a plain one whatever the
specificity. That teal on four of five numerals is exactly the second
colour this chart had to lose. */
color:#363d44 !important; font-variant-numeric:tabular-nums;
white-space:nowrap; }
ul.mls-rrow.mls-bars > li[data-tone="hot"] .tk i {
background:var(--mls-accent); height:16px; }
ul.mls-rrow.mls-bars > li[data-tone="hot"] .tk > b {
color:var(--mls-accent) !important;
font-size:clamp(26px, 2.45vw, 38px) !important; }
@media (max-width:760px) {
ul.mls-rrow.mls-bars .tk { padding-right:86px; }
ul.mls-rrow.mls-bars .tk > b { margin-left:10px !important; }
.mls-vessel { height:150px; }
}
/* ==== HERO SUBHEAD COLOUR - FIX AT THE SOURCE =============================
.mls-sub specs color:#5f6b78, and it was losing. The winning rule is
Salient's own div.dark h2 { color:#7715c0 } - (0,1,1) beats .mls-sub's
(0,1,0) - which only bites when the subhead is marked up as an . As an
it never showed, so the hero read grey for the whole v1-v3 run and
turned purple the moment the element changed. Same lesson as the Q-line
pill: the override fails on selector SHAPE, not on !important.
#5f6b78 on the hero band measures 4.89:1 - passes the small-text floor,
never mind the large-text one.
------------------------------------------------------------------------ */
div.dark .mls-sub { color:#5f6b78 !important; }
/* ==== v4 HERO - LONG-HEADLINE SCALE ======================================
The hero ratio (eyebrow 26 / h1 90 / sub 50 at the container cap) was
measured off the CD's mock, which carried a FIVE-word headline. Real partner
copy is thirteen words: at 90px the h1 set five lines and the text block
ran 955px against a 602px illustration. The row is equal-height and
middle-aligned, so the picture floated with ~175px of dead space above and
below it. That is the imbalance - not the type size on its own.
Same ratio, scaled to 76%. Measured at 1728px viewport / 1580px container:
eyebrow 20 h1 68 (4 lines) sub 38 (4 lines) -> block 599px
The illustration is 602px tall. Three pixels apart, which is the point: the
two columns now read as one object rather than a wall of type beside a
small picture.
Ratio held: h1/eyebrow 3.40 (mock 3.46), h1/sub 1.79 (mock 1.80).
Only the HERO eyebrow moves - :has(+ .mls-h1) picks it out so the section
eyebrows keep the v28 caption-tier size. Specificity: :has() takes its
argument's (0,1,0), so the selector is (0,3,0) and clears the existing
:is(.page-id-13928,.page-id-13959) .mls-eyebrow at (0,2,0).
Scoped to 13959 ONLY. v3 (13928) is the approval build and keeps its 90px
hero. Promote to the shared .mls-h1 / .mls-sub once the CD signs off - long
headlines are the norm for real partner copy, not the exception.
------------------------------------------------------------------------ */
.mls-eyebrow:has(+ .mls-h1) {
font-size:clamp(15px, 1.16vw, 20px) !important; }
.mls-h1 {
font-size:clamp(30px, 3.95vw, 68px) !important; }
.mls-sub {
font-size:clamp(19px, 2.2vw, 38px) !important; }
@media (max-width:720px) {
.mls-h1 { font-size:30px !important; }
.mls-sub { font-size:19px !important; }
}
/* ==== HERO HEADLINE RAG ===================================================
Shared, not page-scoped, and deliberately not a max-width.
With the real 13-word headline the box was choosing the breaks: line 2 ran
980px inside a 1003px column and the fourth line was the single word
"Cancers". A max-width cap of 860-940px fixed that particular rag, but the
number is tuned to that particular sentence - the next partner headline
would break somewhere arbitrary against it and we would be hand-tuning a
magic number per page. text-wrap:balance has no number in it: the browser
re-evens the lines for whatever copy is in the element.
Measured, same headline, 1728px viewport:
before Treatment Selection and / Sequencing Tops Oncologists' /
Education Priorities in Rare / Cancers <- orphan
after Treatment Selection / and Sequencing Tops /
Oncologists' Education / Priorities in Rare Cancers
Same device already carrying the caption tier. Line COUNT is unchanged, so
the 599px hero block measured in v40 still matches the 602px illustration.
Applied to the h1 only - on the subhead it measured as a no-op (the browser
skips balancing past its line threshold), so there is nothing to gain and a
rule to maintain.
------------------------------------------------------------------------ */
/* text-wrap:balance was removed at the CD's call (v44): evening the four
lines of a long headline produced a stair-step rag he did not want. The
middle setting, text-wrap:pretty, is available if the last-line orphan
ever becomes the bigger problem - it fixes the orphan without evening
every line. Left OFF deliberately; do not reinstate balance. */
/* ==== HERO INTRO / ATTRIBUTION LINE ======================================
The "PARTNER partnered with Medlive and surveyed N ..." paragraph that sits
under the subhead, beside the co-brand logos.
IT WAS AN UNCLASSED , which is why it fought the subhead. The theme
sized it at 1.8vw (31px against the subhead's 38px - only 1.22x apart) and
coloured it #82909E, LIGHTER than the subhead's #5f6b78. Two long grey
paragraphs, nearly the same size, the lower one paler: it read as a
continuation of the subhead instead of the tier below it.
It also failed contrast where it stood. #82909E measures 2.94 on the band's
#f1f3f5 stop - under the 3.0 LARGE-text floor, never mind the 4.5 small-text
one it would need at this new size. So darkening was not a preference here,
it was required:
band #f1f3f5 band #f9fafb white
#82909E (was) 2.94 3.12 3.26 fails
#363d44 (now) 9.90 10.53 11.01 passes small text
Now a
- a paragraph, not a heading, so it is out of
the document outline it never belonged in.
Sized on the existing caption tier (clamp 17-20px) rather than inventing a
new step: 20px against the 38px subhead is a 1.9x drop, which reads as the
next tier down instead of a sibling. Smaller but darker is the whole move -
it loses size and gains presence, so it sits under the subhead rather than
competing with it.
MEASURE CAP, and this is the part that is easy to miss: at 20px in the 2/3
column the paragraph ran 963px per line - about 87 characters, way past the
45-75 comfortable range. 64ch brings it to three near-equal lines
(786 / 768 / 742px) with no runt at the end. Without the cap, making the
type smaller would have made the measure WORSE, not better.
------------------------------------------------------------------------ */
.mls-intro {
font-size:clamp(17px, 1.32vw, 20px) !important;
line-height:1.5 !important;
font-weight:400 !important;
color:#363d44 !important;
max-width:64ch;
margin:0 !important;
text-wrap:pretty;
}
@media (max-width:1024px) {
/* the column is already narrow here, so the ch cap would only fight it */
.mls-intro { max-width:none; }
}
/* ==== QUOTE BLOCK — REVERSED ON THE PARTNER TEAL =========================
the CD wanted this row called out rather than sitting on the same light band
as everything else. Ground is highlight 2, type reversed to white.
WHAT WAS ASKED FOR AND COULD NOT SHIP: the attribution name in the orange.
#FC4C02 on #007A96 measures 1.46:1. The name is 14px uppercase, so it needs
4.5 — 1.46 is not a near miss, it is close to invisible. Lightening the
orange does not rescue it either: the best available is 2.95:1 at 40% orange
over white, and by then it is peach rather than the brand colour.
THE GENERAL RULE, because this will come back on every partner page:
THE TWO PARTNER HIGHLIGHTS CAN NEVER SIT ON EACH OTHER. Two mid-tone
saturated colours is the worst case for contrast, and whether any given
pair clears a floor is luck, not design. If a future partner page wants
highlight 1 on highlight 2, the answer is no — put both on a dark neutral
instead. On Midnight #0e0048 everything works (white 18.88, orange 5.55,
teal 3.80), which is the fallback if this treatment ever needs three colours.
MEASURED, on this ground:
ground var(--mls-accent-2) #007A96 for NORD
quote #ffffff 30px/600 4.97:1 floor 3.0 large pass
name #ffffff 14px/700 4.97:1 floor 4.5 small pass
rule #ffffff 4px 4.97:1 decorative pass
PARTNER CHECK BEFORE SHIPPING A NEW PAGE: white on highlight 2 must clear
4.5, because the 14px name sits on it. A pale partner highlight will fail —
if it does, deepen that partner's accent-2 rather than greying the type.
The row is targeted with :has() because Salient discards el_class on
vc_row. :not(.inner_row) keeps it off nested rows.
------------------------------------------------------------------------ */
.wpb_row:not(.inner_row):has(.mls-bigquote) .row-bg-overlay {
background-image:none !important;
background-color:var(--mls-brand-2) !important;
opacity:1 !important;
}
.mls-bigquote {
color:#ffffff !important;
border-left-color:#ffffff !important;
}
.mls-attr { color:var(--mls-attr-ink,#ffffff) !important; }
/* ==== TWO-COLUMN DATA ROW: TOP-ALIGN ====================================
The bars column looked adrift and it was not the bars. Measured, at the
1580px container:
left column eyebrow 2933 -> illustration bottom 3513 (580px of content)
bars column 3018 -> 3455 (437px of content)
Both columns are equal-height at 581px, and Salient centres each column's
content inside it (.vc_column-inner is display:flex, justify-content:center).
So the shorter column floated in the middle and its first label landed
beside the MIDDLE of the h2 - level with nothing at all.
Fixed by top-aligning, plus zeroing the list margin and the first row's
top padding so the first bar label shares a top edge with the eyebrow
rather than sitting 85px below it. One shared edge is what makes two
columns read as one section.
The bottoms are deliberately left ragged. Forcing both to end together
would mean stretching the bar spacing to fill a height, which makes the
row rhythm a function of the illustration's height instead of the data.
---------------------------------------------------------------------- */
.inner_row:has(ul.mls-rrow.mls-bars) .vc_column-inner {
justify-content:flex-start !important; }
ul.mls-rrow.mls-bars { margin-top:0 !important; }
ul.mls-rrow.mls-bars > li:first-child { padding-top:0; }
/* ==== RANKED BARS: THE AXIS STRIP ========================================
Injected by entry 5 once per list, from the same derived number the bar
widths use. Two labels only - where the scale starts and where it stops.
It states nothing about the survey, so it cannot misreport it.
WHY THE SCALE NO LONGER RUNS TO 100: these are multi-select percentages,
58+51+44+37+33 = 223, so they are not shares of one whole and a 0-100 axis
was never required by the data. It was my choice, and it was the choice
that left 42% of the plot permanently empty - the "big hole" the CD drew a
green X through. A conventional bar chart ends its axis just above the max.
The exaggeration risk that normally comes with this is covered here because
every value is printed at its own bar tip.
---------------------------------------------------------------------- */
p.mls-baxis {
display:flex; justify-content:space-between;
margin:14px 0 0 !important; padding:7px 0 0;
border-top:1px solid #cfd6dd;
font-size:11px !important; line-height:1.2 !important;
letter-spacing:.08em; text-transform:uppercase;
color:#5f6b78 !important;
font-variant-numeric:tabular-nums;
}
/* the strip spans the SCALE, not the column: .tk reserves 120px on the right
for the numeral, so the axis has to stop at the same place or the labelled
end would not be where the 100%-of-scale point actually is. */
p.mls-baxis { margin-right:120px !important; }
@media (max-width:760px) { p.mls-baxis { margin-right:86px !important; } }
/* ============================================================
KEY INSIGHT ROW — .mls-ilabel + .mls-insight
A closing note inside a section: label + subhead on the left,
copy on the right, in a light tint of partner colour 2.
------------------------------------------------------------
MARKUP (Raw HTML, inside the section row, below the columns).
Identical on grey-band AND white sections — no modifier:
------------------------------------------------------------
MEASURED (floors: 4.5 small text, 3.0 large text & graphics)
Card is a 15% tint of colour 2 over white = #d9ebef for NORD:
label #0e0048 on tint ... 15.36 OK
subhead #0e0048 on tint ... 15.36 OK
copy #363d44 on tint ... 8.95 OK
icon #007A96 on tint ... 4.04 OK (graphic, floor 3.0)
separation of tint from its grounds:
tint vs band light end #f9fafb ... 1.177
tint vs band dark end #f1f3f5 ... 1.105
— and it also differs in HUE, which is why no border is
needed and why ONE card serves both grounds. Compare the
plain white card that dissolved: white vs #f9fafb = 1.045.
------------------------------------------------------------
WHY THE LABEL IS MIDNIGHT AND NOT TEAL
the CD asked for both a teal label and a teal tint. They are
mutually exclusive. A 12px caps label is SMALL text (bold only
counts as large from 18.66px) so it needs 4.5. #007A96 clears
that on a 7% tint (4.53) and fails from 8% up — and a 7% tint
separates from the band by 1.050, i.e. invisible. So the teal
moved OFF the type and onto the tint + the lightbulb, and the
tint got strong enough to be the entire device.
Consequence worth keeping: partner colour 2 is no longer a
TEXT colour anywhere in this component. Its only floors here
are as a tint and as a 28px icon — 3.0, not 4.5.
------------------------------------------------------------
THE ICON is Starlight Light_Bulb.svg, unmodified geometry,
carried as a CSS mask so (a) the markup stays clean and
(b) it inherits each partner's colour with no recolouring.
28px, not 19px: below ~24px the radiating strokes collapse
into an asterisk. Never swap in an icon from outside the
Starlight library.
============================================================ */
ul.mls-share ~ .mls-insight, .mls-insight {
/* 15% tint of colour 2 over white. color-mix keeps it per-partner;
the flat hex below is the NORD fallback for older browsers. */
background:#d9ebef;
border:1px solid transparent;
border-radius:14px;
box-shadow:none;
padding:30px 46px 32px;
display:grid;
/* v63 — 1/3 : 2/3, not a fixed 600px.
The old 600px was sized for the LONGEST title on the page, so short
titles left a hole: measured across the three cards, the titles'
widest lines are 189 / 538 / 585px, i.e. "Close the gap" wasted
411px of its own column. A proportional split lets every title
rewrap into the same shape instead. Measured after: the height
difference between the two halves drops from 84/49/79px to
54/20/15px, and every card loses ~30px of height. */
grid-template-columns:1fr 2fr;
gap:0 56px;
align-items:start;
}
@supports (background: color-mix(in srgb, red 15%, white)) {
.mls-insight { background:color-mix(in srgb, var(--mls-accent-2) 15%, #ffffff); }
}
.mls-ilabel {
display:flex; align-items:center; gap:11px;
font-family:Figtree, system-ui, sans-serif !important;
font-weight:700 !important;
font-size:16px !important; /* v92 — was 12px. At 12px this eyebrow was swamped by the
28px lightbulb beside it. 16px balances the pair. Tracking
is .12em so it scaled with the size and needed no change.
Contrast untouched: Midnight on the insight tint, 15.36. */
white-space:nowrap !important; /* v92 — REQUIRED, not cosmetic. The insight panel is a
1fr 2fr grid, and in the narrow side-by-side variant the
first column is only ~138px at a 1300px viewport. "KEY
INSIGHT" needs 28 icon + 11 gap + 119 text = 158px, so it
broke to two lines. nowrap raises that column's min-content
to 158px and CSS Grid widens the 1fr to fit, so the label
holds one line at every width with the full 56px gutter
still clear of the body column. Measured at 1030 / 1100 /
1200 / 1300 / 1440 / 1728px: one line, 56px clearance, zero
overhang, all six.
NOTE it also fixes a PRE-EXISTING break: at 12px this label
already wrapped at a 1100px viewport. It was never safe —
only safe at the widths anyone had happened to look at.
Cost: at ~1100px the body column narrows 201px -> 157px in
that one panel. Under 1024px the panel stacks to a single
column and the question disappears. */
line-height:1.2 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
color:#0e0048 !important;
margin:0 0 10px !important;
}
.mls-ilabel::before {
content:''; flex:none; width:28px; height:28px; margin:-1px 0 0;
background-color:var(--mls-accent-2);
-webkit-mask:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cpath%20d%3D%22M112.8%2C66.33v-2.48c-.16-5.27-1.26-10.11-3.37-14.74-2.01-4.42-4.83-7.57-7.57-10.34-6.94-7.02-15-10.6-24.64-10.97h-2.7c-10.75.56-19.87%2C4.34-26.38%2C10.91-7.13%2C7.17-10.75%2C15.74-11.07%2C26.22v1.08c.55%2C10.99%2C4.62%2C18.54%2C8.56%2C25.85l.27.51c.47.87.94%2C1.73%2C1.39%2C2.6.42.8.85%2C1.62%2C1.34%2C2.51%2C1.69%2C3.15%2C3.45%2C6.43%2C4.6%2C9.84.43%2C1.3.69%2C2.94.95%2C4.69.6%2C3.96%2C1.28%2C8.44%2C4.69%2C10.93l.7.62h30.42l.65-.7c2.14-1.93%2C4.46-4.28%2C4.99-7.67.16-.97.27-1.97.4-3.09.21-1.75.4-3.39.77-4.84.9-3.48%2C2.72-6.58%2C4.47-9.59.48-.83.95-1.64%2C1.41-2.44l.78-1.41c1.97-3.52%2C3.99-7.16%2C5.8-11.05%2C2.06-4.42%2C3.18-9.62%2C3.53-16.43ZM52.31%2C95.4l.61-.59-1.19-2.22c-.56-1.06-1.12-2.12-1.69-3.17-3.83-7.12-7.47-13.85-7.95-23.6v-.8c.29-9.07%2C3.43-16.5%2C9.6-22.72%2C5.69-5.74%2C13.43-8.92%2C22.96-9.42h2.46c8.23.33%2C15.16%2C3.43%2C21.17%2C9.49%2C2.41%2C2.43%2C4.87%2C5.18%2C6.55%2C8.87%2C1.82%2C4.02%2C2.79%2C8.19%2C2.92%2C12.71v2.27c-.31%2C6.02-1.28%2C10.59-3.05%2C14.39-1.73%2C3.71-3.69%2C7.21-5.58%2C10.6l-.85%2C1.54c-.4.72-.83%2C1.46-1.35%2C2.35-1.84%2C3.15-3.91%2C6.71-5%2C10.89-.44%2C1.77-.68%2C3.65-.9%2C5.56-.12.95-.23%2C1.91-.38%2C2.84-.25%2C1.58-1.41%2C2.92-2.25%2C3.78l-.26.17h-26.88l-.26-.37c-1.07-1.52-1.47-4.18-1.86-6.73-.29-1.88-.57-3.81-1.16-5.56-1.29-3.84-3.24-7.46-4.96-10.67l-.72.39h.01Z%22%2F%3E%3Cpath%20d%3D%22M40.95%2C37.27h0c.56.56%2C1.29.84%2C2.03.84s1.47-.28%2C2.02-.83c1.12-1.13%2C1.11-2.96%2C0-4.09l-12.69-12.8c-1.07-1.09-2.97-1.09-4.04%2C0-1.12%2C1.13-1.12%2C2.96%2C0%2C4.09l12.66%2C12.8h.01Z%22%2F%3E%3Cpath%20d%3D%22M107%2C38.11c.73%2C0%2C1.47-.28%2C2.03-.84l12.68-12.8c.55-.55.85-1.27.85-2.04s-.3-1.5-.85-2.05c-1.08-1.09-2.97-1.09-4.04%2C0l-12.68%2C12.8c-1.11%2C1.13-1.11%2C2.96%2C0%2C4.09.55.56%2C1.29.84%2C2.02.84h-.01Z%22%2F%3E%3Cpath%20d%3D%22M135.82%2C64.63h-17.94c-1.58%2C0-2.85%2C1.3-2.85%2C2.89s1.28%2C2.88%2C2.85%2C2.88h17.94c1.58%2C0%2C2.87-1.29%2C2.87-2.88s-1.29-2.89-2.87-2.89Z%22%2F%3E%3Cpath%20d%3D%22M74.99%2C23.88c1.58%2C0%2C2.87-1.3%2C2.87-2.89V2.89c0-1.59-1.29-2.89-2.87-2.89s-2.85%2C1.3-2.85%2C2.89v18.09c0%2C1.59%2C1.28%2C2.89%2C2.85%2C2.89Z%22%2F%3E%3Cpath%20d%3D%22M109.02%2C97.75c-1.08-1.09-2.97-1.09-4.04%2C0-1.11%2C1.13-1.11%2C2.96%2C0%2C4.09l12.68%2C12.8c.55.55%2C1.29.83%2C2.02.83s1.47-.28%2C2.03-.83c.55-.54.83-1.26.85-2.04%2C0-.78-.3-1.5-.85-2.04l-12.69-12.81Z%22%2F%3E%3Cpath%20d%3D%22M34.96%2C67.52c0-1.6-1.28-2.89-2.85-2.89H14.17c-1.56%2C0-2.85%2C1.3-2.85%2C2.89s1.28%2C2.88%2C2.85%2C2.88h17.94c1.58%2C0%2C2.85-1.29%2C2.85-2.88Z%22%2F%3E%3Cpath%20d%3D%22M40.96%2C97.75l-12.68%2C12.81c-.53.54-.83%2C1.26-.83%2C2.02s.3%2C1.5.83%2C2.05c.53.54%2C1.25.84%2C2.02.84s1.49-.3%2C2.02-.84l12.68-12.8c.55-.55.85-1.27.85-2.04s-.3-1.5-.85-2.05c-1.08-1.09-2.93-1.1-4.04%2C0Z%22%2F%3E%3Cpath%20d%3D%22M89.15%2C126.43h-28.31c-1.42%2C0-2.58%2C1.17-2.58%2C2.6s1.16%2C2.6%2C2.58%2C2.6h28.31c1.42%2C0%2C2.58-1.17%2C2.58-2.6s-1.16-2.6-2.58-2.6Z%22%2F%3E%3Cpath%20d%3D%22M89.15%2C134.52h-28.31c-1.42%2C0-2.58%2C1.17-2.58%2C2.6s1.16%2C2.6%2C2.58%2C2.6h28.31c1.42%2C0%2C2.58-1.17%2C2.58-2.6s-1.16-2.6-2.58-2.6Z%22%2F%3E%3Cpath%20d%3D%22M62.8%2C143.94c2.92%2C3.85%2C7.37%2C6.06%2C12.19%2C6.06s9.28-2.21%2C12.19-6.06l1.02-1.33h-26.42l1.02%2C1.33Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cpath%20d%3D%22M112.8%2C66.33v-2.48c-.16-5.27-1.26-10.11-3.37-14.74-2.01-4.42-4.83-7.57-7.57-10.34-6.94-7.02-15-10.6-24.64-10.97h-2.7c-10.75.56-19.87%2C4.34-26.38%2C10.91-7.13%2C7.17-10.75%2C15.74-11.07%2C26.22v1.08c.55%2C10.99%2C4.62%2C18.54%2C8.56%2C25.85l.27.51c.47.87.94%2C1.73%2C1.39%2C2.6.42.8.85%2C1.62%2C1.34%2C2.51%2C1.69%2C3.15%2C3.45%2C6.43%2C4.6%2C9.84.43%2C1.3.69%2C2.94.95%2C4.69.6%2C3.96%2C1.28%2C8.44%2C4.69%2C10.93l.7.62h30.42l.65-.7c2.14-1.93%2C4.46-4.28%2C4.99-7.67.16-.97.27-1.97.4-3.09.21-1.75.4-3.39.77-4.84.9-3.48%2C2.72-6.58%2C4.47-9.59.48-.83.95-1.64%2C1.41-2.44l.78-1.41c1.97-3.52%2C3.99-7.16%2C5.8-11.05%2C2.06-4.42%2C3.18-9.62%2C3.53-16.43ZM52.31%2C95.4l.61-.59-1.19-2.22c-.56-1.06-1.12-2.12-1.69-3.17-3.83-7.12-7.47-13.85-7.95-23.6v-.8c.29-9.07%2C3.43-16.5%2C9.6-22.72%2C5.69-5.74%2C13.43-8.92%2C22.96-9.42h2.46c8.23.33%2C15.16%2C3.43%2C21.17%2C9.49%2C2.41%2C2.43%2C4.87%2C5.18%2C6.55%2C8.87%2C1.82%2C4.02%2C2.79%2C8.19%2C2.92%2C12.71v2.27c-.31%2C6.02-1.28%2C10.59-3.05%2C14.39-1.73%2C3.71-3.69%2C7.21-5.58%2C10.6l-.85%2C1.54c-.4.72-.83%2C1.46-1.35%2C2.35-1.84%2C3.15-3.91%2C6.71-5%2C10.89-.44%2C1.77-.68%2C3.65-.9%2C5.56-.12.95-.23%2C1.91-.38%2C2.84-.25%2C1.58-1.41%2C2.92-2.25%2C3.78l-.26.17h-26.88l-.26-.37c-1.07-1.52-1.47-4.18-1.86-6.73-.29-1.88-.57-3.81-1.16-5.56-1.29-3.84-3.24-7.46-4.96-10.67l-.72.39h.01Z%22%2F%3E%3Cpath%20d%3D%22M40.95%2C37.27h0c.56.56%2C1.29.84%2C2.03.84s1.47-.28%2C2.02-.83c1.12-1.13%2C1.11-2.96%2C0-4.09l-12.69-12.8c-1.07-1.09-2.97-1.09-4.04%2C0-1.12%2C1.13-1.12%2C2.96%2C0%2C4.09l12.66%2C12.8h.01Z%22%2F%3E%3Cpath%20d%3D%22M107%2C38.11c.73%2C0%2C1.47-.28%2C2.03-.84l12.68-12.8c.55-.55.85-1.27.85-2.04s-.3-1.5-.85-2.05c-1.08-1.09-2.97-1.09-4.04%2C0l-12.68%2C12.8c-1.11%2C1.13-1.11%2C2.96%2C0%2C4.09.55.56%2C1.29.84%2C2.02.84h-.01Z%22%2F%3E%3Cpath%20d%3D%22M135.82%2C64.63h-17.94c-1.58%2C0-2.85%2C1.3-2.85%2C2.89s1.28%2C2.88%2C2.85%2C2.88h17.94c1.58%2C0%2C2.87-1.29%2C2.87-2.88s-1.29-2.89-2.87-2.89Z%22%2F%3E%3Cpath%20d%3D%22M74.99%2C23.88c1.58%2C0%2C2.87-1.3%2C2.87-2.89V2.89c0-1.59-1.29-2.89-2.87-2.89s-2.85%2C1.3-2.85%2C2.89v18.09c0%2C1.59%2C1.28%2C2.89%2C2.85%2C2.89Z%22%2F%3E%3Cpath%20d%3D%22M109.02%2C97.75c-1.08-1.09-2.97-1.09-4.04%2C0-1.11%2C1.13-1.11%2C2.96%2C0%2C4.09l12.68%2C12.8c.55.55%2C1.29.83%2C2.02.83s1.47-.28%2C2.03-.83c.55-.54.83-1.26.85-2.04%2C0-.78-.3-1.5-.85-2.04l-12.69-12.81Z%22%2F%3E%3Cpath%20d%3D%22M34.96%2C67.52c0-1.6-1.28-2.89-2.85-2.89H14.17c-1.56%2C0-2.85%2C1.3-2.85%2C2.89s1.28%2C2.88%2C2.85%2C2.88h17.94c1.58%2C0%2C2.85-1.29%2C2.85-2.88Z%22%2F%3E%3Cpath%20d%3D%22M40.96%2C97.75l-12.68%2C12.81c-.53.54-.83%2C1.26-.83%2C2.02s.3%2C1.5.83%2C2.05c.53.54%2C1.25.84%2C2.02.84s1.49-.3%2C2.02-.84l12.68-12.8c.55-.55.85-1.27.85-2.04s-.3-1.5-.85-2.05c-1.08-1.09-2.93-1.1-4.04%2C0Z%22%2F%3E%3Cpath%20d%3D%22M89.15%2C126.43h-28.31c-1.42%2C0-2.58%2C1.17-2.58%2C2.6s1.16%2C2.6%2C2.58%2C2.6h28.31c1.42%2C0%2C2.58-1.17%2C2.58-2.6s-1.16-2.6-2.58-2.6Z%22%2F%3E%3Cpath%20d%3D%22M89.15%2C134.52h-28.31c-1.42%2C0-2.58%2C1.17-2.58%2C2.6s1.16%2C2.6%2C2.58%2C2.6h28.31c1.42%2C0%2C2.58-1.17%2C2.58-2.6s-1.16-2.6-2.58-2.6Z%22%2F%3E%3Cpath%20d%3D%22M62.8%2C143.94c2.92%2C3.85%2C7.37%2C6.06%2C12.19%2C6.06s9.28-2.21%2C12.19-6.06l1.02-1.33h-26.42l1.02%2C1.33Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.mls-insight > div > h4, .mls-insight h4 {
font-family:Poppins, system-ui, sans-serif !important;
font-weight:600 !important;
font-size:clamp(22px, 1.85vw, 28px) !important;
line-height:1.22 !important;
letter-spacing:-.02em !important;
color:#0e0048 !important;
margin:0 !important;
}
.mls-insight p:not(.mls-ilabel) {
font-size:clamp(17px, 1.28vw, 19px) !important;
line-height:1.55 !important;
font-weight:400 !important;
color:#363d44 !important;
margin:0 !important;
padding-top:3px;
text-wrap:pretty;
/* 2/3 of the card is 921px, which at 19px is ~96 characters a line —
past where the eye reliably finds the start of the next line. Capped
to the 85ch measure the card already read at, so the wider column
buys balance without spending legibility. The ~100px of slack lands
at the card's OUTER edge, where it reads as margin rather than as a
hole between the two halves. */
max-width:820px;
}
@media (max-width:1024px) {
.mls-insight { grid-template-columns:1fr; gap:14px 0; padding:26px 30px 28px; }
.mls-insight p:not(.mls-ilabel) { padding-top:0; }
}
/* ============================================================
SHARE TILES — ul.mls-share (part-of-whole composition)
Tiles as wide as their share, spanning the row. Use ONLY when
the values are shares of one whole (a single-answer question).
Multi-select data must NOT use this — use ul.mls-rrow.mls-bars.
------------------------------------------------------------
COLOUR, as directed: leader tile in partner colour 1 with white
type; the rest stay neutral grey with partner colour 2 type.
MEASURED (floors: 4.5 small text, 3.0 large text & graphics)
numeral #ffffff on #FC4C02 ... 3.40 large OK
label #ffffff on #FC4C02 ... 3.40 LARGE-ONLY
numeral #007A96 on #f1f3f5 ... 4.47 large OK
label #363d44 on #f1f3f5 ... 9.90 small OK
*** THE 21px/700 ON .sl IS LOAD-BEARING, NOT TASTE. ***
ONE pair is below the 4.5 small-text floor: white on colour 1,
at 3.40. It is compliant only because 21px at weight 700 counts
as LARGE text, where the floor drops to 3.0 — WCAG sets that
threshold at 18.66px bold. Drop .sl below 19px, or to weight
600, or let a clamp() take it to 16px on mobile, and the leader
tile silently fails. Do not add a clamp here.
The three grey tiles no longer depend on this at all: their
labels are #363d44 at 9.90 and pass as small text at any size.
That is why the grey labels moved OFF partner colour 2 — at
4.47 they were riding the same exemption for no reason.
NEW PER-PARTNER PRE-FLIGHT, introduced by this colour scheme:
white must clear 3.0 on partner colour 1
=> colour 1 relative luminance must be <= 0.300
NORD orange is 0.259, so it clears with room. A LIGHT brand
primary (a yellow, a pale blue) would NOT, and that page's
leader tile would have to go dark-ground instead.
------------------------------------------------------------
Widths are set by JS as an explicit flex-basis minus each
tile's share of the gap total, NOT as flex-grow: flex-basis:0
does not absorb the tile's 44px of padding, which inflates the
small tiles (measured: [pct] rendered at 15.8% of the row).
min-width:0 is required or the narrowest tile refuses to
shrink below its longest word.
============================================================ */
ul.mls-share {
display:flex; gap:8px; flex-wrap:nowrap;
list-style:none; margin:0 !important; padding:0 !important;
}
ul.mls-share > li {
flex:1 1 0; min-width:0;
background:#f1f3f5; border-radius:10px;
padding:24px 22px 26px; min-height:158px;
display:flex; flex-direction:column; justify-content:space-between;
margin:0 !important;
}
ul.mls-share > li[data-tone="hot"] { background:var(--mls-accent); }
ul.mls-share > li > b {
display:block;
font-family:Poppins, system-ui, sans-serif !important;
font-weight:600 !important;
font-size:clamp(26px, 2.6vw, 46px) !important;
line-height:1 !important;
color:var(--mls-accent-2) !important;
font-variant-numeric:tabular-nums;
}
ul.mls-share > li[data-tone="hot"] > b { color:#ffffff !important; }
ul.mls-share .sl {
display:block; margin:14px 0 0;
/* fixed 21px/700 — see the LOAD-BEARING note above. no clamp.
#363d44 is the question-bubble ink (.mls-q), matched on purpose;
21px sits just under the bubble's 22px so the question stays
the senior element in the section. */
font-size:21px !important;
font-weight:700 !important;
line-height:1.3 !important;
color:#363d44 !important;
}
ul.mls-share > li[data-tone="hot"] .sl { color:var(--mls-tile-lab-ink,#ffffff) !important; }
/* below 900px four proportional tiles are unreadable — the [pct]
tile would be ~120px wide. Stack them and drop the width
encoding entirely; the printed numeral still carries the value. */
@media (max-width:900px) {
ul.mls-share { flex-wrap:wrap; gap:10px; }
ul.mls-share > li { flex:1 1 100% !important; min-height:0; padding:20px 22px 22px; }
ul.mls-share .sl { margin-top:8px; }
}
/* ============================================================
SECTION 2 — THE HIDDEN EDUCATION GAP (.mls-gap*)
Three charts: 1 confidence + 2 stated interest side by side,
3 ranked topics full width. Art direction settled in the
ANALYZE thread; see Output/v55-section2-education-gap/.
------------------------------------------------------------
COLOUR ROLES — orange has ONE meaning here: THE SUBJECT.
Not 'top value'. The cohort in question, every headline
numeral, the highlighted topic, the callout. Do not
reintroduce a second meaning for orange in this section.
subject var(--mls-accent) #FC4C02
neutral marks #007A96
the other half #8597A8
type #0E0048 / muted #5F6B78
card #ffffff · track #E7EBEE
------------------------------------------------------------
NEVER draw the 3.16 vs 3.44 as a slope, a rising line, or two
differently-weighted marks. On a 0-4 scale those are 79% and
[pct] of scale — both near the ceiling. The finding is that
confidence does NOT move interest, which is why the axis must
always show the full 0-4 and why the two bars are allowed to
look the same length. A truncated axis destroys the point.
Cohort identity rides the 13px CHIP on the row label, never
the bar fill: muting the longer bar would fight its length.
------------------------------------------------------------
MEASURED — 22 pairs, all pass except the one noted:
#FC4C02 on #ffffff .... 3.40 large-only
#007A96 on #E7EBEE .... 4.15 OK
#8597A8 on #ffffff .... 3.00 AT FLOOR, no margin
#0E0048 on #ffffff ... 18.88 OK
#5F6B78 on #ffffff .... 5.44 OK
#FC4C02 on #E7EBEE .... 2.84 *** FAILS 3.0 ***
*** THE ONE EXCEPTION ***
The orange fill on its own track is 2.84 and fails the 3.0
graphics floor — and that edge is what communicates the value.
Lightening the track only reaches ~3.05 while making the track
invisible against the card (1.11). Fix: a 1.5px MIDNIGHT
hairline on the fill's trailing edge, which defines the value
boundary at [mobile share]5:1. Do not remove it.
*** COOL GRAY IS WHITE-CARD-ONLY ***
#8597A8 is exactly 3.00 on white and 2.85 on the page ground.
The figure and the chip are legal ONLY inside a white card. If
either ever sits on a band or the page ground it FAILS. Darken
to #6E7F91 (4.11 white / 3.89 paper) if it must move.
------------------------------------------------------------
Orange numerals must be 24px+ to clear large-text at 3.40.
Chart 3's percentages are 20px and therefore stay MIDNIGHT.
If they are ever made orange they must grow to 24px+ first.
============================================================ */
.mls-gapgrid { display:grid; grid-template-columns:1fr 1.16fr; gap:0 30px; align-items:stretch; }
.mls-cardnum {
font-family:Figtree, system-ui, sans-serif !important;
font-weight:700 !important; font-size:11px !important;
letter-spacing:.16em !important; text-transform:uppercase !important;
color:#5F6B78 !important; margin:0 0 12px !important;
}
.mls-gcard {
background:#ffffff; border:1px solid #e3e8ec; border-radius:14px;
box-shadow:0 1px 3px rgba(14,0,72,.05); padding:34px 38px 36px; height:100%;
/* the query container for chart 3. Sized by its COLUMN, never by the
wrap's own padding, so the container query below cannot feed back
into itself. */
container-type:inline-size; container-name:mlscard;
}
.mls-ctitle {
font-family:Poppins, system-ui, sans-serif !important;
font-weight:600 !important; font-size:clamp(18px, 1.42vw, 21px) !important;
line-height:1.25 !important; letter-spacing:-.01em !important;
color:#0E0048 !important; margin:0 0 6px !important;
}
.mls-csub { font-size:16px !important; line-height:1.45 !important;
color:#5F6B78 !important; margin:0 0 30px !important; }
.mls-cnote { font-size:15px !important; line-height:1.5 !important;
color:#5F6B78 !important; margin:26px 0 0 !important; }
/* ---- 1 · confidence ---- */
.mls-gcard.is-conf { display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; padding-top:24px; }
.mls-figs { display:flex; gap:26px; justify-content:center; margin:0 0 6px; }
.mls-fig { display:block; width:150px; height:150px;
background-color:#8597A8;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cpath%20d%3D%22M107.21%2C92.9c5.37-1.42%2C9.55-3.32%2C12.07-4.64%2C2.74-1.44%2C4.01-4.7%2C2.96-7.6-1.72-4.73-5.73-17.84-5.73-37.42C116.5%2C16.17%2C100.96%2C0%2C74.92%2C0s-41.59%2C16.17-41.59%2C43.25c0%2C19.58-4.01%2C32.69-5.73%2C37.42-1.05%2C2.9.22%2C6.16%2C2.95%2C7.59%2C2.53%2C1.33%2C6.75%2C3.25%2C12.16%2C4.67-16.73%2C6.96-30.06%2C1.7-30.06%2C40.52%2C0%2C11.69%2C38.95%2C16.13%2C62.32%2C16.13s62.32-4.44%2C62.32-16.13c0-38.86-13.35-33.56-30.1-40.55ZM74.92%2C82.27c-1.01%2C0-24.37-.5-24.97-43.4%2C6.72-2.86%2C10.13-7.56%2C11.82-11.15%2C4.83%2C5.32%2C15.92%2C13.98%2C37.39%2C14.64-2.2%2C32.5-18.53%2C39.91-24.24%2C39.91ZM62.41%2C82.99c6.29%2C4.15%2C11.98%2C4.26%2C12.51%2C4.26%2C2.93%2C0%2C7.71-1.29%2C12.57-5.05.15%2C3.24%2C1.95%2C6.15%2C5.35%2C8.69-2.93%2C3.32-9.08%2C8.82-18%2C8.82s-14.9-5.48-17.75-8.79c3.15-2.34%2C4.93-5%2C5.31-7.94ZM74.84%2C104.7c6.54%2C0%2C11.79-2.34%2C15.73-5.08l-15.58%2C41.66-15.52-41.49c3.85%2C2.67%2C8.97%2C4.91%2C15.38%2C4.91ZM32.29%2C82.37c2.25-6.18%2C6.03-19.48%2C6.03-39.12%2C0-24.32%2C13.34-38.27%2C36.6-38.27s36.6%2C13.95%2C36.6%2C38.27c0%2C19.64%2C3.78%2C32.94%2C6.03%2C39.13.21.56-.04%2C1.18-.59%2C1.47-3.17%2C1.67-9.25%2C4.33-17.09%2C5.45-6.11-2.9-7.44-5.69-7.44-7.53v-4.37c5.92-7.05%2C11.04-18.66%2C11.84-37.39.03-.68-.22-1.34-.69-1.83-.47-.49-1.12-.77-1.8-.77-29.39%2C0-38.34-15.51-38.7-16.16-.51-.94-1.57-1.46-2.63-1.27-1.06.19-1.88%2C1.04-2.03%2C2.11-.01.09-1.38%2C9.07-11.81%2C12.72-1%2C.35-1.67%2C1.29-1.67%2C2.35%2C0%2C22.57%2C5.97%2C34.95%2C12.59%2C41.77v2.84c0%2C1.84-1.33%2C4.63-7.47%2C7.54-7.88-1.11-14-3.79-17.2-5.47-.54-.28-.79-.9-.58-1.47ZM17.65%2C133.45c0-27.7%2C6.16-29.47%2C17.35-32.7%2C2.46-.71%2C5.2-1.54%2C8.08-2.66-3.04%2C5.59-3.72%2C11.82-3.57%2C17.11-4%2C1.3-6.9%2C5.01-6.9%2C9.44%2C0%2C5.51%2C4.46%2C9.97%2C9.97%2C9.97s9.97-4.46%2C9.97-9.97c0-4.84-3.45-8.87-8.03-9.78-.15-6.7%2C1.11-14.74%2C7.72-20.17l18.64%2C49.83c-31.48-.56-53.23-7.33-53.23-11.09ZM42.58%2C119.66c2.75%2C0%2C4.99%2C2.23%2C4.99%2C4.99s-2.24%2C4.99-4.99%2C4.99-4.99-2.23-4.99-4.99%2C2.24-4.99%2C4.99-4.99ZM79.09%2C144.54l18.63-49.81c4.77%2C3.45%2C7.25%2C8.04%2C7.83%2C10.53-3.91%2C1.24-7.11%2C4.58-8.27%2C8.98l-3.04%2C11.58c-.74%2C2.82-.14%2C5.85%2C1.6%2C8.1%2C1.56%2C2.03%2C3.86%2C3.19%2C6.32%2C3.19h1.64c1.38%2C0%2C2.49-1.11%2C2.49-2.49s-1.11-2.49-2.49-2.49h-1.64c-1.22%2C0-2.01-.78-2.37-1.25-.8-1.04-1.07-2.45-.72-3.79l3.04-11.58c.9-3.43%2C3.68-5.82%2C6.78-5.82s5.89%2C2.39%2C6.78%2C5.82l3.04%2C11.58c.35%2C1.33.08%2C2.75-.72%2C3.79-.36.47-1.14%2C1.25-2.37%2C1.25h-1.64c-1.38%2C0-2.49%2C1.11-2.49%2C2.49s1.11%2C2.49%2C2.49%2C2.49h1.64c2.45%2C0%2C4.75-1.16%2C6.32-3.19%2C1.74-2.25%2C2.33-5.28%2C1.6-8.1l-3.04-11.58c-1.32-5.02-5.28-8.67-9.94-9.39-.32-1.6-1.26-3.93-2.93-6.46%2C2.61.97%2C5.09%2C1.7%2C7.35%2C2.35%2C11.19%2C3.23%2C17.35%2C5.01%2C17.35%2C32.7%2C0%2C3.75-21.76%2C10.53-53.23%2C11.09Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cpath%20d%3D%22M107.21%2C92.9c5.37-1.42%2C9.55-3.32%2C12.07-4.64%2C2.74-1.44%2C4.01-4.7%2C2.96-7.6-1.72-4.73-5.73-17.84-5.73-37.42C116.5%2C16.17%2C100.96%2C0%2C74.92%2C0s-41.59%2C16.17-41.59%2C43.25c0%2C19.58-4.01%2C32.69-5.73%2C37.42-1.05%2C2.9.22%2C6.16%2C2.95%2C7.59%2C2.53%2C1.33%2C6.75%2C3.25%2C12.16%2C4.67-16.73%2C6.96-30.06%2C1.7-30.06%2C40.52%2C0%2C11.69%2C38.95%2C16.13%2C62.32%2C16.13s62.32-4.44%2C62.32-16.13c0-38.86-13.35-33.56-30.1-40.55ZM74.92%2C82.27c-1.01%2C0-24.37-.5-24.97-43.4%2C6.72-2.86%2C10.13-7.56%2C11.82-11.15%2C4.83%2C5.32%2C15.92%2C13.98%2C37.39%2C14.64-2.2%2C32.5-18.53%2C39.91-24.24%2C39.91ZM62.41%2C82.99c6.29%2C4.15%2C11.98%2C4.26%2C12.51%2C4.26%2C2.93%2C0%2C7.71-1.29%2C12.57-5.05.15%2C3.24%2C1.95%2C6.15%2C5.35%2C8.69-2.93%2C3.32-9.08%2C8.82-18%2C8.82s-14.9-5.48-17.75-8.79c3.15-2.34%2C4.93-5%2C5.31-7.94ZM74.84%2C104.7c6.54%2C0%2C11.79-2.34%2C15.73-5.08l-15.58%2C41.66-15.52-41.49c3.85%2C2.67%2C8.97%2C4.91%2C15.38%2C4.91ZM32.29%2C82.37c2.25-6.18%2C6.03-19.48%2C6.03-39.12%2C0-24.32%2C13.34-38.27%2C36.6-38.27s36.6%2C13.95%2C36.6%2C38.27c0%2C19.64%2C3.78%2C32.94%2C6.03%2C39.13.21.56-.04%2C1.18-.59%2C1.47-3.17%2C1.67-9.25%2C4.33-17.09%2C5.45-6.11-2.9-7.44-5.69-7.44-7.53v-4.37c5.92-7.05%2C11.04-18.66%2C11.84-37.39.03-.68-.22-1.34-.69-1.83-.47-.49-1.12-.77-1.8-.77-29.39%2C0-38.34-15.51-38.7-16.16-.51-.94-1.57-1.46-2.63-1.27-1.06.19-1.88%2C1.04-2.03%2C2.11-.01.09-1.38%2C9.07-11.81%2C12.72-1%2C.35-1.67%2C1.29-1.67%2C2.35%2C0%2C22.57%2C5.97%2C34.95%2C12.59%2C41.77v2.84c0%2C1.84-1.33%2C4.63-7.47%2C7.54-7.88-1.11-14-3.79-17.2-5.47-.54-.28-.79-.9-.58-1.47ZM17.65%2C133.45c0-27.7%2C6.16-29.47%2C17.35-32.7%2C2.46-.71%2C5.2-1.54%2C8.08-2.66-3.04%2C5.59-3.72%2C11.82-3.57%2C17.11-4%2C1.3-6.9%2C5.01-6.9%2C9.44%2C0%2C5.51%2C4.46%2C9.97%2C9.97%2C9.97s9.97-4.46%2C9.97-9.97c0-4.84-3.45-8.87-8.03-9.78-.15-6.7%2C1.11-14.74%2C7.72-20.17l18.64%2C49.83c-31.48-.56-53.23-7.33-53.23-11.09ZM42.58%2C119.66c2.75%2C0%2C4.99%2C2.23%2C4.99%2C4.99s-2.24%2C4.99-4.99%2C4.99-4.99-2.23-4.99-4.99%2C2.24-4.99%2C4.99-4.99ZM79.09%2C144.54l18.63-49.81c4.77%2C3.45%2C7.25%2C8.04%2C7.83%2C10.53-3.91%2C1.24-7.11%2C4.58-8.27%2C8.98l-3.04%2C11.58c-.74%2C2.82-.14%2C5.85%2C1.6%2C8.1%2C1.56%2C2.03%2C3.86%2C3.19%2C6.32%2C3.19h1.64c1.38%2C0%2C2.49-1.11%2C2.49-2.49s-1.11-2.49-2.49-2.49h-1.64c-1.22%2C0-2.01-.78-2.37-1.25-.8-1.04-1.07-2.45-.72-3.79l3.04-11.58c.9-3.43%2C3.68-5.82%2C6.78-5.82s5.89%2C2.39%2C6.78%2C5.82l3.04%2C11.58c.35%2C1.33.08%2C2.75-.72%2C3.79-.36.47-1.14%2C1.25-2.37%2C1.25h-1.64c-1.38%2C0-2.49%2C1.11-2.49%2C2.49s1.11%2C2.49%2C2.49%2C2.49h1.64c2.45%2C0%2C4.75-1.16%2C6.32-3.19%2C1.74-2.25%2C2.33-5.28%2C1.6-8.1l-3.04-11.58c-1.32-5.02-5.28-8.67-9.94-9.39-.32-1.6-1.26-3.93-2.93-6.46%2C2.61.97%2C5.09%2C1.7%2C7.35%2C2.35%2C11.19%2C3.23%2C17.35%2C5.01%2C17.35%2C32.7%2C0%2C3.75-21.76%2C10.53-53.23%2C11.09Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
/* ONE figure repeated, never a male and a female: two visually
different figures in a ratio graphic read as two CATEGORIES,
which puts sex in the frame as the apparent variable. Colour
is the only thing allowed to vary. */
.mls-fig.is-subject { background-color:var(--mls-accent); }
.mls-big {
font-family:Poppins, system-ui, sans-serif !important;
font-weight:500 !important; font-size:clamp(52px, 5.2vw, 80px) !important;
line-height:1 !important; color:var(--mls-accent) !important;
margin:0 0 14px !important; font-variant-numeric:tabular-nums;
}
.mls-big > b { font-weight:inherit !important; font-size:inherit !important; color:inherit !important; }
.mls-biglab {
font-family:Figtree, system-ui, sans-serif !important;
font-weight:700 !important; font-size:14px !important; letter-spacing:.11em !important;
text-transform:uppercase !important; color:#0E0048 !important; margin:0 0 14px !important;
}
.mls-bigsup { font-size:17px !important; line-height:1.5 !important;
color:#5F6B78 !important; margin:0 !important; max-width:44ch; }
/* ---- tracks, shared by charts 2 and 3 ---- */
ul.mls-track { list-style:none; margin:0 !important; padding:0 !important; }
ul.mls-track > li { display:block; margin:0 !important; }
ul.mls-track .lb { display:flex; align-items:center; gap:9px; margin:0 0 9px;
font-family:Figtree, system-ui, sans-serif !important;
font-weight:700 !important; font-size:13px !important; letter-spacing:.1em !important;
text-transform:uppercase !important; color:#0E0048 !important; }
ul.mls-track .lb::before { content:''; flex:none; width:13px; height:13px;
border-radius:3px; background:#8597A8; }
ul.mls-track > li[data-tone="hot"] .lb::before { background:var(--mls-accent); }
ul.mls-track .tk { display:flex; align-items:center; gap:18px; }
ul.mls-track .rail { position:relative; flex:1 1 auto; height:30px;
background:#E7EBEE; border-radius:4px; overflow:hidden; }
ul.mls-track .fill { position:absolute; left:0; top:0; bottom:0;
background:var(--mls-brand-2); border-radius:4px 0 0 4px; }
ul.mls-track .v { flex:none;
font-family:Poppins, system-ui, sans-serif !important;
font-weight:500 !important; font-size:28px !important; line-height:1 !important;
color:var(--mls-accent) !important; font-variant-numeric:tabular-nums; min-width:82px; }
/* ---- 2 · stated interest: axis + semantic anchors ---- */
.is-interest ul.mls-track > li + li { margin-top:26px !important; }
.mls-axis04 { display:flex; justify-content:space-between;
margin:22px 100px 0 0 !important; padding:9px 0 0; border-top:1px solid #cfd6dd;
font-size:15px !important; color:#5F6B78 !important; font-variant-numeric:tabular-nums; }
/* the anchors are semantic on purpose: they make the empty three
quarters of the axis read as 'nobody is over here' rather than
as dead space. */
.mls-anchors { display:flex; justify-content:space-between;
margin:6px 100px 0 0 !important; font-size:15px !important; color:#5F6B78 !important; }
/* ---- 3 · ranked topics ---- */
/* ------------------------------------------------------------
CHART 3 IS COLUMN-ADAPTIVE, AND FAILS SAFE.
The old default reserved a hard 360px gutter for the bracket
plus a hard 250px label column. Dropped into a half-width
column that arithmetic goes negative and the TRACK gets 0px —
measured live at column 790 / wrap 662: every bar rendered at
zero and the values sat on top of the bracket.
So the default is now the SAFE layout — bracket stacked under
the list, no gutter reserved — and the gutter is only taken
back when the card is actually wide enough to give it away.
A browser without container-query support gets the stacked
version, which is merely plainer, never broken.
------------------------------------------------------------ */
.mls-rankwrap { position:relative; padding-right:0; }
ul.mls-rank > li { display:grid; grid-template-columns:250px 1fr; gap:0 26px; align-items:center; }
ul.mls-rank > li + li { margin-top:20px !important; }
ul.mls-rank .lb { display:block; text-align:right;
font-weight:500 !important; font-size:17px !important; line-height:1.25 !important;
letter-spacing:0 !important; text-transform:none !important;
color:#0E0048 !important; margin:0 !important; }
ul.mls-rank .lb::before { display:none; }
ul.mls-rank > li[data-tone="hot"] .lb { font-weight:700 !important; }
ul.mls-rank .tk { gap:22px; }
ul.mls-rank .v { font-size:20px !important; color:#0E0048 !important; min-width:64px; }
ul.mls-rank > li[data-tone="hot"] .fill {
background:var(--mls-accent);
border-right:1.5px solid #0E0048; /* THE EXCEPTION — see header */
}
.mls-bracket { position:relative; width:auto; margin:26px 0 0;
border-left:2px solid var(--mls-accent); padding-left:26px;
top:auto; height:auto; }
.mls-bracket::before, .mls-bracket::after { display:none; }
.mls-tie { display:none; }
/* ------------------------------------------------------------
THE PLOT IS CAPPED, THE CARD IS NOT.
Uncapped at full width the track ran ~808px, which turned 42%
into ~340px of solid teal and made the chart read as enormous
for a modest number. That — not the column width — was the
real cause of 'too wide'. So the plot is capped and the
bracket follows the bars leftward instead of hugging the card
edge, leaving deliberate air on the right.
label 250 + gap 26 + track 570 = 846
bracket starts at 900, width 340 = ends 1240
wrap max-width 1240, so nothing can overflow
Track cell 570 - 22 gap - 64 value = 484px of rail:
56% -> 271px 42% -> 203px range spans 68px
Threshold is 1280, not 1180, so the 1240px assembly always
fits inside the container that opted into it.
------------------------------------------------------------ */
/* ------------------------------------------------------------
THE CARD FITS THE PLOT, AND THE CARD IS CENTRED.
With the bracket gone there was no gutter left to justify a
full-bleed card, so ~650px of bordered empty space sat beside
the bars and read as a mistake. The card now sizes to the plot
and centres in the row.
plot 250 label + 26 gap + 570 track = 846
card 846 + 76 of padding = 922 MINIMUM
set to 940 for slack. An 880 card would overflow by 42px.
*** THRESHOLDS MOVE WITH THE CARD ***
The plot geometry used to live behind (min-width:1280px), which
was keyed to a full-bleed card. Shrinking the card to 940 makes
its content box 864, so that query would stop matching and the
layout would fall silently through to the narrow rules and
collapse the label column. The gate is now 840 — just under the
864 the plot actually gets. Any future change to the card width
has to move this number too.
------------------------------------------------------------ */
.mls-gcard:has(.mls-rankwrap) {
max-width:940px;
margin-left:auto; margin-right:auto;
}
/* The chart's own eyebrow has to travel with it. Centring the card left
the '3 - TOPICS RANKED BY INTEREST' label at the container's left edge,
320px away from the card it names — an orphaned label reads as a
different element entirely. Same box, same auto margins, so its left
edge lands on the card's. */
.inner_row:has(.mls-rankwrap) .mls-cardnum {
max-width:940px; margin-left:auto !important; margin-right:auto !important;
}
@container mlscard (min-width:840px) {
.mls-rankwrap { padding-right:0; max-width:none; }
ul.mls-rank > li { grid-template-columns:250px minmax(0, 570px); }
}
/* The 250px label column is the next thing to give, but not yet — at a
664px card box it still leaves ~300px of track, which carries the
56-42 range fine and keeps the chart looking like itself. Only below
520 does the label column stop paying for itself. */
@container mlscard (max-width:520px) {
ul.mls-rank > li { grid-template-columns:1fr; gap:7px 0; }
ul.mls-rank .lb { text-align:left; }
}
@container mlscard (max-width:700px) {
ul.mls-rank > li { grid-template-columns:190px 1fr; gap:0 20px; }
ul.mls-rank .v { min-width:54px; font-size:19px !important; }
ul.mls-rank .tk { gap:16px; }
}
/* ------------------------------------------------------------
A PROSE COLUMN BESIDE A CHART gets centred against it. The two
columns are forced to equal height by the stretch rule above,
so without this the short prose hangs at the top of a 718px
column. The card drops to flex:0 0 auto here so it sizes to its
own content and centring means something for both.
------------------------------------------------------------ */
.inner_row:has(.mls-gapp):has(.mls-gcard) .vc_column-inner {
justify-content:center !important;
}
.inner_row:has(.mls-gapp):has(.mls-gcard) .vc_column-inner > .wpb_wrapper {
flex:0 0 auto;
}
.inner_row:has(.mls-gapp):has(.mls-gcard) .mls-gcard { flex:0 0 auto; height:auto; }
.mls-bracket::before, .mls-bracket::after { content:''; position:absolute; left:0;
width:13px; height:2px; background:var(--mls-accent); }
.mls-bracket::before { top:0; }
.mls-bracket::after { bottom:0; }
.mls-brnum { font-family:Poppins, system-ui, sans-serif !important;
font-weight:500 !important; font-size:34px !important; line-height:1 !important;
color:var(--mls-accent) !important; margin:0 0 8px !important; font-variant-numeric:tabular-nums; }
.mls-brlab { font-size:16px !important; line-height:1.4 !important;
color:#5F6B78 !important; margin:0 !important; max-width:26ch; }
.mls-tie { position:absolute;
border-right:1.5px dashed var(--mls-accent); border-bottom:1.5px dashed var(--mls-accent); }
.mls-tie::after { content:''; position:absolute; left:-8px; bottom:-5.5px;
border:5.5px solid transparent; border-right-color:var(--mls-accent); border-left:0; }
@media (max-width:1024px) {
.mls-gapgrid { grid-template-columns:1fr; gap:26px 0; }
.mls-gcard { padding:26px 24px 28px; }
.mls-figs { gap:14px; } .mls-fig { width:110px; height:110px; }
/* the bracket and its tie are absolutely positioned against a
reserved gutter; below 1024 there is no gutter, so it stacks
under the list and the tie is dropped entirely. */
.mls-rankwrap { padding-right:0; }
/* The bracket becomes a plain left rule under the list. It must stay
POSITIONED: its end caps are absolute children, and with the bracket
static they resolve against .mls-rankwrap instead and fly to that
box's corners — a stray orange dash above the first row. Caps are
hidden here anyway, since a rule spanning nothing has nothing to cap.
top/height are !important to beat the inline geometry the desktop
pass wrote, which otherwise sticks after a resize down. */
.mls-bracket { position:relative; width:auto; margin:26px 0 0;
top:auto !important; height:auto !important; }
.mls-bracket::before, .mls-bracket::after { display:none; }
.mls-tie { display:none !important; }
ul.mls-rank > li { grid-template-columns:1fr; gap:8px 0; }
ul.mls-rank .lb { text-align:left; }
.mls-axis04, .mls-anchors { margin-right:0 !important; }
}
/* section-2 prose between the charts. the strategist's docx carries two body
paragraphs between the 50% block and the ranked list; they sit next to
the chart each one describes so no supplied copy is dropped. */
.mls-gapp { font-size:clamp(17px, 1.32vw, 19px) !important; line-height:1.55 !important;
font-weight:400 !important; color:#5F6B78 !important;
margin:34px 0 0 !important; max-width:88ch; text-wrap:pretty; }
.mls-gapp + .mls-cardnum, .mls-gapp + div > .mls-cardnum { margin-top:26px !important; }
/* the insight card closes the section, so it needs air above it here */
.mls-gapclose { margin-top:44px; }
/* ============================================================
SALIENT PARAGRAPH PADDING — zero it on every class here.
The theme sets padding-bottom on p in EM, not px, so it scales
with font-size and is invisible until you measure it. Observed
live in this section before the fix:
.mls-big 80px numeral -> 120px of phantom padding
.mls-brnum 34px callout -> 51px
.mls-gapp 19px prose -> 28.5px
.mls-csub 16px sub -> 24px
.mls-biglab 14px caps -> 21px
.mls-cardnum 11px caps -> 16.5px
Only p:last-child is exempted by the theme, which is why some
of these read 0 and the rest do not — a trap, because the same
class behaves differently depending on its position.
ANY new
class added to this stylesheet must zero padding.
============================================================ */
.mls-cardnum, .mls-big, .mls-biglab, .mls-bigsup,
.mls-ctitle, .mls-csub, .mls-cnote,
.mls-brnum, .mls-brlab, .mls-gapp, .mls-anchors,
.mls-ilabel { padding:0 !important; }
/* .mls-axis04 keeps a 9px top pad — it carries the axis rule */
.mls-axis04 { padding:9px 0 0 !important; }
/* ============================================================
SECTION 2 STRUCTURE — real WPBakery inner rows (v56)
The three charts, the two prose paragraphs and the key insight
each live in their own inner row now, one Raw HTML element per
piece, so each is separately editable in the canvas and the
columns stack natively on mobile. .mls-gapgrid is retired —
WPBakery owns the two-up layout, not a CSS grid.
------------------------------------------------------------
Salient sets .vc_column-inner to justify-content:center, which
leaves the SHORTER card floating in the middle of its column
instead of topped and stretched. Stretch the whole chain.
el_class is unreliable on rows here, so these key off :has()
on the content — the rule follows what a thing IS, not where.
============================================================ */
.inner_row:has(.mls-gcard) .vc_column-inner {
display:flex; flex-direction:column; height:100%;
}
.inner_row:has(.mls-gcard) .vc_column-inner > .wpb_wrapper {
display:flex; flex-direction:column; flex:1 1 auto;
}
/* Vertical alignment of these two-column rows is the page's call, not this
file's - set it with the row's Content Position dropdown in the builder.
The dropdown's own rules stop at .vc_column-inner, and the wrapper above is
flex:1 1 auto, so .vc_column-inner is left with no free space to distribute.
That is why setting Content Position appeared to do nothing: the free space
is inside the wrapper, so the row's class has to be mapped onto it here.
Measured live, insight card 303px inside a 398px column:
top 0 above / 95 below
middle 48 above / 48 below
bottom 95 above / 0 below
No effect on the left column either way - .mls-gcard is flex:1 1 auto and
fills the height, so there is no free space there to move.
Unset dropdown still falls back to top, the long-standing default. */
.inner_row:has(.mls-gcard).vc_row-o-content-top .vc_column-inner > .wpb_wrapper { justify-content:flex-start; }
.inner_row:has(.mls-gcard).vc_row-o-content-middle .vc_column-inner > .wpb_wrapper { justify-content:center; }
.inner_row:has(.mls-gcard).vc_row-o-content-bottom .vc_column-inner > .wpb_wrapper { justify-content:flex-end; }
.inner_row:has(.mls-gcard) .mls-gcard { flex:1 1 auto; }
/* the prose row gets its own air, above and below */
.inner_row:has(.mls-gapp) { padding:30px 0 34px; }
.inner_row:has(.mls-gapp) .mls-gapp { margin:0 !important; max-width:none; }
/* the insight closes the section */
.inner_row:has(.mls-insight) { padding-top:14px; }
@media (max-width:1024px) {
.inner_row:has(.mls-gapp) { padding:18px 0 22px; }
}
/* ============================================================
QUESTION PILL — reclaim the bottom padding Salient steals.
.row .col p:last-child { padding-bottom:0 } is (0,2,2) and beats
.mls-q at (0,1,0), so ANY pill that happens to be the last
element in its column silently loses its bottom padding.
Measured live before this fix:
'What rare cancer topic...' 11 / 0 h 42 last-child
'Which categories of...' 11 / 0 h 42 last-child
'Which applications of AI...' 11 / 11 h 53
'How do you stay up to date' 11 / 11 h 84
'What's your biggest...' 11 / 11 h 84
Same class, two different shapes, decided by DOM position.
============================================================ */
.mls-q { padding:11px 24px !important; }
/* ============================================================
DOT PLOT — ul.mls-track.mls-dots
Eleven values on one shared axis. Chosen over bubbles because
bubbles cannot tell the truth about a 24-64 range: sized by
DIAMETER (as the source mock does) 64-vs-24 reads as 8x the
area; sized by AREA, 64-vs-54 collapses to a 9% edge nobody
can see. A position encoding has neither failure.
------------------------------------------------------------
NO NEW JS. This reuses the existing track() builder: the .fill
is still sized to value/data-max, but its background is
dropped and its RIGHT EDGE carries a dot. So the dot lands at
the value's position for free, and the typed b.v stays the
single source of truth.
------------------------------------------------------------
MEASURED
newest dot #0E0048 on white ... 18.88 OK
established #5F6B78 on white .... 5.44 OK
label 17px #0E0048 ............. 18.88 OK
value 19px #5F6B78 ............. 5.44 OK
cliff rule #FC4C02 graphic ..... 3.40 OK
REJECTED for the established dots: #8597A8, the 'other half'
gray, is exactly 3.00 on white — at the graphics floor with
zero margin. Fine for a 150px figure, too thin for a 15px dot.
REJECTED for the cliff LABEL: orange is 3.40 and the label is
11px, i.e. small text needing 4.5. The RULE may be orange
(a graphic, floor 3.0); the words may not.
============================================================ */
ul.mls-track.mls-dots > li {
display:grid; grid-template-columns:250px 1fr; gap:0 26px;
align-items:center; padding:5px 0;
}
ul.mls-track.mls-dots > li + li { margin-top:0 !important; }
ul.mls-track.mls-dots .lb {
display:block; text-align:right;
font-weight:500 !important; font-size:17px !important; line-height:1.25 !important;
letter-spacing:0 !important; text-transform:none !important;
color:#0E0048 !important; margin:0 !important;
}
ul.mls-track.mls-dots .lb::before { display:none; }
ul.mls-track.mls-dots > li[data-tone="hot"] .lb { font-weight:700 !important; }
ul.mls-track.mls-dots .tk { gap:22px; }
ul.mls-track.mls-dots .rail {
height:22px; background:none; border-radius:0; overflow:visible;
}
ul.mls-track.mls-dots .rail::before {
content:''; position:absolute; left:0; right:0; top:50%;
height:1px; background:#E7EBEE;
}
/* the fill is kept for its WIDTH only — it is the position carrier */
ul.mls-track.mls-dots .fill {
background:none !important; border-right:0 !important; border-radius:0;
}
ul.mls-track.mls-dots .fill::after {
content:''; position:absolute; right:-7.5px; top:50%;
width:15px; height:15px; margin-top:-7.5px;
border-radius:50%; background:var(--mls-brand-2);
}
ul.mls-track.mls-dots > li[data-tone="hot"] .fill::after {
width:19px; height:19px; right:-9.5px; margin-top:-9.5px;
background:var(--mls-accent);
}
ul.mls-track.mls-dots .v {
min-width:58px; font-size:19px !important; font-weight:500 !important;
color:#5F6B78 !important;
}
ul.mls-track.mls-dots > li[data-tone="hot"] .v {
color:#0E0048 !important; font-weight:600 !important;
}
/* the cliff: the one real break in the list. Label is muted, not
orange — see the contrast note above. */
ul.mls-track.mls-dots > li.mls-cliff { margin-top:28px !important; position:relative; }
ul.mls-track.mls-dots > li.mls-cliff::before {
content:attr(data-gap); position:absolute; top:-21px; left:276px; z-index:2;
background:#ffffff; padding:0 10px 0 0;
font-family:Figtree, system-ui, sans-serif; font-weight:700; font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:#5F6B78;
}
ul.mls-track.mls-dots > li.mls-cliff::after {
content:''; position:absolute; top:-15px; left:276px; right:58px; z-index:1;
border-top:1px dashed #5F6B78;
}
p.mls-daxis {
/* the rule must span the TRACK, not the container. Track starts at the
250px label column + 26px gap = 276px and ends 80px short of the
right edge (58px value column + 22px .tk gap), so those are margins,
not padding — padding would leave the border full-bleed. */
display:flex; justify-content:space-between;
margin:14px 80px 0 276px !important; padding:8px 0 0 !important;
border-top:1px solid #cfd6dd;
font-size:14px !important; color:#5F6B78 !important;
font-variant-numeric:tabular-nums;
}
@media (max-width:900px) {
ul.mls-track.mls-dots > li { grid-template-columns:1fr; gap:4px 0; padding:8px 0 10px; }
ul.mls-track.mls-dots .lb { text-align:left; }
/* the label keeps its auto width — giving it right:0 too made its
white ground stretch the full row and paint over the dashed rule
it sits on (z-index 2 vs 1). Only the RULE gets right:0. */
ul.mls-track.mls-dots > li.mls-cliff::before { left:0; right:auto; }
ul.mls-track.mls-dots > li.mls-cliff::after { left:0; right:0; }
p.mls-daxis { margin-left:0 !important; margin-right:0 !important;
padding-left:0 !important; padding-right:0 !important; }
}
/* ============================================================
A LONE .mls-gapp IN A FULL-WIDTH COLUMN KEEPS A READING MEASURE
.inner_row:has(.mls-gapp) .mls-gapp { max-width:none } was written
for the two-column prose row, where the column is already ~790px.
Inside a vc_col-sm-12 that release lets the line run the full
1580px container. Restore the 88ch measure in that case only.
Specificity: 4 classes here vs 3 on the release rule.
============================================================ */
.inner_row:has(.mls-gapp) .vc_col-sm-12 .mls-gapp { max-width:88ch; }
/* ============================================================
DOT COLOUR — v62. the CD: "We need some color in those dots.
Orange on top group and teal on lower."
The dots now carry the two partner colours as DATA marks,
which is new: colour 1 was previously text-free on this page
and colour 2 had only ever been a tint and an icon.
------------------------------------------------------------
Measured on white (floor 3.0, graphic):
newest var(--mls-accent) #FC4C02 ... 3.40 OK
established var(--mls-accent-2) #007A96 ... 4.97 OK
Distinguishable: delta-E 123.8 between the two, and 10.8
points of L* apart (57.9 vs 47.1), so the pair survives
greyscale and the common colour-vision deficiencies. For
contrast, teal vs ML gray is delta-E 7.9 and failed.
------------------------------------------------------------
The cliff rule moved OFF orange to #5F6B78, matching its own
label. Orange now denotes the newest group, so an orange rule
drawn at that group's boundary claims membership in it.
------------------------------------------------------------
NEW PARTNER PRE-FLIGHT, both directions on colour 1:
white on colour 1 >= 3.0 (the leader tile, v54)
colour 1 on white >= 3.0 (these dots) <-- new
NORD orange passes the second at 3.40 with little to spare.
A light or yellow colour 1 will fail it.
============================================================ */
/* ============================================================
TIER BREAK ON THE RANKED CHART — .mls-rank + .mls-cliff
The cliff annotation was built for .mls-dots in v61. The
neurology Section 2 needs the same device on the ranked bars,
where the strategist's copy asserts "a real gap between tiers, not a
gradual slope" — an 18-point drop from 72% to 54%.
------------------------------------------------------------
Offsets MEASURED on the rendered chart, not assumed:
label column 250 + 26px gap = 276px inset, LEFT
value column 64 + gaps = 102px inset, RIGHT
Those are the rail's own edges, so the rule spans exactly the
track. The .mls-dots variant uses 80px on the right because
its value column is narrower — the two are NOT interchangeable.
If the label column ever changes, both sets change with it.
------------------------------------------------------------
Ground is #ffffff because .mls-gcard is white (measured). On a
tinted card this label would need the card's own colour or it
reads as a white patch over the rule.
------------------------------------------------------------
Colour, measured on white:
rule var(--mls-accent) #FC4C02 ... 3.40 floor 3.0 graphic OK
label #5F6B78 at 11px ........... 5.44 floor 4.5 small OK
Orange at 11px would be 3.40 against a 4.5 small-text floor,
so the RULE may be orange and the WORDS may not. Same split
as v61 — see that entry before changing either.
============================================================ */
ul.mls-track.mls-rank > li.mls-cliff { margin-top:30px !important; position:relative; }
ul.mls-track.mls-rank > li.mls-cliff::before {
content:attr(data-gap); position:absolute; top:-22px; left:276px; right:auto; z-index:2;
background:#ffffff; padding:0 10px 0 0;
font-family:Figtree, system-ui, sans-serif; font-weight:700; font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:#5F6B78;
}
ul.mls-track.mls-rank > li.mls-cliff::after {
content:''; position:absolute; top:-16px; left:276px; right:102px; z-index:1;
border-top:1px dashed var(--mls-accent);
}
@media (max-width:900px) {
/* the label keeps auto width — giving it right:0 stretches its white
ground across the row and paints over the rule (v61's bug). */
ul.mls-track.mls-rank > li.mls-cliff::before { left:0; right:auto; }
ul.mls-track.mls-rank > li.mls-cliff::after { left:0; right:0; }
}
/* ---- v69 . mls-tstat holds a word, not only a percentage ----------
Section 8 (TIME AND PLACE) puts "[long day label]" and "[hour label]" in the number
slot. Measured in the live face (Poppins 600, letter-spacing -1.12px):
"[desktop share]" 56px = 154px -> overflows the 150px column by 4
"[hour label]" 56px = 126px -> fits
"[long day label]" 56px = 332px -> needs 2.2x the column
So the column becomes a token, a wide variant opts in at 250px, and a
word value drops to 40px ("[long day label]" 40px = 235px, clears 250 by 15).
Default stays 150px, so a tstat block without the class is unchanged.
Wrapped in min-width:721px because the mobile block at max-width:720px
collapses this grid and sets its own b size - it must keep winning. */
ul.mls-tstat.mls-tstat-wide { --mls-tnum:250px; }
@media (min-width:721px){
ul.mls-tstat li { grid-template-columns:var(--mls-tnum,150px) 1fr; }
ul.mls-tstat li[data-kind="word"] > b { font-size:40px; line-height:1; }
}
/* ---- v71 . per-page scoping for the program cards ------------------
Both partner pages use the same .mls-prog .p-1/.p-2/.p-3 markup, and
this sheet is URL-filtered to "contains /nord-" so it loads on BOTH.
Setting the oncology thumbs in v70 therefore put the oncology faculty
on the neurology page too (measured: p-1 served starr-ep-nec under a
Myasthenia Gravis title). The neurology cards now carry an extra
.is-neuro class - 4 classes here against the 3-class oncology rules
above, so it wins on specificity regardless of order. No page-id
selectors: those are what broke the v66 prod migration. */
.mls-prog.p-1.is-neuro .p-thumb { background-image:url('/wp-content/uploads/2026/09/prog-howard-gmg-complement.webp'); }
.mls-prog.p-2.is-neuro .p-thumb { background-image:url('/wp-content/uploads/2026/09/prog-strober-mg-community.webp'); }
.mls-prog.p-3.is-neuro .p-thumb { background-image:url('/wp-content/uploads/2026/09/prog-rett-syndrome-care.webp'); }
/* ---- v72 . chart chrome removed ------------------------------------
the CD: drop the numbered step labels, the card outlines and the added
footnotes. The .mls-cardnum and .mls-cnote elements are deleted from
the page markup; the card itself keeps its 940px column and padding
box so nothing reflows, it just stops being drawn. */
.mls-gcard {
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding-left:0 !important;
padding-right:0 !important;
}
/* ---- v72 . ground-aware tokens (was the v68 preview) ----------------
Every knockout, hairline and quiet fill now derives from a token
instead of a hard-coded white. Defaults below are the old white-ground
values, so rows on white render byte-identically. Salient emits
.row-bg-overlay only on a row that has been GIVEN a background, so the
rule reads the row setting - nothing to remember. Second :has() keeps
it off the teal quote row, which has a ground but no chart.
Measured on #f1f3f5: non-leader share tiles were 1.00 (invisible),
rail 1.08, pill 1.08. Teal tiles read 4.47, white label/numeral 4.97,
rail #c7d0d8 1.40, axis #b9c4ce 1.59. The !important flags are not
decoration - without them the numeral, label and pill keep their old
values on specificity. */
:root{
--mls-ground:#ffffff; --mls-rail:#E7EBEE; --mls-axis:#cfd6dd;
--mls-tile:#f1f3f5; --mls-tile-num:#007A96; --mls-tile-lab:#363d44;
--mls-pill:#e7ebee; --mls-pill-edge:transparent;
}
.wpb_row:has(> .row-bg-wrap .row-bg-overlay):has(.mls-track,.mls-share,.mls-ai,.mls-q){
--mls-ground:#f1f3f5; --mls-rail:#c7d0d8; --mls-axis:#b9c4ce;
--mls-tile:var(--mls-brand-2); --mls-tile-num:#ffffff; --mls-tile-lab:var(--mls-tile-lab-ink,#ffffff);
--mls-pill:#ffffff; --mls-pill-edge:#cfd6dd;
}
/* manual overrides, on a COLUMN Extra Class (vc_row discards el_class) */
.mls-on-white{ --mls-ground:#ffffff; --mls-rail:#E7EBEE; --mls-axis:#cfd6dd;
--mls-tile:#f1f3f5; --mls-tile-num:var(--mls-accent-2); --mls-tile-lab:#363d44;
--mls-pill:#e7ebee; --mls-pill-edge:transparent; }
.mls-on-tint { --mls-ground:#f1f3f5; --mls-rail:#c7d0d8; --mls-axis:#b9c4ce;
--mls-tile:var(--mls-brand-2); --mls-tile-num:#ffffff; --mls-tile-lab:var(--mls-tile-lab-ink,#ffffff);
--mls-pill:#ffffff; --mls-pill-edge:#cfd6dd; }
ul.mls-track.mls-dots .rail::before { background:var(--mls-rail) !important; }
ul.mls-track.mls-dots > li.mls-cliff::before,
ul.mls-track.mls-rank > li.mls-cliff::before { background:var(--mls-ground) !important; }
p.mls-daxis { border-top-color:var(--mls-axis) !important; }
ul.mls-share > li:not([data-tone="hot"]) { background:var(--mls-tile) !important; }
ul.mls-share > li:not([data-tone="hot"]) > b { color:var(--mls-tile-num) !important; }
ul.mls-share > li:not([data-tone="hot"]) > span.sl { color:var(--mls-tile-lab) !important; }
.mls-q { background:var(--mls-pill) !important; box-shadow:inset 0 0 0 1px var(--mls-pill-edge); }
/* v72b . mls-gcard-align: with the card outline gone, the 940px centred
box read as an arbitrary indent against the left-aligned section copy.
Left-align it so the chart title shares the body-copy edge. */
.mls-gcard { margin-left:0 !important; margin-right:auto !important; } /* mls-gcard-align */
/* ---- v76 . intro band text ------------------------------------------
MEASURED FAILURE, both partner pages: .mls-intro was #363d44 sitting on
the slate #5F6B78 intro band = 2.02 contrast, against a 4.5 floor for
body text. White fixes it on slate (5.44) and on the Midnight band the
neurology page now uses (18.88). Every .mls-intro on both pages lives
in that band - checked - so this is safe to set unscoped. */
.mls-intro { color:#ffffff !important; }
/* ---- v77 . quote block fills its parent --------------------------------
Was .mls-quotewrap { max-width:820px; margin:0 auto } - centred inside a
1530px column, which left a wide empty gutter on the left of the teal
band. the CD wants it to fill the parent; narrowing it later is a column
change rather than a CSS one. Applies to both partner pages. */
.mls-quotewrap { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
/* ---- v78 . device-share caveat (oncology page only) -------------------
the strategist's qualifier on the Desktop v Mobile donut in TIME AND PLACE. Set
as body copy, NOT chart small print: the CD stripped the footnotes off
these charts in v72, so this reads at body size in the project grey.
NO font-size here on purpose. The theme ships
p, li { font-size: max(1vw, 18px) !important; }
so every paragraph on the site is fluid body type - 18px up to a 1800px
viewport, larger beyond it. A 16px rule here simply lost to it, silently.
Rather than fight it with !important, the caveat rides the same fluid
size as all other body copy, and the measure is set in em so it scales
with the type instead of pinning to a pixel width: 32em holds ~55
characters a line at any viewport (comfortable is 45-75).
Measured on the live page: #363d44 on the #f7f9fa that .wpb_text_column
actually paints (NOT white - checked) = 10.42, against a 4.5 floor.
.mls-chart carries margin-bottom:78px, which was the column bottom
breathing room while the donut was the last element in flow. Collapse it
ONLY where a caveat follows, so the neurology donut is left alone. */
.mls-chart:has(~ p.mls-caveat){ margin-bottom:0 !important; }
p.mls-caveat{
margin:24px 0 0; max-width:32em;
line-height:1.55; font-weight:400; letter-spacing:0;
color:#363d44;
}
/* ---- v79 . share tiles are teal on every ground -----------------------
v72 asked for the IN THEIR OWN WORDS tiles to be teal. That shipped as an
auto-detect keyed to Salient's .row-bg-overlay, which exists only on a row
that has been given a background. The neurology row has one; the ONCOLOGY
row - the page the CD was actually pointing at - does not, so the rule never
fired there and those tiles stayed #f1f3f5. The v72 changelog entry reads
"confirmed live on the neurology IN THEIR OWN WORDS row": I verified the
wrong page and reported it done. They have been grey since v72.
That is not only cosmetic. v68 established that tile WIDTH is the data in
.mls-share, and #f1f3f5 on the white oncology ground measures 1.11 - so
the fill was doing none of the work the chart needs it to do.
the CD's call: keep the oncology ground WHITE and make the tiles teal. So
teal becomes the DEFAULT rather than a per-ground special case - no
page-id selector and no per-page class, which also means any future
partner page gets it right without being told.
Scope checked against the live CSSOM, not assumed: the three tile tokens
are consumed by exactly three selectors -
ul.mls-share > li:not([data-tone="hot"])
ul.mls-share > li:not([data-tone="hot"]) > b
ul.mls-share > li:not([data-tone="hot"]) > span.sl
- so nothing else moves. Quote pill (#e7ebee), rail (#e7ebee) and dot
axis (#cfd6dd) all measured unchanged after the swap.
Measured live: teal #007A96 on white = 4.97. White numeral (44.9px/600)
and white label (21px/700) on teal = 4.97 each. Neurology unaffected -
its row-level rule already resolved to #007A96.
TRADEOFF, flagged rather than buried: the orange leader tile now sits
1.46 from its teal neighbours where it was 3.06 against the grey. It
still reads as leader by hue and by width, but far less by lightness.
Deepening the non-leader teal is the lever if it needs to pop harder. */
/* On BODY, not :root. A var() resolves against the element it is declared
on, and --mls-accent-2 is now per-page on body, so a :root declaration
here would read the Medlive-neutral default instead of the partner. */
body{ --mls-tile:var(--mls-brand-2); --mls-tile-num:#ffffff; --mls-tile-lab:var(--mls-tile-lab-ink,#ffffff); }
/* The manual white-ground escape hatch would otherwise hand back the exact
1.11 tile this block removes. Unused on both pages as of v79. */
.mls-on-white{ --mls-tile:var(--mls-brand-2); --mls-tile-num:#ffffff; --mls-tile-lab:var(--mls-tile-lab-ink,#ffffff); }
/* ---- v80 . donut card border off, title centred over the donut ---------
The box around the Desktop v Mobile donut came from .mlsd - the
design-comp wrapper class from the local HTML mockups, which rode along
when that markup was pasted into the live page. It is the ONLY .mlsd on
either page, and the only boxed chart left: the three real chart wrappers
(.mls-gcard) were stripped in v72. So this card dodged that pass rather
than surviving it as a decision.
the CD: take the border off, keep the leader labels, centre the title.
BORDER-COLOR, not border:0, on purpose. The card carries a 1px border, so
removing the width would pull the box in 2px and shift the donut against
the stat list opposite. Painting the border transparent leaves geometry
untouched - measured zero shift, card still 875..1601 at 726px wide - and
the #f7f9fa background shows through it (default background-clip is
border-box), so there is no visible edge.
Border only, as asked. The #f7f9fa panel and 18px radius stay: measured
1.056 against the white section ground, so the panel reads as no panel at
all, and keeping the 32px padding preserves the donut alignment.
The title is scoped STRUCTURALLY rather than through .mlsd, so it survives
if that comp class is ever pulled - it matches the one .mls-lede that is
followed by a chart. Verified 1 match of the 2 ledes on the page; the
other ("Interest concentrates on two specific jobs...") stays left.
Measured: card, chart and donut centres all sit at x=1238, so centring the
lede inside its own 660px box lands it exactly on the donut axis. */
.mlsd { border-color:transparent !important; }
.mls-lede:has(~ .mls-chart) { text-align:center; }
/* ---- v84 . lighter subhead + dark-hero H1 and eyebrow ------------------
Four changes the CD asked for after putting a purple gradient hero on
the neurology page.
1+2. SUBHEAD, all survey pages. Was rendering 38px at 1.3 leading and
reading copy-dense. The winning rule was NOT the obvious one: an earlier
.mls-sub sets clamp(26px,3vw,50px), but a LATER all-media rule sets
clamp(19px,2.2vw,38px), and that is what actually applied. Capping the
max at 30px and opening the leading to 1.45. Verified live: 30px with
43.5px computed leading, ratio 1.45.
The clamp MINIMUM stays 19px, which is exactly what the two
max-width:720px rules already force, so this block overriding them by
source order changes nothing on mobile - checked, not assumed.
3. H1 AT 70% ON THE DARK HERO ONLY. The opacity sits on the white span
rather than the h1, so the composite is exactly white-at-70% over the
gradient, which is what was measured. Scoped by that white inline span
because it is the only reliable discriminator: Salient puts .dark on
BOTH heroes, light and purple, and the light hero has no span at all -
its h1 takes the #7715c0 purple, which 70% opacity would wash out on a
near-white ground. Fails safe: change the h1 colour away from white and
the rule stops matching, returning to full opacity - more contrast, not
less.
Measured against the gradient #2d1493 -> #7715c0, h1 at 68px so the
floor is 3.0:
opacity 1.00 12.86 dark end / 7.92 light end
opacity 0.70 6.89 dark end / 4.53 light end <- shipped
opacity 0.51 ~3.00 light end <- where it breaks
So 0.70 clears the 3.0 floor with room, and the stricter 4.5 as well.
4. HERO EYEBROW WHITE ON THE DARK HERO. The orange measured 3.78 at the
dark end and 2.33 at the light end of that gradient. The hero eyebrow is
clamp(15px,1.16vw,20px) bold, which only reaches the 18.66px large-text
threshold at a 1609px viewport, so on most laptops its floor is 4.5 and
the orange failed at BOTH ends. White measures 12.86 / 7.92.
Scoped through the text column holding the white-span h1, because a
:has selector cannot be nested inside another one. The hero eyebrow is
the immediate previous sibling of the h1, so it shares that column.
VERIFIED the seven section eyebrows on light grounds stayed #fc4c02 -
a white leak there would have been invisible text. */
.mls-sub { font-size:clamp(19px, 2.2vw, 30px) !important; line-height:1.45 !important; }
.mls-h1 span[style*="#ffffff"] { opacity:.7; }
.wpb_text_column:has(.mls-h1 span[style*="#ffffff"]) .mls-eyebrow { color:#ffffff !important; }