fix(bf): align the offer row — trial/booking column flush with the server grid, deal centred

The offer row was a centred pair (620 + 300), so the trial/booking column ended at
1104 px while the server grid's last cell (Sydney) ended at 1156 px — a 52 px gap
against the only edge on the page it should match.

The row is now two columns: the aside takes a fixed 300 px and sits on the
container's right content edge; the left column takes the rest, so the deal box is
centred in the space left of it rather than parked in its own 620 px lane. The row's
column gap is folded into that centring, and the deal is capped at the column width
minus one gap so the two boxes can never touch just above the 900 px stack.

CSS only: no markup, no ids, no forms, no JS. Buy form, hidden redirect, countdown,
Buy mark, #trialCard/#trialForm, the booking <a> and the consent gate are untouched.
Measured 1280 px: aside right 1156.4 == Sydney right 1156.4; deal gaps 63.9 / 64.0.

odoo-black-friday/index.html

@@ -288,9 +288,33 @@
          the right. The deal keeps its full width and weight and stays the ONE dominant action;
          the right column is deliberately narrower and quieter so the row never reads as three
          equal primaries. At 901px and up the row is two columns; below that it stacks, deal
-         first. Scoped to #offer so the Bootcamp box further down is untouched. */
+         first. Scoped to #offer so the Bootcamp box further down is untouched.
+
+         Alignment (2026-11-02): the aside column is flush with the container's right content
+         edge — the same edge the Sydney cell of the server grid above ends on. The left column
+         takes the whole rest of the row, so the deal box is centred in the space that remains
+         to the left of the aside rather than sitting in its own fixed 620px lane. The grid gap
+         is 0 on this row (the deal carries its own breathing room, see below) so the two edges
+         that must read as centred do: whitespace left of the deal == whitespace between the
+         deal and the aside. The row gap stays 1.5rem for the stacked (<=900px) layout. */
       #offer .container {
-        grid-template-columns: minmax(0, 620px) minmax(0, 300px);
+        grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
+        column-gap: 0;
+      }
+      /* The deal keeps its 620px working width: base .bf-box-inner is a full-width block, so
+         without this it would stretch to fill the flexible left column and lose the centred
+         measure. `margin-inline: auto` is what centres it in that column. */
+      #offer .bf-box-inner {
+        width: 100%;
+        max-width: 620px;
+        margin-inline: auto;
+      }
+      /* Two columns only: cap the deal at the column width minus one gap so the deal box and the
+         aside can never touch when the row is at its narrowest (just above the 900px stack). */
+      @media (min-width: 901px) {
+        #offer .bf-box-inner {
+          max-width: min(620px, calc(100% - 1.5rem));
+        }
       }
       .bf-aside {
         display: grid;