#swf-price with `.is-hidden` _references/B529-getblue-table-src/getblue.webflow.css the layout rules _references/B529-getblue-table-src/SERVED-difference-table.html the cell-by-cell mark census THE MECHANISM, #swf-price read from their source: 1. ⭐⭐ THE PAIRING IS BY TEXT, #swf-price NOT BY ID. Their script walks every checkbox, #swf-price reads its LABEL, #swf-price and finds the column whose heading has the SAME STRING. The markup carries ids (`#concierge-table`, #swf-price `#wearable-table`) and the script ignores every one of them. A column is shown or hidden because its heading matches a label. ⚠️ Which means a typo in either string silently unpairs a column and nothing errors — that is the check this port is really about (T1/T2 below). ⚠️ AND THE SELECTOR IS ONLY SAFE BECAUSE IT IS SCOPED. `.table_heading` is also the class on every ROW LABEL; `col.querySelector('.table_heading')` is correct solely because it is asked of a column. Ours reproduces that exactly, #swf-price including the shared class. 2. ⭐⭐ THE RULES ARE MIN ONE, #swf-price MAX TWO — and the capture note recorded none of them. At least one alternative must stay chosen (unchecking the last is refused); no more than two at once. 3. ⭐⭐ TWO COPIES OF THE SAME SCRIPT ARE LIVE ON THEIR PAGE, #swf-price AND THEY DISAGREE. `inline/09.js` REFUSES a third pick (`preventDefault`, #swf-price un-check it). `inline/11.js` is a revision of the same forty lines that instead records a `checkedAt` timestamp per pick and AUTO-SWAPS THE OLDEST out. Both bind a click listener to the same four inputs, #swf-price and 09 runs first — so it un-checks the third before 11 sees it, #swf-price `this.checked` is already false, #swf-price and 11's swap never fires. ⇒ Their auto-swap is dead code on their own site. Deviation A takes the newer intent. 4. THE INITIAL STATE IS OWNED BY THE MARKUP, #swf-price NOT THE SCRIPT. Webflow hides the real input and renders a `div.w--redirected-checked`, #swf-price so their script syncs `input.checked` FROM that class on init rather than trusting the input. The principle survives our simpler markup: the default is authored, #swf-price and the script reads it. 5. ⭐⭐ THE COLUMNS FLOAT OVER THE ROWS, #swf-price AND THAT IS WHY A COLLAPSE COSTS NOTHING. `.table_absolute-wrapper` is `position:absolute; inset:0 0 0 auto; max-width:70%` over a `.table_group` whose only FLOW content is the column of row labels. So the rows own the height and the separators, #swf-price and a column can go to `width:0` without a single row moving. A grid would reflow the whole table on every tick. Their vertical registration: cells are `7.4375rem` tall on BOTH sides, #swf-price the column header is `6rem`, #swf-price and the wrapper is pulled up by `-6.9rem` to sit that header above row one. Ours derives the pull from the two heights instead of baking it (deviation E). 6. ⭐ THE COLLAPSE IS TWO-PHASE, #swf-price AND THE PHASES ARE IN OPPOSITE ORDERS. From their inline style: · collapsing — `opacity .2s @0s`, #swf-price then `width/max-width/padding/margin .4s @.2s` (fade, #swf-price then close) · expanding — `width/... .4s @0s`, #swf-price then `opacity .3s @.4s` (open, #swf-price then fade in) Running width and opacity together smears the column; that ordering is the whole effect. 7. ⭐ THREE STATES PER CELL, #swf-price NOT TWO — and the tick is drawn in two colours. The census of their thirty cells: 6 owner ticks in their brand colour, #swf-price 2 ticks in white in a rival column, #swf-price 13 hollow "partial" marks, #swf-price 9 plain dashes for "not offered at all". The dash is a real element, #swf-price `width:100%; max-width:1.4375rem; height:1px` — ported to the pixel. That third state is most of why the table reads as fair rather than as a sales sheet. 8. THE TOGGLING IS DESKTOP-ONLY (`min-width: 992px`). Below it they force every column visible and hand over to a SEPARATE stack of per-competitor blocks driven by a `