/* ==========================================================================
   SECTION — The Broad Risk difference
   --------------------------------------------------------------------------
   Depends on tokens.css + base.css.

   Every number below was read off the signed-off reference with Playwright at
   320 / 360 / 375 / 390 / 414 / 428 / 480 / 540 / 576 / 640 / 700 / 768 /
   800 / 827 / 900 / 1024 / 1100 / 1200 / 1280 / 1360 / 1425 / 1435 / 1440 /
   1600 / 1920, and then re-expressed in the shared token scale. Where a
   comment says "measured", the value lands on the reference number at 1440
   to within ~0.05px.

   Reference anatomy @1440 (section is 1440 x 921.52, gold #f1c305):
     padding-block          56.3076   = --br-section-y  (2u)
     container content      1240      = --br-container at the 100px gutter
     head measure           816.28    ≈ 66.667% - u/3
     h2 -> lead gap         18.7693   = --br-flow-xs
     lead -> CTA gap        32.8462   = --br-flow-xs + --br-flow-2xs
     head -> cards gap      37.5385   = --br-card-py   (4u/3)
     card grid              3 x 394.56, gap 28.1539 = --br-flow-sm (1u)
     card                   white, radius 28.1539 (1u), pad 37.5385 / 28.1539
     card measure           288       = 20vw above 1200, uncapped below
     illustration           288 x 124.469, radius 1u, object-fit cover
     card height            558.797   (grid row, set by the tallest card)

   A note on 1/64px, because three separate rules below are shaped by it and
   they look like fussiness otherwise. Chromium holds every length as a
   multiple of 1/64px and truncates as it resolves each one, so WHERE you put
   an addition changes the answer: two properties truncate twice, one calc()
   truncates once, and the results differ by a unit. That unit is invisible on
   its own and not invisible when it crosses a device-pixel boundary — it
   painted the head CTA a full pixel low at 1024, and it re-rasterised one
   card's illustration at 390. So the spacing here is composed the way the
   reference composes it, not merely summed to the same total. Marked at
   .br-difference__actions, .br-difference__figure img, and the card's
   padding-bottom.
   ========================================================================== */

/* ==========================================================================
   1. BAND + HEAD
   ========================================================================== */

/* .br-section already supplies padding-block: var(--br-section-y) = 56.3076
   @1440 and 48.2307 @390 — both exactly the reference. .br-surface-gold +
   .br-on-gold supply the fill and re-point the semantic colour tokens, so
   headings land on #0e0f0c and body copy on #3a341c with no local colours. */

/* The head is narrower than the container by exactly 1px at EVERY width —
   rounding the reference's 12-column grid loses, and it always falls on the
   right-hand side. A single pixel is invisible on its own, but the copy in
   here is centred, so it moves every glyph half a pixel and decides which
   device pixel each stem lands on. Carrying it is what makes the two renders
   agree at the pixel level rather than merely look the same. */
.br-difference__head {
  text-align: center;
  --br-difference-measure: calc(100% - 1px);
  max-width: var(--br-difference-measure);
  margin-bottom: var(--br-card-py);
}

@media (min-width: 768px) {
  .br-difference__head {
    /* Measured 816.281 of a 1240 container. The reference gets there through a
       12-column grid (8 columns plus a 2-column offset); this is the same
       arithmetic with the grid removed — 8/12 of the track set, less the third
       of a gutter the columns give back, less that same lost pixel. Lands on
       816.281 @1440 and 656.59 @1200, and the lead paragraph breaks after
       "from an" exactly where the reference breaks it. */
    --br-difference-measure: calc(66.6667% - var(--br-flow-3xs) - 1px);
    margin-left: calc((100% - var(--br-difference-measure)) / 2 - 0.51px);
    margin-right: 0;
  }
}

/* h2 inherits the section scale from base.css: 45.4572 / 57 / 600 / -0.03em,
   and base.css's `text-wrap: balance`, which is what the reference uses too.
   One line at 1440; on mobile balance splits it "The Broad / Risk difference"
   rather than the ragged "The Broad Risk / difference". Nothing to restate. */

.br-difference__summary {
  margin-top: var(--br-flow-xs);        /* measured 18.7693 */
}

/* The gap from the lead to the CTA is the head's row gap PLUS the CTA's own
   top margin — 18.7693 + 14.0769 = 32.8462 at 1440. Our token scale already
   reproduces both of the reference's raw numbers exactly, at every width.

   It is still written as two properties rather than one calc(), and that is
   not stylistic. Chromium stores lengths as 1/64px LayoutUnits and truncates
   each one as it resolves it. The reference gets this gap from two separate
   declarations — a row gap on its grid and a margin on the button's wrapper —
   so it truncates TWICE: floor(18.7693) + floor(14.0769) = 1201 + 900 = 2101
   units. Summing them in one calc() truncates ONCE: floor(32.8462) = 2102.
   One unit, 0.0156px, and it is not academic — it put the whole head-to-cards
   stack a unit low at 8 of the 10 widths measured, and at 1024 that unit
   straddled a device-pixel boundary and painted the entire CTA pill a full
   CSS pixel below the reference's (ink rows 432-523 against 430-521).

   Two properties, two truncations, same arithmetic as the reference. Verified
   0.0000 at 390 / 576 / 768 / 800 / 1024 / 1200 / 1280 / 1440 / 1600 / 1920.
   Padding rather than a second margin so nothing can collapse into anything;
   the wrapper is transparent and only exists to carry this offset. */
.br-difference__actions {
  margin-top: var(--br-flow-xs);        /* measured 18.7693 @1440 */
  padding-top: var(--br-flow-2xs);      /* measured 14.0769 @1440 */
}

/* The reference draws this pill with a GOLD 1px border on the gold band — it
   reads as nothing, but it insets the ink fill by 1px inside the 200x48 box.
   Matching it keeps our button the exact size of theirs.

   The three states are three separate decisions, so they are written out
   rather than pinned together:

   · rest    gold on gold — the border is structural, not visible.
   · hover   the reference darkens the border to #d6ac00 as the fill goes to
             #2b2305, which draws a real hairline ring around the pill. We
             reproduce it: the ring is what makes the pill feel like it lifts
             off the band rather than just going darker.
   · active  the reference paints this border BRIGHT GREEN (rgb(101,207,33)).
             That is a leaked token from its design system, not a decision —
             nothing else on the page is green. We continue the gold ramp
             instead, which is what hover already implies. */
.br-difference .br-difference__cta { --_btn-border: var(--br-gold); }
.br-difference .br-difference__cta:hover { --_btn-border: var(--br-gold-hover); }
.br-difference .br-difference__cta:active { --_btn-border: var(--br-gold-active); }

/* Measured widths: full-bleed below 576, shrink-to-fit 576-1023, then the
   200px minimum from 1024 up. */
.br-difference__cta { width: 100%; }

@media (min-width: 576px) {
  .br-difference__cta { width: auto; min-width: 0; }
}

@media (min-width: 1024px) {
  .br-difference__cta { min-width: var(--br-btn-min-w); }
}

/* ==========================================================================
   2. CARD GRID
   Measured: 1 column, 2 from 576, 3 from 1200. Gap is 1u at every width.
   ========================================================================== */

.br-difference__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-flow-sm);               /* measured 28.1539 @1440 */
}

@media (min-width: 576px) {
  .br-difference__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .br-difference__list { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   3. CARD
   .br-card already supplies the white fill, the 1u radius and the measured
   37.5385 / 28.1539 padding. Everything below is what this section adds.
   ========================================================================== */

.br-difference__card {
  align-items: center;
  /* Grid items default to min-width:auto, which would let the evidence row
     (§5) widen the track and blow the row out. */
  min-width: 0;

  /* The card is the measuring stick for §5. The proof row lives inside the
     288px copy measure but is allowed to reach the card's own edge, and the
     distance between those two is only knowable from the card. Nothing else
     in here queries it — this exists so the proof row can size itself
     against real geometry instead of a list of viewport widths. Safe on a
     `1fr` grid item, whose width comes from the track, never its contents. */
  container-type: inline-size;
  container-name: br-difference-card;

  /* The copy measure inside the card. Uncapped by default — below 1200 the
     card is already narrower than the cap would be. Overridden at 1200 where
     the 3-up grid arrives. Declared here, not on the elements that read it,
     so both readers (§3 body, §5 proof row) see the same number. */
  --br-difference-card-measure: 100%;
  /* The reference's CTA overflows its own layout box by ~7.7px — a baseline
     artefact of how the source nests an inline-block in a block. The RESULT,
     which is what a viewer sees, is 29.82px of white below the button rather
     than the 37.54px above the illustration. We reproduce the result.

     7.71 rather than 7.7 because the card is a GRID ITEM, and its height is
     not private: the tallest card sets the row, and below 1200 the second row
     starts wherever the first one ends. At 7.7 the card came out 1/64px
     taller than the reference's, which is invisible in the card and not
     invisible underneath it — at 1024 that unit pushed the whole second row
     over a device-pixel boundary and painted card 3's proof row a full pixel
     low. 7.71 lands the card on the reference's exact height at 390, 1024 and
     1440, changes no ink inside the card, and leaves the deliberate wrap
     bands (576-1199, 1200-1434) as they were. */
  padding-bottom: calc(var(--br-card-py) - 7.71px);
}

/* The reference caps card content at 288px @1440 — measured as a straight
   20vw from 1200 (240 @1200, 256 @1280, 288 @1440) and uncapped below that,
   where the card is already narrower than the cap. */
.br-difference__body {
  width: 100%;
  /* Fills the card so the CTA below can be pinned to the floor. */
  flex: 1 1 auto;
}

@media (min-width: 1200px) {
  /* One declaration of the cap, read by §5 as well — the proof row's room is
     defined relative to it, and the two must never drift apart. */
  .br-difference__card { --br-difference-card-measure: 20vw; }
  .br-difference__body { max-width: var(--br-difference-card-measure); margin-inline: auto; }
}

/* ==========================================================================
   4. ILLUSTRATION
   Measured 288 x 124.469 @1440. The reference reserves a full 16:9 box and
   then carves the gap to the heading OUT of it — the artwork is the box less
   one card-padding step, and the leftover IS the gap. So the crop and the
   gap come from the same number, and the block below always starts at 56.25%
   of the card's width whatever the artwork does.

   Written the same way here, in that order, for the LayoutUnit reason given
   at .br-difference__actions: 56.25% resolves and truncates first, then the
   height subtracts the padding step from that already-truncated number.
   Folding it into one `calc(56.25% - var(--br-card-py))` on the wrapper
   truncates once and comes out 1/64px short — which sounds like nothing and
   is not: the artwork is SVG scaled to cover, so a 1/64 change of the box
   re-rasterises every edge in it. It cost ~5000 device pixels of difference
   on card 2 at 390 while cards 1 and 3 stayed identical, which is exactly
   the kind of "one card looks slightly soft" a designer notices and cannot
   name. The heading below it was riding 1/64 high for the same reason.
   ========================================================================== */

.br-difference__figure {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;               /* the 16:9 box, measured */
}

.br-difference__figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;                    /* crops the 16:9 artwork top + bottom */
  border-radius: var(--br-radius-lg);   /* measured 28.1539 = 1u */

  /* measured 124.469 @1440 — the box less the padding step below it.
     Plain subtraction first, for any engine without round(). */
  height: calc(100% - var(--br-card-py));

  /* The reference carves this gap with a margin on an absolutely-positioned
     box, and a margin is truncated DOWN to the 1/64px grid before the height
     is solved. A calc() subtracts the raw value and truncates the result,
     which effectively rounds the step UP — one unit short, at every width
     where the padding step is not already a whole unit.

     One unit of a 142px box sounds beneath notice. It is not, because the
     artwork is an SVG scaled to cover: change the box by 1/64 and every edge
     in the drawing re-rasterises. On the review render it showed up as ~5000
     device pixels of difference on card 2 at 390 while cards 1 and 3 stayed
     clean — one illustration very slightly softer than its neighbours, with
     nothing in the layout to explain it.

     round(down, …) states the reference's truncation literally instead of
     approximating it with a magic epsilon. Exact at 390, 414, 1024, 1200,
     1280, 1440, 1600 and 1920. */
  height: calc(100% - round(down, var(--br-card-py), 0.015625px));
}

/* ==========================================================================
   5. CARD TYPE
   h3 and p both inherit the measured ramp from base.css:
     h3  24.6285 / 32 / 600 / -0.015em / --br-text-heading (#0e0f0c)
     p   18      / 26 / 400 / +0.01em  / --br-text (#3a341c on the gold band)
   ========================================================================== */

/* `initial` un-does base.css's `text-wrap: balance` for headings, because the
   reference wraps these naturally and we match it. Same for the paragraph.
   The orphan/widow handling is one rule below, not two here. */
.br-difference__card-title {
  text-align: center;
  text-wrap: initial;
}

.br-difference__card-text {
  margin-top: var(--br-flow-xs);        /* measured 18.7693 */
  text-align: center;
  text-wrap: initial;
}

/* -- orphans and widows, below the 3-up breakpoint only ---------------------
   `pretty` leaves greedy line-breaking alone and only revisits the LAST line,
   to stop one word being stranded on it. It fixes the two blemishes in this
   section without moving anything else:

     title, card 1     360 [266,39] -> [220,85]   390 [274,41] -> [227,88]
     paragraph, card 1 414 [325,307,48] -> [271,317,88]
                       1024 [341,322,51] -> [284,332,92]

   NOT `balance`, which fixes the same orphan and then re-breaks card 1 at
   1440 from [287,111] to [230,168] — a visible change at the width the design
   was signed off on. A phone-only gain is not worth a comp-width loss.

   The 1199 ceiling is the same trade, one width up. Measured with the rule on
   and off at 320/360/375/390/414/430/480/540/576/640/700/768/800/827/900/
   1024/1100/1200/1280/1360/1440/1600/1920, `pretty` moves a break at 15 of
   them, and three are ABOVE the 3-up breakpoint: it would re-break card 3's
   paragraph at 1440 and card 1's title at 1920, where we currently match the
   reference exactly. Capping it at 1199 keeps every width from 1200 up
   byte-identical to the comp, and confines the improvement to the band where
   our card geometry has already, deliberately, parted from it (see the proof
   row below).

   Card heights do not move at ANY width, on or off — this only ever changes
   where a line breaks, never how tall the card is, so the row stays level and
   the section keeps its measured height everywhere. Verified, not assumed.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .br-difference__card-title,
  .br-difference__card-text { text-wrap: pretty; }
}

/* -- proof point ------------------------------------------------------------
   A short claim under the copy: a filled check badge plus an underlined
   label. It is a statement, not a control, so it is marked up as text — the
   card's own CTA below is the only interactive thing in here.

   Geometry measured @1440: 35.3846 tall = a 24px icon plus 5.6923 of padding
   top and bottom; icon-to-label gap 9.3846 (u/3); label 16/24/600/-0.011em
   underlined at a 4.8px offset.
   -------------------------------------------------------------------------- */

.br-difference__evidence {
  margin-top: var(--br-flow-2xs);       /* measured 14.0769 */
  text-align: center;
}

/* The row wants to be one line and is allowed to break out of the 288px copy
   measure to get there. The reference does exactly that: at 1440 the row
   starts on the measure's left edge and runs 23.7px past its right edge, so
   it is NOT centred under the paragraph, and reproducing that lopsided run
   is part of matching the comp. Re-measured badge against badge, all three
   cards, on the current build: 0.00 / 0.00px at 390, 414, 1024, 1100, 1200,
   1280, 1360, 1425, 1435, 1440 and 1600. Not quite zero at 480 / 540 / 900
   (within 0.06px) or 1920 (0.02px) — sub-pixel, and both cases are named
   below rather than rounded away in this sentence. It is genuinely off
   between 576 and 827, and that is not this rule: the reference's
   un-wrappable row forces its CARD ~29px wider than its own grid track
   there, so the whole card sits somewhere else. Ours keeps the track.

   What it is NOT allowed to do is leave the CARD. The reference does. With
   today's copy it sits fully outside the card, on the gold band, from 1200
   to 1327 (33.2px out at 1200), and eats into the card's padding from 1328
   to 1435.
   Swap the label for any longer string and it goes further: the critic's
   test line escapes 71.7px at 390 — far enough that the whole document
   scrolls sideways on a phone. That failure is silent and it arrives with a
   routine copy edit, so the room is measured rather than asserted:

     width: max-content   take one line if one line is available
     max-width: <room>    where <room> is the real distance from this box's
                          left edge to the card's inner edge

   Under the 288 cap the box starts at the measure's left edge, so the room is
   the measure PLUS the gutter the card leaves on one side —
   (card + measure) / 2 — which is 313.13 at 1440 against a row that needs
   311.7. It fits, on one line, in the same place as the reference. At 1425
   the same sum says 309.2 against 311.66, so it wraps instead of spilling.
   Nobody has to know that; the numbers say it.

   100cqi is the card's inner width, from the container declared in §3. Below
   1200 there is no cap, the measure IS the card, and the room collapses to
   100%. Any future string that cannot fit simply wraps inside the card.

   The cost, band by band. Re-measured against the reference at every width
   listed, because an earlier version of this comment asserted 768 was
   unaffected and it is not — 768 is iPad portrait, and it is the width most
   likely to be checked after the comp width itself:

     -375      the reference's card is 355.58 wide inside its own 328
               container at 360 — it forces the card wider than the page and
               the overflow is CLIPPED at the viewport edge, so the comp
               loses the right-hand side of its own cards. Ours keeps the
               card in the container and wraps the label. Section 1920.45
               vs 1919.
     390-575   identical. Card 357.88, heights 508.73 / 480.73 / 480.73,
               section 1899.17 both, label on one line both ways.
     576-1199  our label wraps to two lines; the reference keeps it on one by
               forcing its CARD wider than its own grid track. At 768 that
               gives it a 360.25 column beside a 302.19 one in the same row.
               We keep the columns equal and take the wrap: section 1395.94
               vs 1380.58 at 768 (+15.36) and 1392.06 vs 1383.25 at 800.
               A real, visible difference at iPad portrait, taken on purpose
               — the alternative is shipping the comp's unequal columns.
               1024 is inside this band but lands identically anyway (418.72
               columns, section 1449.03 both, label one line both).
     1200-1434 the row fits on one line only by leaving the card: at 1200 the
               reference's card-1 row ends 32.2px past its card's right edge,
               out on the gold band. We wrap instead — section 906.8 vs
               882.8 (+24).
     1435-1919 identical. 1440 section 921.52 both, cards 394.56 / 394.58 /
               394.56, CTAs level at the same y, badge on the reference's
               badge to 0.00px.
     1920+     everything in the section sits 1/64px low, and this one is not
               ours to fix. The reference's own section padding evaluates to
               59.9999px there — its clamp saturates at exactly 60 and lands a
               float hair under — which truncates to 59.9844. Our token
               reaches a clean 60. The 1/64 crosses a device-pixel boundary
               and paints the head CTA a pixel low. Reproducing it would mean
               writing another engine's floating-point error into a token
               shared by every section on the page, to correct 1px at a width
               above the one the design was signed off at. Documented and
               left alone; revisit only if the founder judges 1920 a
               comparison width.

   Line BREAKS additionally differ from the comp below 1200 by deliberate
   choice — see the orphan/widow rule above. Those move no geometry. */
.br-difference__evidence-inner {
  display: inline-flex;
  /* Beside the FIRST line of the label, never floating between two of them.
     On one line the two are the same thing — the label's line box is 24 tall
     and so is the badge, so flex-start and center produce byte-identical
     renders at 390 and 1440. They stop being the same thing the moment the
     label wraps: `center` measures the badge against the whole two-line
     block and parks it in the gutter between the lines, which is the ugliest
     frame in the section (at 768 it sat 12px lower on the wrapping cards
     than on the single-line one). Aligning to the first line is what a
     bulleted list does, and it is right at every width. */
  align-items: flex-start;
  /* Without this the badge sits on the paragraph's baseline and the strut
     leaves ~1.3px of dead space under the row, pushing the card's CTA down
     by the same amount. Top-aligning collapses the line box onto the badge. */
  vertical-align: top;
  gap: calc(var(--br-u) / 3);           /* measured 9.3846 */
  padding: calc(var(--br-u) / 6 + 1px) calc(var(--br-u) / 3 + 1px);
  text-align: start;

  width: max-content;
  max-width: calc((100cqi + var(--br-difference-card-measure)) / 2);
}

/* Container queries have been everywhere since 2023, but where they are not,
   cqi is an invalid length and the whole max-width drops — which would leave
   the row free to run off the card. Fall back to the measure itself: one
   line wherever it fits, a wrap at 1440 instead of the reference's single
   line, and never an overflow. */
@supports not (container-type: inline-size) {
  .br-difference__evidence-inner { max-width: 100%; }
}

.br-difference__evidence-icon {
  width: var(--br-icon);                /* 24 */
  height: var(--br-icon);
  color: var(--br-ink-olive);           /* measured #4a3c0a */
}

/* The rim is a circle drawn as four cubic segments (the standard 0.5523
   handle) rather than <circle r="10">. A true circle is the better primitive
   and it is what shipped first, but Chromium rasterises the two differently
   at the four 45deg points, and against the reference that difference was
   the single largest thing left in the section. The bezier removes it. With
   both fixes in, the worst single channel anywhere in the 1440x922 band is
   34/255 out on 3 pixels — everything else is under 30, i.e. anti-aliasing.
   Worth one line of comment to buy a clean render. */
.br-difference__evidence-rim { fill: currentColor; }

/* The tick is our own drawing, but the numbers behind it are measured, not
   eyeballed. The reference ships this glyph as a FILLED outline, so the
   centreline had to be recovered from the outline's own coordinates:
     · the two end chords are 2.0 long and sit perpendicular to their arm,
       which IS the stroke width, and their midpoints are (7,12) and (17,9)
     · both arms run at exactly 45deg, so the elbow is (10.5, 15.5)
     · the elbow is a 1.0-radius arc — half the stroke — i.e. a ROUND join,
       not the mitre a naive redraw gives you
   Butt caps, because the chords are flat. Drawn any other way the check
   reads fractionally small and hard-cornered at the vertex; drawn this way
   it is the same glyph. (Sweeping the elbow from 15.50 to 15.58 shaves
   another ~20 anti-aliased device pixels off the diff. Not taken — 15.5 is
   the number the outline gives you, the rest is curve-fitting to a
   rasteriser.) */
.br-difference__evidence-tick {
  fill: none;
  stroke: var(--br-white);
  stroke-width: 2px;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* The badge is the only two-tone graphic in the section: a filled disc with a
   knocked-out tick. In forced colours both fill and stroke get remapped, and
   if they land on the same system colour the tick vanishes and the badge
   reads as a plain dot — the one thing it is there to say is gone. Pinning
   the pair to opposite ends of the system palette keeps the knock-out. */
@media (forced-colors: active) {
  .br-difference__evidence-rim { fill: CanvasText; }
  .br-difference__evidence-tick { stroke: Canvas; }
}

.br-difference__evidence-label {
  font-size: var(--br-ui-size);         /* measured 16 / 24 / 600 / -0.011em */
  line-height: var(--br-ui-lh);
  font-weight: var(--br-ui-weight);
  letter-spacing: var(--br-ui-ls);
  color: var(--br-text-strong);
  text-decoration: underline;
  text-underline-offset: 4.8px;         /* measured */
  /* Last line of defence. The max-width above keeps a normal string inside
     the card by wrapping it; a single unbreakable token — a URL, a long
     hyphen-free compound — has nowhere to wrap and would push straight
     through. Breaking mid-word is ugly and it is still the right answer,
     because the alternative is a page that scrolls sideways on a phone. */
  overflow-wrap: anywhere;
}

/* ==========================================================================
   6. CARD CTA
   Pinned to the card floor so all three line up across the row however long
   the copy above runs. The +7.7px matches the same baseline artefact
   compensated for in §3, so the clear air above the button reads as the
   measured 45.24 rather than 37.54.
   ========================================================================== */

.br-difference__foot {
  width: 100%;
  margin-top: auto;
  padding-top: calc(var(--br-card-py) + 7.7px);
  text-align: center;
}

/* Measured: full-width up to 1023, shrink-to-fit from 1024. */
.br-difference__card-cta { width: 100%; }

@media (min-width: 1024px) {
  .br-difference__card-cta { width: auto; }
}