/* A1 Comparison Tool — method-major DOM, two layouts (see module.html). Colors are DESIGN_DIRECTION's ruled kit; the v12 navy this module used for headings and row labels is rejected at every layer by that ruling. */ .a1m-cmp{font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;color:#545456;padding:44px 0;background:#F8F7F7;border-top:1px solid #E3E2E1} .a1m-cmp *{box-sizing:border-box} .a1m-cmp .a1m-wrap{max-width:1296px;width:96%;margin:0 auto;padding:0} .a1m-cmp h2{color:#2D2E2D;line-height:1.14;font-weight:800;font-size:clamp(23px,3vw,31px);margin:0 0 14px;letter-spacing:-.005em} .a1m-cmp .a1-sub,.a1m-cmp .a1-sub p{font-size:17px;color:#545456;margin:0} .a1-cmpbox{border:1.5px solid #E3E2E1;border-radius:15px;background:#fff;padding:34px 22px 22px;margin:16px 0} /* ---- DESKTOP: ONE grid for the whole table -------------------------------- TWO OF JOSH'S NOTES ARE SOLVED BY THE SAME DECISION (2026-09-03): "the comparison table doesn't line up" "the whole controllevel section should outline all options, not each one individually. This is also true for the mobile version." Alignment first. Each column used to be its OWN grid, so each distributed its own height and a tall cell moved nothing in its neighbours — the row labels drifted off their rows. Now the PARENT is the only grid and the wrappers step out of the way with `display:contents`, so every cell is a direct grid item and a row is one shared track across all columns. Lined up by construction. NOT SUBGRID, deliberately, and this is a scar: the first fix used `grid-template-rows: subgrid` plus an `@supports not (...)` fallback, and HubSpot's CSS compiler silently DROPPED THE ENTIRE STYLESHEET — the module's source stored fine, `--verify-tree` reported parity, and the page simply served no `module_A1_Comparison_Tool.min.css` at all, so the table rendered unstyled. Nothing but looking at the served asset list caught it. Keep this file to widely-compiled CSS; do not reintroduce subgrid or @supports here. The column outline then cannot live on the wrapper (a `display:contents` element has no box), so it is drawn across the featured column's own CELLS: left and right on every cell, top on the first, bottom on the last. One continuous box around the whole column, all four sides — which is exactly what the retired "contiguous run" tried to do and got wrong by omitting the top and bottom. */ /* HOW THE TABLE IS BUILT, and the two wrong turns that got here. The DOM is METHOD-MAJOR (a label block, then one block per method) so mobile can group by method. Desktop rebuilds a table from it with ONE grid: `display:contents` drops the wrappers so every cell is a direct grid item, and `grid-auto-flow:column` fills column by column — label block down column 1, then each method down its own column. Rows are therefore shared tracks, so a row label and its cells line up by construction. THE ROW COUNT IS EMITTED INLINE by module.html as a literal integer, because the flow needs to know when to wrap to the next column and CSS cannot count the topics. TWO THINGS THAT DO NOT WORK HERE, both measured on the served page: * `repeat(var(--a1-cols), …)` — invalid CSS; repeat() takes an integer and a custom property is never substituted there. * `repeat(auto-fit, minmax(0,1fr))` — valid, but it makes as many columns as FIT, not as many as there are methods: it expanded to ~110 tracks and put all 15 items on one row of 72px cells. Do not reintroduce either. */ .a1-cmpgrid{display:grid;grid-auto-flow:column;grid-template-columns:minmax(104px,.62fr);grid-auto-columns:minmax(0,1fr);column-gap:10px;align-items:stretch} .a1-labcol,.a1-mcol{display:contents} .a1-cmph{padding:12px 14px;font-weight:800;text-align:center;font-size:21px;display:flex;align-items:flex-end;justify-content:center;letter-spacing:-.005em} .a1-cmph.a1-f{background:#B11A29;color:#fff;border-radius:15px 15px 0 0;position:relative} .a1-cmph.a1-o{background:#F8F7F7;color:#545456;border-radius:15px 15px 0 0;text-transform:uppercase;border:1px solid #E3E2E1;border-bottom:0} .a1-cmptab{position:absolute;top:-24px;left:0;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:10.5px;line-height:1;font-style:italic;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#961623;border-radius:6px 6px 0 0;padding:6px 10px} .a1-labh{border:0} .a1-rl{font-weight:800;color:#2D2E2D;font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding:14px 8px 14px 0;border-top:1px solid #E3E2E1;display:flex;align-items:center} .a1-cell{padding:14px;border-top:1px solid #E3E2E1;font-size:15.5px;color:#545456} /* THE FEATURED COLUMN AS ONE CONTINUOUS BOX. */ .a1-featured .a1-cell{background:#FBF2F0;color:#2D2E2D;border-left:2px solid #B11A29;border-right:2px solid #B11A29;border-top:1px solid rgba(177,26,41,.22)} .a1-featured .a1-cell.a1-first{border-top:2px solid #B11A29} .a1-featured .a1-cell.a1-last{border-bottom:2px solid #B11A29;border-radius:0 0 15px 15px} .a1-cell .a1-lead,.a1-cell p.a1-lead{display:block;font-weight:800;color:#2D2E2D;font-size:16.5px;line-height:1.35;margin:0} .a1-cell .a1-supp,.a1-cell p.a1-supp{display:block;font-size:14px;color:#545456;font-weight:400;margin:3px 0 0} .a1-cell .a1-inb{font-weight:800;color:#2D2E2D} .a1-mtag{display:none} .a1m-cmp .a1-tmk{text-transform:none} /* ---- MOBILE: one column, GROUPED BY METHOD (Josh 2026-09-03) -------------- The method-major DOM already reads in the ruled order, so mobile only has to stop being a table: drop the desktop label column, show each cell's own row topic, and let the method headers act as group headings. */ @media(max-width:840px){ .a1-cmpbox{padding:30px 14px 14px} /* Wrappers come BACK as blocks here, so each method group is one real card with its header inside it — Josh's "also true for the mobile version". */ .a1-cmpgrid{display:block} .a1-labcol{display:none} .a1-mcol{display:block;margin:0 0 18px;border:1px solid #E3E2E1;border-radius:15px;overflow:hidden} .a1-mcol:last-child{margin-bottom:0} .a1-mcol.a1-featured{border:2px solid #B11A29} .a1-cmph,.a1-cmph.a1-f,.a1-cmph.a1-o{display:block;text-align:left;font-size:19px;border-radius:0;border:0;padding:12px 16px;margin:0} .a1-cmptab{position:static;display:inline-block;margin:0 0 0 8px;border-radius:6px;vertical-align:middle} .a1-mtag{display:block;font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:#2D2E2D;margin-bottom:4px} /* The wrapper owns the card's shape here; nothing inside carries corners or side borders, or their radii would not coincide with the wrapper's and would leave slivers at the corners (Josh 2026-09-03). */ .a1-cell,.a1-featured .a1-cell, .a1-featured .a1-cell.a1-first, .a1-featured .a1-cell.a1-last{border:0;border-top:1px solid #E3E2E1;border-radius:0;margin:0;padding:13px 16px} .a1-featured .a1-cell,.a1-featured .a1-cell.a1-last{border-top:1px solid rgba(177,26,41,.22)} .a1-featured .a1-cell.a1-first{border-top:0} } /* ========================================================================== EDITOR CONTROL SURFACE (2026-09-19, lane D). Every rule REQUIRES a class the default render never emits, so on an untouched page this block matches nothing. Classes are namespaced to this module (a1-cmp-*) and are therefore shared with no other module. Grounds are light-only and inks dark-only, per CANON.md 3.7/3.10 — a dark ground a module already has stays as its 'As Designed' default and is not offered as a choice. ========================================================================== */ @media(min-width:1025px){.a1m-cmp.a1-cmp-pt-d-hard{padding-top:0}.a1m-cmp.a1-cmp-pt-d-short{padding-top:15px}.a1m-cmp.a1-cmp-pt-d-tall{padding-top:40px}.a1m-cmp.a1-cmp-pt-d-grande{padding-top:60px}.a1m-cmp.a1-cmp-pt-d-venti{padding-top:80px}.a1m-cmp.a1-cmp-pt-d-trenta{padding-top:100px}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-pt-t-hard{padding-top:0}.a1m-cmp.a1-cmp-pt-t-short{padding-top:15px}.a1m-cmp.a1-cmp-pt-t-tall{padding-top:40px}.a1m-cmp.a1-cmp-pt-t-grande{padding-top:60px}.a1m-cmp.a1-cmp-pt-t-venti{padding-top:80px}.a1m-cmp.a1-cmp-pt-t-trenta{padding-top:100px}} @media(max-width:768px){.a1m-cmp.a1-cmp-pt-m-hard{padding-top:0}.a1m-cmp.a1-cmp-pt-m-short{padding-top:15px}.a1m-cmp.a1-cmp-pt-m-tall{padding-top:40px}.a1m-cmp.a1-cmp-pt-m-grande{padding-top:60px}.a1m-cmp.a1-cmp-pt-m-venti{padding-top:80px}.a1m-cmp.a1-cmp-pt-m-trenta{padding-top:100px}} @media(min-width:1025px){.a1m-cmp.a1-cmp-pb-d-hard{padding-bottom:0}.a1m-cmp.a1-cmp-pb-d-short{padding-bottom:15px}.a1m-cmp.a1-cmp-pb-d-tall{padding-bottom:40px}.a1m-cmp.a1-cmp-pb-d-grande{padding-bottom:60px}.a1m-cmp.a1-cmp-pb-d-venti{padding-bottom:80px}.a1m-cmp.a1-cmp-pb-d-trenta{padding-bottom:100px}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-pb-t-hard{padding-bottom:0}.a1m-cmp.a1-cmp-pb-t-short{padding-bottom:15px}.a1m-cmp.a1-cmp-pb-t-tall{padding-bottom:40px}.a1m-cmp.a1-cmp-pb-t-grande{padding-bottom:60px}.a1m-cmp.a1-cmp-pb-t-venti{padding-bottom:80px}.a1m-cmp.a1-cmp-pb-t-trenta{padding-bottom:100px}} @media(max-width:768px){.a1m-cmp.a1-cmp-pb-m-hard{padding-bottom:0}.a1m-cmp.a1-cmp-pb-m-short{padding-bottom:15px}.a1m-cmp.a1-cmp-pb-m-tall{padding-bottom:40px}.a1m-cmp.a1-cmp-pb-m-grande{padding-bottom:60px}.a1m-cmp.a1-cmp-pb-m-venti{padding-bottom:80px}.a1m-cmp.a1-cmp-pb-m-trenta{padding-bottom:100px}} @media(min-width:1025px){.a1m-cmp.a1-cmp-hd-d{display:none}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-hd-t{display:none}} @media(max-width:768px){.a1m-cmp.a1-cmp-hd-m{display:none}} .a1m-cmp.a1-cmp-bg-white{background:var(--a1-color-ground-white,#ffffff)}.a1m-cmp.a1-cmp-bg-paper{background:var(--a1-color-ground-paper,#F5F3EF)}.a1m-cmp.a1-cmp-bg-tint_navy{background:var(--a1-color-tint-navy,#F8F7F7)} .a1m-cmp.a1-cmp-bg-none{background:none} @media(min-width:1025px){.a1m-cmp.a1-cmp-bgh-d{background:none}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-bgh-t{background:none}} @media(max-width:768px){.a1m-cmp.a1-cmp-bgh-m{background:none}} .a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary h1,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary h2,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary h3,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary p,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary li,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary b,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary span,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary .a1-sub,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-primary .a1-sub p{color:var(--a1-color-brand-red,#B11A29)}.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary h1,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary h2,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary h3,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary p,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary li,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary b,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary span,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary .a1-sub,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-secondary .a1-sub p{color:var(--a1-color-ink-secondary,#2D2E2D)}.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black h1,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black h2,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black h3,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black p,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black li,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black b,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black span,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black .a1-sub,.a1m-cmp.a1-cmp-tc-all.a1-cmp-tc-black .a1-sub p{color:var(--a1-color-ink-primary,#545456)} @media(min-width:1025px){.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary h1,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary h2,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary h3,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary p,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary li,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary b,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary span,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary .a1-sub,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-primary .a1-sub p{color:var(--a1-color-brand-red,#B11A29)}.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary h1,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary h2,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary h3,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary p,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary li,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary b,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary span,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary .a1-sub,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-secondary .a1-sub p{color:var(--a1-color-ink-secondary,#2D2E2D)}.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black h1,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black h2,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black h3,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black p,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black li,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black b,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black span,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black .a1-sub,.a1m-cmp.a1-cmp-tc-d.a1-cmp-tc-black .a1-sub p{color:var(--a1-color-ink-primary,#545456)}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary h1,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary h2,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary h3,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary p,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary li,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary b,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary span,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary .a1-sub,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-primary .a1-sub p{color:var(--a1-color-brand-red,#B11A29)}.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary h1,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary h2,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary h3,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary p,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary li,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary b,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary span,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary .a1-sub,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-secondary .a1-sub p{color:var(--a1-color-ink-secondary,#2D2E2D)}.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black h1,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black h2,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black h3,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black p,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black li,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black b,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black span,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black .a1-sub,.a1m-cmp.a1-cmp-tc-t.a1-cmp-tc-black .a1-sub p{color:var(--a1-color-ink-primary,#545456)}} @media(max-width:768px){.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary h1,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary h2,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary h3,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary p,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary li,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary b,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary span,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary .a1-sub,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-primary .a1-sub p{color:var(--a1-color-brand-red,#B11A29)}.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary h1,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary h2,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary h3,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary p,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary li,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary b,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary span,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary .a1-sub,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-secondary .a1-sub p{color:var(--a1-color-ink-secondary,#2D2E2D)}.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black h1,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black h2,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black h3,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black p,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black li,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black b,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black span,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black .a1-sub,.a1m-cmp.a1-cmp-tc-m.a1-cmp-tc-black .a1-sub p{color:var(--a1-color-ink-primary,#545456)}} .a1m-cmp.a1-cmp-w-wide>.a1m-wrap{max-width:none} .a1m-cmp.a1-cmp-ad-left{text-align:left}.a1m-cmp.a1-cmp-ad-center{text-align:center} @media(max-width:768px){.a1m-cmp.a1-cmp-am-left{text-align:left}.a1m-cmp.a1-cmp-am-center{text-align:center}} /* ========================================================================== FLEXIBILITY PASS (H1, 2026-09-19) — Josh 2026-09-19: "if I wanted to go in and change a 5/12 + 7/12 module to flip, I should be able to do that ... by simply having more options" and "'hidden' options ... for manual overrides ... free color picker ... be sure that type of flexibility is available and/or considered for ALL modules". Every rule below REQUIRES a class the default render never emits, so on an untouched instance this whole block matches nothing and the section renders byte-for-byte as it did before. Classes are namespaced to this module. ========================================================================== */ @media(min-width:1025px){.a1m-cmp.a1-cmp-pt-d-custom{padding-top:var(--a1-cmp-ptd,0px)}.a1m-cmp.a1-cmp-pb-d-custom{padding-bottom:var(--a1-cmp-pbd,0px)}} @media(max-width:1024px) and (min-width:769px){.a1m-cmp.a1-cmp-pt-t-custom{padding-top:var(--a1-cmp-ptt,0px)}.a1m-cmp.a1-cmp-pb-t-custom{padding-bottom:var(--a1-cmp-pbt,0px)}} @media(max-width:768px){.a1m-cmp.a1-cmp-pt-m-custom{padding-top:var(--a1-cmp-ptm,0px)}.a1m-cmp.a1-cmp-pb-m-custom{padding-bottom:var(--a1-cmp-pbm,0px)}} /* One ink rule for the whole preset family: the preset class sets --a1-cmp-ink, this rule spends it. Saves re-listing ten selectors six times over. */ .a1m-cmp.a1-cmp-bgp,.a1m-cmp.a1-cmp-bgp h1,.a1m-cmp.a1-cmp-bgp h2,.a1m-cmp.a1-cmp-bgp h3,.a1m-cmp.a1-cmp-bgp p,.a1m-cmp.a1-cmp-bgp li,.a1m-cmp.a1-cmp-bgp b,.a1m-cmp.a1-cmp-bgp span,.a1m-cmp.a1-cmp-bgp .a1-sub,.a1m-cmp.a1-cmp-bgp .a1-sub p{color:var(--a1-cmp-ink,inherit)} .a1m-cmp.a1-cmp-bgp-white{background:var(--a1-color-ground-white,#ffffff);--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-paper{background:var(--a1-color-ground-paper,#F5F3EF);--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-tint_navy{background:var(--a1-color-tint-navy,#F8F7F7);--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-navy{background:var(--a1-color-brand-navy,#2D2E2D);--a1-cmp-ink:var(--a1-color-ink-on-dark,#FFFFFF)} .a1m-cmp.a1-cmp-bgp-slate{background:#2D2E2D;--a1-cmp-ink:var(--a1-color-ink-on-dark,#FFFFFF)} /* theme palette presets — hexes read from ACL-IM-Prod-Theme-2024/css/_config.css color_List (live read 2026-09-19); literals on purpose: the theme, not the token kernel, owns these colours. Pairings contrast-checked (WCAG) at generation. */ .a1m-cmp.a1-cmp-bgp-lightgrey{background:#F8F7F7;--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-grey{background:#E3E2E1;--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-midgrey{background:#A39F9A;--a1-cmp-ink:var(--a1-color-ink-primary,#545456)} .a1m-cmp.a1-cmp-bgp-darkgrey{background:#545456;--a1-cmp-ink:var(--a1-color-ink-on-dark,#FFFFFF)} .a1m-cmp.a1-cmp-bgp-red{background:#B11A29;--a1-cmp-ink:var(--a1-color-ink-on-dark,#FFFFFF)} .a1m-cmp.a1-cmp-bgp-custom{background:var(--a1-cmp-bgc,transparent);--a1-cmp-ink:var(--a1-cmp-inkc,inherit)} .a1m-cmp.a1-cmp-lw-narrow .a1-cmpgrid{grid-template-columns:minmax(88px,.42fr)} .a1m-cmp.a1-cmp-lw-wide .a1-cmpgrid{grid-template-columns:minmax(140px,.9fr)} .a1m-cmp.a1-cmp-gp-tight .a1-cmpgrid{column-gap:4px} .a1m-cmp.a1-cmp-gp-roomy .a1-cmpgrid{column-gap:18px} /* ---- FOLDED FROM THE PAGE SKIN, 2026-09-21 (styling fold, phase B) ---- * Josh's design direction of 2026-08-28 / 09-03, moved off the page and into * the module that renders these elements. It carried `!important` only because * it lived on the page; here it needs none. Appended so source order gives it * the strongest position CSS allows without `!important`. * ---------------------------------------------------------------------- */ .a1m-wrap{max-width:1296px;width:96%;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto} .a1-btn:not(.a1-ghost){background:#B11A29;color:#fff;border:0} .a1m-hero .a1-btn:not(.a1-ghost), .a1m-method .a1-btn:not(.a1-ghost), .a1m-comm .a1-btn:not(.a1-ghost){background:#fff;color:#B11A29;border:0} .a1m-hero .a1-btn:not(.a1-ghost):hover, .a1m-method .a1-btn:not(.a1-ghost):hover, .a1m-comm .a1-btn:not(.a1-ghost):hover{background:#F8F7F7;color:#961623} .a1-btn:not(.a1-ghost):hover{background:#7D1420;color:#fff} .a1m-comm{background:#B11A29} .a1m-comm .a1-sub,.a1m-comm .a1-sub p{color:#F8F7F7} .a1m .a1-btn:hover, .a1m .a1-btn.a1-ghost:hover, .a1m-hero .a1-btn:hover, .a1m-hero .a1-btn.a1-ghost:hover, .a1m-method .a1-btn:hover, .a1m-comm .a1-btn:hover, .a1m-sinks .a1-btn:hover, .a1m-sinks .a1-btn.a1-ghost:hover, .a1m-seam .a1-btn:hover, .a1m-seam .a1-btn.a1-ghost:hover, .a1m-work .a1-btn:hover, .a1m-articles .a1-btn:hover, .a1m-mbar .a1-btn:hover, .a1m-mbar .a1-btn.a1-ghost:hover{background:#961623;color:#fff;border-color:#961623} .a1m .a1-kicker{margin:0 0 12px} .a1m h2{margin:0 0 16px} .a1m .a1-h2wrap{margin:0 0 16px} .a1m .a1-h2wrap h2{margin:0} .a1m h2 + .a1-sub,.a1m .a1-h2wrap + .a1-sub{margin-bottom:20px} .a1m-comm .a1-audc{padding:16px 18px} @media(max-width:840px){.a1m-lift,.a1m-seam,.a1m-cmp,.a1m-work,.a1m-cities,.a1m-sinks,.a1m-comm, .a1m-articles,.a1m-revs,.a1m-method{padding-top:34px;padding-bottom:34px}} @media(max-width:840px){.a1m h2{margin:0 0 14px}} @media(max-width:840px){.a1m h2 + .a1-sub,.a1m .a1-h2wrap + .a1-sub{margin-bottom:18px}} .a1-cmptab{background:#961623;color:#fff} .a1-cell.a1-f .a1-mtag::after{background:#961623;color:#fff;padding:2px 7px;border-radius:4px;margin-left:6px} .a1m-cmp .a1-cell{border:0;border-top:1px solid #E3E2E1;border-radius:0;background:transparent} .a1m-cmp .a1-featured .a1-cell{background:#FBF2F0;color:#2D2E2D;border-left:2px solid #B11A29;border-right:2px solid #B11A29;border-top:1px solid rgba(177,26,41,.22)} .a1m-cmp .a1-featured .a1-cell.a1-first{border-top:2px solid #B11A29} .a1m-cmp .a1-featured .a1-cell.a1-last{border-bottom:2px solid #B11A29;border-radius:0 0 15px 15px} @media(max-width:840px){.a1m-cmp .a1-mcol{border:1px solid #E3E2E1;border-radius:15px;overflow:hidden}} @media(max-width:840px){.a1m-cmp .a1-mcol.a1-featured{border:2px solid #B11A29}} @media(max-width:840px){.a1m-cmp .a1-cell, .a1m-cmp .a1-featured .a1-cell, .a1m-cmp .a1-featured .a1-cell.a1-first, .a1m-cmp .a1-featured .a1-cell.a1-last{border:0;border-top:1px solid #E3E2E1;border-radius:0}} @media(max-width:840px){.a1m-cmp .a1-featured .a1-cell, .a1m-cmp .a1-featured .a1-cell.a1-last{border-top:1px solid rgba(177,26,41,.22);background:#FBF2F0}} @media(max-width:840px){.a1m-cmp .a1-featured .a1-cell.a1-first{border-top:0}} @media(max-width:840px){.a1m-cmp .a1-cmph,.a1m-cmp .a1-cmph.a1-f,.a1m-cmp .a1-cmph.a1-o{border-radius:0;border:0}} .a1-cmpcta{margin:22px 0 0} /* ---- LINK FLOOR (2026-09-23, critique finding 2) ---------------------------- * Every in this module sets its own colour; none is left to the theme's * `a{color:#b11a29}`, which is red on whatever ground the link sits on — 1.0:1 * on a red band, which is what the two link-ups to the parent measured on every * subpage. Classed links (buttons, cards, chips) already carry their colour; * this floor catches the UNCLASSED ones, i.e. links written into rich text. * On this module's light default ground the link keeps the theme's red (6.9:1 on * white); on any ground the editor chooses, and on the red sub-grounds, it takes * the text ink the ground was contrast-checked for (`inherit`). * Focus: a two-colour ring (WCAG technique C40) — slate outline over a white * halo — so at least one ring reads at 3:1 on every ground in the palette, * red included. The old single red ring vanished on the red bands. * page_lint.py checks this: an no module rule colours is `link-unstyled`, * and its contrast is measured in the theme's red, not its parent's ink. * -------------------------------------------------------------------------- */ .a1m-cmp a:not([class]){color:#B11A29;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em} .a1m-cmp[class*="-bg"] a:not([class]),.a1m-cmp .a1-cmph.a1-f a:not([class]){color:inherit} .a1m-cmp a:not([class]):hover{text-decoration-thickness:2px} .a1m-cmp a:focus-visible{outline:3px solid #2D2E2D;box-shadow:0 0 0 2px #FFFFFF;outline-offset:2px} /* ---- PARENT ROUND 1 (Josh 2026-09-24, St. Louis parent) -------------------------- * Five opt-in changes. Every rule needs a class or element the default render never * prints (a1-cmp-hl-* / -ct-* / -sb-*, a1-rlnoted, a1-rlnote, a1-mtagnote), so an * instance that has not chosen them matches nothing here. Plain, widely compiled CSS * only (see the subgrid scar at the top of this file). * * A NOTE UNDER A TOPIC. The topic cell is a centred flex row; with a note it becomes a * column so the note sits under the topic, still centred on the row. Sentence case, * lighter, smaller: a qualifier, not a second label. #545456 on white is 7.6:1, on the * featured pink (phones) 6.9:1. */ .a1-rl.a1-rlnoted{flex-direction:column;align-items:flex-start;justify-content:center} .a1-rlnote{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;font-weight:500;letter-spacing:0;text-transform:none;color:#545456} .a1-mtagnote{display:none} @media(max-width:840px){.a1-mtagnote{display:block;margin:-2px 0 6px;font-size:12.5px;line-height:1.35;font-weight:500;color:#545456} } /* HIGHLIGHT THE WINNING CELLS, NOT THE WHOLE COLUMN (highlight = "cells"). The featured * column keeps its red outline and header, so A-1's method still reads as featured, but * its fill moves to the cells ticked 'Best on this topic'. A winning cell in another * column gets the same pink plus a 2px primary-red box. The box is a real border, and * the padding gives back exactly what the border takes (desktop: 1px top border + 14px * padding = 2px + 13px), so the words sit where they sat and nothing in the row moves. * On a phone each method is a card with 15px corners, so a winning LAST cell rounds its * bottom corners to the card's inner 14px instead of being clipped square by them. */ .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell{background:#FFFFFF} .a1m-cmp.a1-cmp-hl-cells .a1-mcol .a1-cell.a1-win{background:#FBF2F0} .a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-win{border:2px solid #B11A29;border-radius:10px;padding:13px 12px 12px} @media(max-width:840px){.a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-win{border:2px solid #B11A29;border-radius:0;padding:12px 14px 11px} .a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-win.a1-last{border-radius:0 0 14px 14px} } /* SKIMMABLE CELLS (cell_text = "skim"). The lead phrase steps up from 16.5px to 19px and * the detail steps down from 14px to 13.5px, so a column reads as its lead phrases. Both * keep their colours (#2D2E2D 13.6:1 and #545456 7.6:1 on white). */ .a1m-cmp.a1-cmp-ct-skim .a1-cell .a1-lead,.a1m-cmp.a1-cmp-ct-skim .a1-cell p.a1-lead{font-size:19px;line-height:1.25;letter-spacing:-.005em} .a1m-cmp.a1-cmp-ct-skim .a1-cell .a1-supp,.a1m-cmp.a1-cmp-ct-skim .a1-cell p.a1-supp{font-size:13.5px;line-height:1.45;margin-top:5px} @media(max-width:840px){.a1m-cmp.a1-cmp-ct-skim .a1-cell .a1-lead,.a1m-cmp.a1-cmp-ct-skim .a1-cell p.a1-lead{font-size:18px} } /* THE SITE'S SECONDARY BUTTON (secondary_button_style = "outlined"). This module never * styled its second button, so it took `.a1m .a1-btn` from another module's sheet and * printed solid red, the same as the first. These are the exact values the page's other * light sections give theirs (a1-data-bars / a1-seam-cards `.a1-btn.a1-ghost`, measured * on the served St. Louis draft: white fill, 2px #B11A29 line, #B11A29 words, 12px 22px, * 54px tall). (0,3,0) on purpose: it beats `.a1m .a1-btn` (0,2,0) and stays under the * shared hover rule `.a1m .a1-btn.a1-ghost:hover` (0,4,0), which fills it #961623 with * white words on hover, the same as those sections. */ .a1-cmp-sb-outlined .a1-btn.a1-ghost{background:#FFFFFF;color:#B11A29;border:2px solid #B11A29} /* ---- ONLY THE WINNERS CARRY THE OUTLINE (Josh 2026-09-24, St. Louis parent, round 3) ------- * "While you did highlight foam's 'ready in about an hour', there's still a stroke around * controllevel's 'walk on it right away' (and there shouldn't be)." In highlight = "cells" the * featured column had kept its whole-column outline (red sides on every cell, a red foot on * the last), so a ControlLevel cell that did NOT win still sat inside a red box. Now: * - a featured cell that did not win is a plain cell, like any other column's: no side or * foot stroke, no tint, only the grey row rule every cell has. Its side padding takes back * the 2px the stroke used to take, so its words line up with the winners above it; * - the featured winners keep the pink and the red sides, and each RUN of them closes on * its own: a red top where a run starts below a cell that did not win (under the header * the red header is the top), a red foot and rounded corners where it ends (a1-wtop / * a1-wend, printed by module.html in this mode only). Padding gives back what each * thicker edge takes, so no row changes height; * - on a phone the featured card's red frame goes the same way (it framed the non-winner * too): the card takes the grey frame every other card has, and the winners inside it * carry the red, the way foam's winning cell already does: square inside the card, and * rounded only where a run meets the card's own rounded foot. * Every selector needs a1-cmp-hl-cells, so a table in the default "column" mode (every other * page) matches nothing here. */ .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell:not(.a1-win){background:transparent;border:0;border-top:1px solid #E3E2E1;border-radius:0;padding:14px 16px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wtop:not(.a1-first){border-top:2px solid #B11A29;border-top-left-radius:15px;border-top-right-radius:15px;padding-top:13px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wend{border-bottom:2px solid #B11A29;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding-bottom:12px} @media(max-width:840px){.a1m-cmp.a1-cmp-hl-cells .a1-mcol.a1-featured{border:1px solid #E3E2E1} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell:not(.a1-win){background:transparent;border:0;border-top:1px solid #E3E2E1;border-radius:0;padding:13px 16px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-first:not(.a1-win){border-top:0} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win{border:0;border-left:2px solid #B11A29;border-right:2px solid #B11A29;border-top:1px solid rgba(177,26,41,.22);border-radius:0;padding:13px 14px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wtop{border-top:2px solid #B11A29;padding-top:12px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wend{border-bottom:2px solid #B11A29;padding-bottom:11px;border-radius:0} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wtop:not(.a1-first){border-radius:0;padding-top:12px} .a1m-cmp.a1-cmp-hl-cells .a1-featured .a1-cell.a1-win.a1-wend.a1-last{border-radius:0 0 14px 14px} } /* CLOSING BUTTONS CENTRED (opt-in layout_controls.button_align: center; Josh 2026-09-24). */ .a1-cmpcta.a1-cta-c{text-align:center;justify-content:center} .a1-cmpcta.a1-cta-c .a1-btn{margin-left:4px;margin-right:4px} /* ---- CLEAN EDGES + A FRAME ROUND THE OTHER METHOD (Josh 2026-09-24, St. Louis parent, round 5) ---- * "there's something going on with the horizontal lines in the comparison table ... you can see * where the rounded corners are on 'risk of overlift' that the horizontal lines extend beyond. * It's also awkward that there's no stroke around the foam leveling column -- it can be faint, * just like there is around the column header". * * WHY THE LINE SHOWED. Every cell draws its row line as its own full-width border-top. The cell * under the ControlLevel run ("When can I use?") kept that grey line, so it ran the full column * width straight under the run's red foot, and at the foot's 15px rounded corners the grey line * stuck out past the curve. Fix: a cell that did not win, directly under a winner in the featured * column (a1-wafter, printed by module.html in this mode only), keeps its 1px border but makes it * transparent. The run's red foot is that row's line; nothing moves (the border still takes its * 1px). All widths: on a phone the foot is square, but the grey line under it only doubled it. * * THE FRAME (desktop and tablet, the grid layout, >840px). The other method's header already * carries a 1px #E3E2E1 outline, open at the bottom. Its cells now carry the same 1px on both * sides, and the last cell closes it with the same 1px foot and 15px rounded corners (the * ControlLevel run's radius). The side padding gives back the 1px (14 -> 13), and the last cell's * bottom padding too, so no word and no row moves. * A winner inside the frame keeps the frame's grey on all four sides (its row line on top, the * frame's sides, and the frame's foot when it is the last cell) and draws its 2px red box * immediately inside it as an inset ring (box-shadow), which follows the cell's inner corners: * square at the top, where it meets the row line, and 14px at a rounded foot, concentric with the * frame's 15px. So no grey line can pass a red corner: the grey is always outside the red. Its * words sit exactly where they sat (1px + 14px top, 1px + 13px sides, as the 2px + 13/12px before). * A phone already frames each method as a card (1px #E3E2E1, 15px corners); nothing changes there. * Every selector needs a1-cmp-hl-cells, so the default "column" mode matches nothing here. */ .a1m-cmp.a1-cmp-hl-cells .a1-mcol.a1-featured .a1-cell.a1-wafter:not(.a1-win){border-top-color:transparent} @media(min-width:841px){.a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell{border-left:1px solid #E3E2E1;border-right:1px solid #E3E2E1;padding-left:13px;padding-right:13px} .a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-last{border-bottom:1px solid #E3E2E1;border-radius:0 0 15px 15px;padding-bottom:13px} .a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-win{border:1px solid #E3E2E1;border-bottom:0;border-radius:0;padding:14px 13px;box-shadow:inset 0 0 0 2px #B11A29} .a1m-cmp.a1-cmp-hl-cells .a1-mcol:not(.a1-featured) .a1-cell.a1-win.a1-last{border-bottom:1px solid #E3E2E1;border-radius:0 0 15px 15px;padding-bottom:13px} } /* ---- PHONE, PAIRED ROWS (layout_controls.mobile_layout = "paired"; team review 2026-09-28, Rob) ---------------- Each topic prints once across the full width, with the two methods' answers side by side beneath it, so a reader compares a row without scrolling back to the other card. The DOM is method-major, so every item is placed explicitly: the method headers on row 1, topic k on row 2k across both columns, and each method's k-th cell on row 2k+1 in its own column (rules for up to 10 topics). The inline grid-template-rows the desktop flow needs stays: its N+1 auto rows are simply the first of the 2N+1 this placement uses, and the rest are made implicitly. The featured column cannot be one outlined box once topics sit between its cells, so each winning cell carries its own outline and tint, and the header keeps the column's colour. Prints only when chosen; at the default the grouped cards above are unchanged. */ @media(max-width:840px){ .a1m-cmp.a1-cmp-ml-paired .a1-cmpbox{padding:24px 12px 12px} .a1m-cmp.a1-cmp-ml-paired .a1-cmpgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row;column-gap:8px;row-gap:0} .a1m-cmp.a1-cmp-ml-paired .a1-labcol,.a1m-cmp.a1-cmp-ml-paired .a1-mcol,.a1m-cmp.a1-cmp-ml-paired .a1-mcol.a1-featured{display:contents;border:0;margin:0} .a1m-cmp.a1-cmp-ml-paired .a1-labh{display:none} .a1m-cmp.a1-cmp-ml-paired .a1-cmpgrid>.a1-mcol:nth-child(2)>*{grid-column:1} .a1m-cmp.a1-cmp-ml-paired .a1-cmpgrid>.a1-mcol:nth-child(3)>*{grid-column:2} .a1m-cmp.a1-cmp-ml-paired .a1-cmph{grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;font-size:17px;line-height:1.2;padding:10px 12px;border-radius:12px 12px 0 0} .a1m-cmp.a1-cmp-ml-paired .a1-cmph.a1-o{border:1px solid #E3E2E1;border-bottom:0} .a1m-cmp.a1-cmp-ml-paired .a1-cmptab{position:static;display:inline-block;margin:0 0 6px;border-radius:6px;order:-1} .a1m-cmp.a1-cmp-ml-paired .a1-rl{grid-column:1 / -1;display:block;padding:16px 2px 6px;border-top:0;font-size:13px} .a1m-cmp.a1-cmp-ml-paired .a1-rl .a1-rlnote{display:block;font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;color:#545456;margin-top:2px} .a1m-cmp.a1-cmp-ml-paired .a1-mtag,.a1m-cmp.a1-cmp-ml-paired .a1-mtagnote{display:none} .a1m-cmp.a1-cmp-ml-paired .a1-cell,.a1m-cmp.a1-cmp-ml-paired .a1-featured .a1-cell,.a1m-cmp.a1-cmp-ml-paired .a1-featured .a1-cell.a1-first,.a1m-cmp.a1-cmp-ml-paired .a1-featured .a1-cell.a1-last{padding:10px 10px 12px;margin:0;border:1px solid #E3E2E1;border-radius:10px;background:#fff;color:#545456;font-size:15px} .a1m-cmp.a1-cmp-ml-paired .a1-cell.a1-win,.a1m-cmp.a1-cmp-ml-paired .a1-featured .a1-cell.a1-win{border:2px solid #B11A29;background:#FBF2F0;color:#2D2E2D} .a1m-cmp.a1-cmp-ml-paired .a1-cell .a1-lead,.a1m-cmp.a1-cmp-ml-paired .a1-cell p.a1-lead{font-size:16px} .a1m-cmp.a1-cmp-ml-paired .a1-cell .a1-supp,.a1m-cmp.a1-cmp-ml-paired .a1-cell p.a1-supp{font-size:14px} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(2){grid-row:2} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(2){grid-row:3} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(3){grid-row:4} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(3){grid-row:5} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(4){grid-row:6} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(4){grid-row:7} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(5){grid-row:8} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(5){grid-row:9} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(6){grid-row:10} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(6){grid-row:11} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(7){grid-row:12} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(7){grid-row:13} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(8){grid-row:14} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(8){grid-row:15} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(9){grid-row:16} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(9){grid-row:17} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(10){grid-row:18} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(10){grid-row:19} .a1m-cmp.a1-cmp-ml-paired .a1-labcol>.a1-rl:nth-child(11){grid-row:20} .a1m-cmp.a1-cmp-ml-paired .a1-mcol>.a1-cell:nth-child(11){grid-row:21} }