/* ========================================================================== MEET — "Meet cover without the runaround" -------------------------------------------------------------------------- Depends on tokens.css + base.css. Every number below was read off the signed-off render with Playwright at 280 / 300 / 310 / 315 / 320 / 330 / 360 / 375 / 390 / 400 / 414 / 415 / 420 / 425 / 430 / 431 / 435 / 440 / 450 / 460 / 470 / 479 / 480 / 481 / 540 / 575 / 576 / 600 / 700 / 767 / 768 / 800 / 900 / 991 / 992 / 1024 / 1100 / 1199 / 1200 / 1210 / 1215 / 1220 / 1225 / 1230 / 1280 / 1360 / 1440 / 1500 / 1600 / 1700 / 1800 / 1920 / 2200, then expressed in the shared tokens. Nothing here is eyeballed. The measured facts this file reproduces (1440px, the judged width): section padding-block 56.3076 = 2u (--br-section-y) container 1402.47 wide, 18.7693 each side = 2u/3 (--br-flow-xs) slab #1f1902, radius 37.5385 = 4u/3 (--br-radius-xl) slab padding 75.0769 all round = 8u/3 slab -> button 37.5385 = 4u/3 (--br-flow-md) heading -> lead 18.7693 = 2u/3 (--br-flow-xs) h2 105.428 / 89.6142 (0.85) / Archivo 800 / normal tracking / #f1c305 / centred / max 840 / balanced lead 20 / 28 / Inter 600 / +0.005em / #e8ebe6 / max 604 button gold pill, 180.219 x 48, 11/24 padding, NO min-width Three measured breakpoints, all the reference's own: 480 the container stops being edge-to-edge and takes its 2u/3 side margin 576 the slab's side padding grows from 2u/3 to match its 4u/3 top 768 the lead's 604px measure engages; section rhythm steps 4u/3 -> 2u 992 the heading's 840px measure engages 1200 the slab padding doubles to 8u/3 The type ramps themselves (display-1, the lead) live in tokens.css — this section corrected --br-display-xl-size, which it is the page's only consumer of. See the comment on that token. ========================================================================== */ .br-meet { /* ------------------------------------------------------------------------ Two values this section needs that the shared scale does not carry. Both are derived from the fluid unit like every other step, so they track the viewport identically — they are simply not common enough across the page to earn a global token. ------------------------------------------------------------------------ */ /* The slab's widest padding: 8u/3 = 72.62 @1200 -> 75.08 @1440 -> 80 @1920. Twice --br-flow-md, and the largest inset anywhere on the page. */ --br-meet-slab-pad-xl: calc(var(--br-flow-md) * 2); /* The type context the slab hands DOWN to its children. Section-local for the same reason as the padding above: it is not a step on the shared scale, it is one container's inherited default, and no other block on the page shares it. Measured flat — 14 / 21.7 / -0.084px at 320, 390, 576, 768, 992, 1200, 1440 and 1920 alike (_slab-widths.mjs), which is why it is not a fluid ramp. Deliberately NOT --br-body-sm-size: that token steps 14 -> 16px at the upper shelf, and the reference's slab does not step. Tracking is in em per the house convention, and -0.006em x 14px lands on -0.084px exactly. */ --br-meet-slab-inherit-size: 14px; --br-meet-slab-inherit-lh: 21.7px; --br-meet-slab-inherit-ls: -0.006em; /* This block's container caps at 1600, NOT at --br-container-outer (1640). It is the page's one off-grid container: it deliberately runs wider than the text grid so the slab reads as a full-width band. Measured: 1561.66 wide @1600, then pinned at 1600 and centred from 1700 up. */ --br-meet-container-max: 1600px; /* Rhythm is PADDING here, not margin, and deliberately so: the reference gives this section zero margin and pads from the inside, so it does not collapse against the margin-spaced sections either side of it. Swapping to margin would silently halve the gap on assembly. */ padding-block: var(--br-flow-sm); /* 1u below 576 */ } @media (min-width: 576px) { .br-meet { padding-block: var(--br-flow-md); } /* 4u/3 */ } @media (min-width: 768px) { .br-meet { padding-block: var(--br-section-y); } /* 2u */ } /* ========================================================================== CONTAINER Below 480 the slab is edge-to-edge: no side margin at all, so its corner radius hangs off both edges of the phone. That is measured, not an oversight — it is what makes the closing statement feel like a full stop on mobile. From 480 up it takes a 2u/3 side margin, and from 1700 up it stops growing and centres. ========================================================================== */ .br-meet__container { width: 100%; } @media (min-width: 480px) { .br-meet__container { /* Expressed as a MARGIN, not `width: min(…)`. Both give 1402.46 at 1440, but the browser snaps layout to 1/64px and it snaps the two forms in opposite directions: the width form lands on 1402.453, the margin form on 1402.469, which is what the reference resolves to. One 64th of a pixel is invisible on its own — but it shifts the whole centred column by the same amount, which re-phases the subpixel rasterisation of a 105px display face and shows up as a visible edge difference in a side-by-side. So: margins. No max-width is needed. Past 1700 the max() term takes over and the container parks at 1600, centred, on its own. */ width: auto; /* let the margins do the sizing, not width:100% */ margin-inline: max( var(--br-flow-xs), calc((100% - var(--br-meet-container-max)) / 2) ); } } /* ========================================================================== SLAB --br-bg resolves to ink inside .br-on-dark, so the fill, the gold heading, the #e8ebe6 lead and the gold focus ring all come from the surface set rather than being restated here. ========================================================================== */ .br-meet__slab { background: var(--br-bg); border-radius: var(--br-radius-xl); /* 4u/3 at every width */ padding: var(--br-flow-md) var(--br-flow-xs); /* INHERITED TYPE CONTEXT — restated deliberately, and it renders nothing today. All three children set their own type (the heading via .br-display-xl, the lead via --br-body-lg-*, the button via --br-ui-*), so this changes not one pixel: geometry stayed identical to the reference at all twelve tested widths with and without these lines. It is here because the slab was NOT identical before. It inherited the page body's 18px / 26px / +0.18px while the reference's slab hands its children 14px / 21.7px / -0.084px. The match was invisible only by luck — the moment anyone drops a bare line of text into the slab on assembly, ours would come out four pixels larger and tracked the wrong direction against the same addition on the reference. Fidelity and accessibility agree here rather than trade off: 14px Inter 400 in #e8ebe6 on #1f1902 measures 10.47:1, comfortably past AAA, and WCAG sets no minimum type size. Colour is not restated — it already matched, inherited from .br-on-dark. */ font-size: var(--br-meet-slab-inherit-size); line-height: var(--br-meet-slab-inherit-lh); letter-spacing: var(--br-meet-slab-inherit-ls); } @media (min-width: 576px) { .br-meet__slab { padding: var(--br-flow-md); } } @media (min-width: 1200px) { .br-meet__slab { padding: var(--br-meet-slab-pad-xl); } } /* ========================================================================== COLUMN ========================================================================== */ .br-meet__column { display: flex; flex-direction: column; align-items: center; gap: var(--br-flow-md); /* 4u/3 — copy to button */ } .br-meet__copy { display: flex; flex-direction: column; align-items: center; gap: var(--br-flow-xs); /* 2u/3 — heading to lead */ width: 100%; } /* ========================================================================== TYPE ========================================================================== */ .br-meet__heading { width: 100%; margin-inline: auto; text-align: center; /* base.css turns balancing OFF for display type because most display headings on this page are art-directed with an explicit max-width. This one is genuinely balanced in the reference, and it changes the result: at 768 and 1024 a greedy wrap gives "Meet cover without the / runaround", where the reference reads "Meet cover without / the runaround". */ text-wrap: balance; /* HYPHENATION — measured, and the pair travels together. The reference h2 computes `hyphens: auto` WITH `hyphenate-limit-chars: 14 6`: a word must reach 14 characters before it may hyphenate at all, with 6 before the break and 6 after (the third value defaults to the second). Both are reproduced. Taking `auto` alone is the documented trap in switching.css:124 — there it changed the rag at 260-262px. Note the limits are NOT switching's. That heading measures `14 8`, this one `14 6`; they were read off their own elements rather than copied across, which is the only reason this pair is right. Inert on the shipped copy, exactly as it is inert on the reference: the longest word in "Meet cover without the runaround" is "runaround" at 9 characters, well under the 14-character minimum, so nothing here is eligible to hyphenate. Verified 0 differing pixels and identical width/height/line-count at 320/360/390/414/480/576/768/992/1200/1440/ 1920. It is stated because this file documents every other shaping property, and silence here read as an oversight rather than a decision. The -webkit- pair is Safari hardening, not a second opinion: hyphenate-limit-chars is Chromium/Firefox-only, so without it Safari drops the limits and `auto` reverts to hyphenating short words. Safari cannot express the 14-character word minimum at all, so words of 14-15 characters would hyphenate in Chromium and not in Safari — the reference has that identical hole. Chromium ignores the prefixed pair, so this cannot move the render the side-by-side is judged on. */ hyphens: auto; hyphenate-limit-chars: 14 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; /* LAST-RESORT BREAK. base.css gives .br-display-xl `overflow-wrap: normal` so display type can bleed past its measure the way the reference's testimonials heading does. That licence is wrong for THIS heading: it is centred inside a slab rather than art-directed to hang, and at a 50.9px display face one unbreakable word had no last resort at all — it took the document to 1283px wide at a 390px viewport (1061 at 320, 1445 at 768), i.e. a horizontal scrollbar on the whole page. The reference survives the identical test at 390px, but not by shaping: its slab computes `overflow: hidden`, so the word is CLIPPED and the tail is lost. We break it instead and keep it readable — the same call base.css makes for h1-h6, and WCAG 1.4.4 at 200% zoom prefers it. `anywhere`, matching the seven siblings that carry this guard (switching.css:149, difference.css:374, claims.css:121, industries.css:215, speak.css:210, renewal.css:219, protection.css:119), so this is house pattern rather than invention. The min-content shrink `anywhere` brings costs nothing here: the heading is stretched to a column that sizes from the slab, so its min-content sizes nothing. Verified render-neutral on the shipped copy at all eleven widths above. */ overflow-wrap: anywhere; } @media (min-width: 992px) { .br-meet__heading { max-width: 840px; } } .br-meet__sub { width: 100%; margin-inline: auto; text-align: center; font-size: var(--br-body-lg-size); /* 20 @1440, 26/28 leading step */ line-height: var(--br-body-lg-lh); letter-spacing: var(--br-body-lg-ls); font-weight: var(--br-weight-semibold); /* measured: the lead is 600 here */ color: var(--br-text); /* #e8ebe6 via .br-on-dark */ /* base.css sets `pretty` on paragraphs; the reference leaves this one on the normal algorithm, and `pretty` moves the 390px break (it pulls a word down to avoid the short last line). Measured, so honoured. */ text-wrap: wrap; } @media (min-width: 768px) { .br-meet__sub { max-width: 604px; } } /* ========================================================================== CTA The one place on the page where the primary button drops its 200px minimum: measured at 180.219 wide, i.e. shrink-to-fit around the label. It is centred under a centred block, so a wider pill would read as padded rather than deliberate. ONE DELIBERATE DEVIATION, and it is the only one in this section. Below ~330px the reference shrinks every button on the page to 34px tall (4px/12px padding instead of 11px/24px). Not reproduced, for two reasons: · It is a GLOBAL button behaviour, not this section's — it would belong in base.css .br-btn, where it would silently change every CTA on the page. Not a call this section gets to make on its own. · 34px passes WCAG 2.5.8 (24px minimum) but misses the 44px AAA target size; we keep 48px because a closing CTA on the smallest phones is the worst place to shrink the tap target. Cost of not matching it: this section is 14px taller than the reference below 330px, and only below 330px (slab 345.06 vs 331.06 at 320px). Everything else — 360, 390, 414, 768, 1024, 1440, 1920 — is pixel-identical. If the assembly owner decides the reference's shrink must be reproduced, it goes in base.css and applies page-wide; do not special-case it here. ========================================================================== */ .br-meet__cta { min-width: 0; /* CONTAINMENT. base.css sets `white-space: nowrap` on .br-btn, which is right for a pill and is what the reference computes too. But a label longer than the slab's interior then has nowhere to go: measured, a 55-character label made the button 481.06px wide inside a 358px slab interior and pushed the document to 436px at a 390px viewport — a horizontal scrollbar on the whole page caused by one button. The reference's button overflows by the identical amount and its page stays at 390px only because its slab computes `overflow: hidden` and clips the tail off. This section has no such ancestor, so it is the block that breaks the page. Deliberately NOT the .br-btn--wrap modifier, which exists in base.css for this shape of problem. That modifier also sets `text-align: left` and `justify-content: flex-start`, which would pull this centred pill's label off-centre, and it contains by CLIPPING rather than breaking. base.css:627 rejects `overflow-wrap: anywhere` for good reason there — the review pills' longest word is a client's trading name, and breaking it mid-word regressed real copy at 768. That reasoning does not reach here: this label is fixed chrome ("About Broad Risk"), not client-supplied content, so there is no real-copy case to regress, and breaking beats clipping because the label stays readable. Inert on the shipped label, which is 180.22px against a slab interior that never falls below 242.5px even at a 280px viewport, so it has no opportunity to wrap. Verified 0 differing pixels at 320/360/390/414/480/ 576/768/992/1200/1440/1920. */ white-space: normal; overflow-wrap: anywhere; }