:root{ --imv-black:#1A1A1A; --imv-ink:#0D0D0D; --imv-charcoal:#232323; --imv-gold:#FFB800; --imv-gold-dark:#E6A500; --imv-gold-light:#FFC933; --imv-gold-on-light:#8A6200; --imv-gold-wash:#FFF6E0; --imv-g1:#F8F9FA; --imv-g2:#F1F3F5; --imv-g3:#E9ECEF; --imv-t1:#2C2C2C; --imv-t2:#666666; --imv-t3:#999999; --imv-bone:#FAF9F7; --imv-hairline:#E4E4E2; } .imv{background:var(--imv-ink);color:var(--imv-bone)} .imv .accent{color:var(--imv-gold)} .imv-light{background:var(--imv-bone);color:var(--imv-t1)} .imv-light .accent{color:var(--imv-gold-on-light)} /* frame.css's .screen-links__item a:hover hardcodes --imv-gold-on-light (#8A6200), which reads fine on the .imv-light sections it was written for (leads, phases) but is nearly invisible dark-text-on-dark once a section using the same component is .imv (tracking). #FFB800 is G4-safe as text here specifically because this selector carries .imv and not .imv-light — the exact condition G4 enforces. Specificity (.imv .screen-links__item a:hover = 0-3-1) beats frame.css's own .screen-links__item a:hover (0-2-1) regardless of source order; imove.css also loads after frame.css in every page's , so this wins twice over. */ .imv .screen-links__item a:hover, .imv .screen-links__item a:focus-visible { color: var(--imv-gold); } /* #website and #system land back to back as the same .imv tone (see frame.css's .imv + .imv hairline, added for exactly this join). Measured live at 1440×900, the ~250px gap the review flagged was not spread evenly across the join — #website's own copy is long enough that its box already sizes to content, past frame.css's 100svh floor, so trimming its own floor alone changes nothing there today (it only guards against #website compounding the same problem below on a taller window, or after a future copy trim). The actual slack lives in #system: five short lines of copy plus a diagram against a 900px-tall box, centred by frame.css's `justify-content:center`, leaves ~100px of dead space above the content AND another ~100px below it — that pairing, not #website, is what reads as a void. 70svh on both keeps the full-bleed "slide" feel everywhere this floor doesn't bind (every section but this join, at every width tested) while, at the two widths that matter here, dropping the floor below #system's own content height (900×0.7=630 < #system's measured 689px content+padding at 1440; similarly at 820) — so #system sizes to its content instead of stretching into empty space, closing the gap at its actual source. Neither declaration touches #system's colour, class, or the pipeline SVG's gold nodes — layout only. */ @media (min-width: 768px) { #website, #system { min-height: 70svh; } } /* #phases and #costs land back to back as the same .imv-light tone (11 sections becoming 12 with this insertion keeps the same odd-count problem frame.css's top-of-file comment already documents — exact alternation stays impossible for at least one join). frame.css's generic .imv-light+.imv-light rule draws the hairline automatically; nothing extra needed here unless a future measurement finds a void like the #website/#system one above, which #costs is unlikely to hit — it is one of the longest sections in the document (six paragraphs, a callout and a nine-row table), well past any min-height floor at every width tested. */ /* ---------- Package comparison table (section "What it costs") ---------- */ /* min-width is deliberate and large-ish (640px): every data cell in this table carries a short SENTENCE ("+ send quotations, + send tracking updates"), not a single word or number like the console mockups' tables, so a narrower min-width would still wrap mid-sentence inside each column well before the table's own scroll affordance ever triggered. Wrapped in .table-scroll (frame.css) for the horizontal-scroll + labelled-focusable behaviour that min-width alone does not provide. print.css overrides min-width back to 0 — there is no scrollbar on paper, so forcing this width there would clip columns off the printed page instead of wrapping them, which is the opposite of what min-width is for on screen. */ .compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-body); } .compare-table th, .compare-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--imv-hairline); vertical-align: top; } .compare-table thead th { font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--fs-h3); padding-block-end: var(--sp-3); } .compare-table tbody th, .compare-table tfoot th { font-weight: 600; white-space: nowrap; } .compare-table tfoot th, .compare-table tfoot td { border-block-end: none; border-block-start: 2px solid var(--imv-hairline); font-weight: 700; } /* Gold as BACKGROUND only, never as this badge's text colour — G4's own condition. color is --imv-ink (near-black) on a gold chip, same discipline as .num-badge above. */ .compare-table__badge { display: inline-block; margin-inline-start: var(--sp-2); padding: 0.2em 0.6em; border-radius: 999px; background: var(--imv-gold); color: var(--imv-ink); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }