exists to reach (0,3,1), which clears all three; an !important is only ever beaten by a more specific !important. `currentColor` on the decoration keeps the underline tied to the text so a future tone change cannot separate them again. */ .premium-footer .qf-foot-marks .qf-foot-marks-line { color: var(--footer-quiet) !important; } .premium-footer .qf-foot-marks .qf-foot-marks-line a { color: var(--footer-quiet) !important; font-weight: 400; text-decoration: underline; text-decoration-color: currentColor !important; text-underline-offset: 2px; } /* Above the launcher band the pay row buys its clearance horizontally (style.css:2416). The note now sits BELOW it and must not give that width back — it is left-aligned and capped at 78ch, so it never reaches the corner, but the gutter is stated so a future measure change cannot walk into it. */ @media (min-width: 901px) { .qf-foot-marks { padding-right: 80px; } } /* ═══════════════════════════════════════════════════════════════════════════ WAVE 10 — THE HERO'S PRIMARY CTA AND ITS AUDIENCE TOGGLE, ON THE BAND'S OWN HUE (owner, 2026-09: "the blue color choice for CTA button, not sure about that. It doesn't match the background color" + "the toggle for carriers and shippers, let's make it minimal, without white fill color"). ── 1. WHY THE CTA IS NOT `--accent-fill` ANY MORE ──────────────────────── #570 painted the hero's "Start free" in the brand indigo `--accent-fill` #3356EE, hue 229. The band it sits on is the reference azure, hue 198. That is the SAME 31-degree mismatch Wave 9 already fixed once for the card icons, and the owner reported it again for the button. IT WAS ALSO NOT SEPARATING FROM ITS GROUND. #570 measured the indigo on the band at 1.5:1 and accepted it because the rim carried the boundary. Measured live off the rendered page at four widths (Playwright, pixel-sampled, the button hidden so the sample is the raster and not the button), it is worse than that: the darkest band pixel behind the button is #016FA0 and the indigo measures **1.02:1** against it in light at 1440/768/375. The page's single most important control was, in luminance terms, invisible. ── 2. WHAT IT IS NOW, AND HOW IT IS DERIVED ────────────────────────────── THE CTA IS `--cta-bg` RE-HUED ONTO THE BAND. The site already has a primary button colour that inverts per theme: `--cta-bg` / `--cta-text` (near-black on white ink in light; near-white on near-black ink in dark). The hero CTA is that same object moved onto the wash's hue and stepped away from the band in whichever direction the band leaves room. So `--hero-cta-ink` is simply `var(--cta-text)` — it already inverts correctly, in both themes, with no second declaration. THE DIRECTION OF THE STEP FLIPS WITH THE THEME, BECAUSE THE BAND DOES. Light's band is a mid azure (measured #016F9F -> #42ADDA behind the button), so the CTA steps DOWN from it. Dark's band is teal-navy near-black (#03273E -> #18394D), where "darker" does not exist — 3:1 below it is off the bottom of the gamut — so the CTA steps UP instead. That is not two buttons: it is one rule, and it is the same answer `--hero-azure-lift` already gives the card glyphs for exactly the same reason (see Wave 9). THE LIGHT FILL IS THE BAND'S `base` HUE EXACTLY. #003E5A is hue 198.67; the generator's `base` anchor [4,117,168] is hue 198.66. Same colour story, one step down in luminance — which is the whole of the owner's note. ── 2a. WHY THE RIM, AND NOT THE FILL, CARRIES 3:1 ──────────────────────── THE FIRST ATTEMPT AT THIS CHANGE GOT IT WRONG, AND THE MISTAKE IS WORTH KEEPING. It required 3:1 between the FILL and the band. On this band that forces the fill to near-black: `base` is pinned as "the lightest azure white BODY copy can sit on" (heroWashAzure.test.ts) because an 18px lead runs across it, so a step 3:1 darker than it lands at #001F2C — which measured 1.11:1 against the sixteen `--cta-bg` tool-card buttons and simply read as black. It stopped clashing by ceasing to be blue. WCAG 1.4.11 asks for 3:1 on the visual information that IDENTIFIES the component, not on its fill. For a button with a visible rim that is the RIM. So the rim is now 2px of `--hero-cta-rim` and is the load-bearing boundary, and the fill is free to be a colour the owner actually asked for. MEASURED, light theme, worst case across 320/375/768/1440: fill #003E5A hue 198.67 2.06:1 vs the darkest band pixel 11.44:1 for the white label 1.65:1 vs `--cta-bg` (was 1.11 at #001F2C) rim white 2px 11.44:1 vs the fill 4.24:1 vs the darkest band pixel hover #00344B hue 198.40 2.37:1 vs band, 13.18:1 for the label IN DARK THE FILL STILL CARRIES IT ON ITS OWN — #0496D7 measures 3.61-3.69:1 against the dark band — so dark's rim is decorative rather than load-bearing and stays the quiet `--border-strong`. One token, two jobs, stated here so nobody "fixes" the dark rim to match the light one. THE ONE PLACE THE RIM DOES NOT REACH 3:1, STATED RATHER THAN HIDDEN. At 320 the button sits low enough that the ramp has opened up behind it and the band reaches #42ADDA. A white rim measures 2.55:1 against THAT pixel (3.52:1 against the band's modal colour there). No single rim colour can fix it: a lighter rim does not exist, and a rim dark enough to clear 3:1 against a #42ADDA ground would have to be darker than the fill it also has to separate from. It is one width, against the lightest pixel of a grainy ramp, with the fill's own 4.62:1 against that same pixel underneath it. HOVER DARKENS IN LIGHT AND LIGHTENS IN DARK — IT NEVER CHANGES FAMILY. This is the trap #570 documented and dodged: `--accent-strong` is #2440C4 in light but a PALE LAVENDER #B4C2FC in dark (and `landing-s-polish.css` re-declares it as the lavender on `.landing-v2` in BOTH themes), so any hover that reaches for it puts a white label on a pale ground at 1.4:1. The tokens below never leave the 197-199 hue window, so every state is AA by construction rather than by review. ── 3. THE TOGGLE ───────────────────────────────────────────────────────── The selected segment was a WHITE PILL (9999px radius, #FFFFFF flood, near-black label) inside a white glass track. That is a straight violation of design-system rule 4 — selected is a 2px border colour swap plus a tint, never a bright fill — and it is what the owner asked to remove. It is now two rectangles: radius 8, a 2px rim in BOTH states so nothing reflows when you switch, and selection carried by the rim colour plus a 10% white tint. THE TINT IS 10%, NOT 14%, AND THAT IS A MEASURED CEILING rather than a taste call. `--hero-wash-wipe` (14%) composited over the band behind the toggle takes the selected segment's ground to luminance 0.196, where the white label measures 4.26:1 — an AA failure. 10% lands at 0.178 and 4.61:1. The tint cannot go higher while the label stays white, so it gets its own token rather than borrowing the wipe. Appended at EOF for baseline-protocol.md rule 1 (the guards key file:line). Both guards are blind to this anyway — `check-hardcoded-colors.mjs` and `check-spacing.mjs` only walk .css/.html and this file is .css, so they DO see it; the CSS that lives in .ts template literals elsewhere is what they miss. Hand-audited either way: no raw #fff/#000 below, every radius on the 6/8/12 ramp, every length on the 8px ramp. ───────────────────────────────────────────────────────────────────────── */ :root { --hero-cta-fill: #003E5A; --hero-cta-fill-hover: #00344B; --hero-cta-ink: var(--cta-text); --hero-cta-rim: var(--hero-wash-ink); --hero-toggle-rim: var(--hero-wash-line); --hero-toggle-rim-on: var(--hero-wash-ink); --hero-toggle-tint: rgba(var(--hero-wash-ink-rgb), 0.10); } html[data-theme="dark"], :root:not([data-theme="light"]) { --hero-cta-fill: #0496D7; --hero-cta-fill-hover: #1EA6E3; --hero-cta-rim: var(--hero-wash-line); --hero-toggle-rim: rgba(var(--hero-wash-ink-rgb), 0.38); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hero-cta-fill: #003E5A; --hero-cta-fill-hover: #00344B; --hero-cta-rim: var(--hero-wash-ink); --hero-toggle-rim: var(--hero-wash-line); } } /* THE BRACE ABOVE WAS MISSING (found Wave 12, introduced by the CTA block in #572). Everything below it — `.qf-proc-band` from #573 and BOTH hero-switch token blocks — was therefore nested inside `@media (prefers-color-scheme: light)` and simply did not exist for a visitor with no `data-theme` stamped and a dark OS. Wave 11's switch fell back to its light `:root` values on a near-black band in that state; Wave 12's knob resolved to nothing at all and the control rendered invisible, which is how it was caught. The rules below are unchanged — they only apply in every colour scheme now, as each was written to. */ /* ══ THE PROCESSOR BADGE'S OWN LABELLED BAND ═════════════════════════════════ siteChrome.ts#FOOTER_PAY_ROW. Measured defect: at 320/375/390/414 in both themes the strip wrapped SIX marks then the Stripe badge alone — a 6+1 break, which is exactly the no-orphan rule ("a pill/badge group never wraps leaving a single item alone") the six-tile list's own `flex-wrap: nowrap` exists to honour. It was never a wrap in the CSS sense: `.qf-payrow-methods` is a COLUMN below 720px and the badge simply took the third line. It READ as an orphan because the badge wears the same 1px/6px/22px `.qf-paymark` tile as the six above it, so the eye counts seven identical tiles and sees one left behind. THE FIX IS A LABEL, NOT A 4+3 BREAK. Folding the badge into `.qf-paymarks` for a 4+3 wrap would put the PROCESSOR inside the list that answers "what can I pay with", which is the one thing STRIPE_MARK's note argues at length that we must not say — Stripe is not a payment method. So the badge keeps its place outside the list and gains the strip's own `.qf-payrow-label` idiom, the same treatment "Accepted payments" already has. The line now carries TWO elements, the separation is STATED rather than inferred from a gap, and the six-tile row keeps nowrap. Verified 6 / 1+1 at 320, 375, 390 and 414 and 7 on one row at 768 and 1440, in dark, light and both system states. No new tokens, no new radius, no shadow: the band is pure layout. */ .qf-proc-band { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; } /* ── Wave 12: THE AUDIENCE SWITCH IS ONE OPAQUE KNOB ────────────────────── The owner on Wave 11: "It doesn't look crisp and minimalistic. Do something with it." Wave 11 drew the control out of three TRANSLUCENT layers stacked on a generated raster with visible film grain — a 10% black track, a 22% black capsule, a 70% white rim — and translucency over grain has no hard edge by construction. Pixel-sampled on the band the capsule measured 1.45:1 (light) / 1.63:1 (dark) against the ground it abuts, which is a smudge of shadow rather than an object, and the rim composited to #B6D1DD, a hazy blue-grey. Wave 12 deletes the track and the rim and makes the one remaining layer opaque. Three soft shapes become one hard one. ── THE KNOB IS THE INK RAMP, NOT THE BAND ──────────────────────────────── Wave 11's capsule was capped at 22% because 32% composited to #003D59, and the hero CTA is #003E5A: the two measured 1.01:1 and the switch became a second dark button above the conversion button. That cap is the reason it could never be crisp, and the escape is not a different alpha — it is leaving the band's hue entirely. The CTA is a SATURATED hue-198 fill; the knob is the page's own NEAR-NEUTRAL ink ramp. Pixel-sampled off the rendered page, in CIE Lab: light knob --ink #020618 L* 1.9 chroma 9.8 CTA #003E5A L* 24.3 chroma 22.5 dE2000 19.25 dark knob --muted-soft #64748B L* 48.3 chroma 14.5 CTA #0496D7 L* 58.7 chroma 43.4 dE2000 18.24 A dE2000 of ~18-19 is far past the "clearly different colours" threshold (~5), against the 1.01:1 near-identity Wave 11 was avoiding and the 1.14-1.30:1 the translucent capsule shipped with. A near-neutral and a saturated azure are not read as the same object, which is what lets the knob be fully opaque without competing for primacy. Note the knob-vs-CTA LUMINANCE ratio (1.76 light / 1.44 dark) is a dead axis here and is deliberately not quoted as the separation: the light CTA is so dark that pure black is only 1.87:1 from it, so NO fill of any colour could score well on that measure. Hue and chroma are what separate these two. Both values are existing ramp tokens, so this adds zero new hues — the same discipline Wave 11 claimed, reached by stepping out of the band rather than down into it. ── THE KNOB CARRIES WCAG 1.4.11 ON ITS OWN, WHICH IS WHAT PAYS FOR ─────── DELETING THE RIM Wave 11 kept a rim because a 22% capsule cannot identify a control; the rim measured 3.34-3.82:1 and did that job. Opaque, the knob itself measures 3.0-3.7:1 against the band pixel it abuts, sampled at 320/375/1440 in both themes. So the rim is not removed and hoped for — it is removed because the thing it was covering for now clears the bar without it. Dark is the tight end (3.0): the band there is near-black, so the knob has to step UP, and the window where it is both >=3:1 on the band and still carries a white label at >=4.5:1 is narrow. `--muted-soft` sits at the bottom of that window, which is the point in it with the most headroom on the LABEL — the reading that gets checked on every visit. ── BOTH LABELS ARE FULL HERO INK ──────────────────────────────────────── Wave 11 stepped the inactive label to 86% white. That measured 5.03:1 only because it sat on the track's own 10% black ground; on the BARE band the same 86% is 4.35:1 at 375/light (an AA failure) and 88% is exactly 4.50. So there is no room for an opacity step here — and no need for one. An opaque black knob does not need a second, weaker voice repeating what it says. One measured signal instead of two, one of which was failing. BOTH LABELS ARE PURE WHITE, NOT `--hero-wash-ink`. In light the two are the same value (`--accent-ink` is #FFFFFF), but in DARK `--hero-wash-ink` resolves to `--ink` = #F8FAFC, and #F8FAFC on the #64748B knob measures 4.48:1 — under AA by two hundredths. Pure white on the same knob is 4.70:1. `--hero-wash-ink-rgb` is the 255,255,255 the whole hero-wash block is built on and is not theme-switched, so `rgb(...)` of it is the one expression that is white in both themes. It is a token, not a hex literal at a call site. Appended at EOF for baseline-protocol.md rule 1 (the guards key file:line). Hand-audited: no raw #fff/#000 below, no gradients, no shadows, no lengths at all (this block is colour only), and the pill radius is unchanged and still the system's own fourth idiom (style.css:1862; RADIUS_ALLOWED in check-spacing.mjs lists 9999 explicitly). ───────────────────────────────────────────────────────────────────────── */ :root { --hero-switch-knob: var(--ink); --hero-switch-ink: rgb(var(--hero-wash-ink-rgb)); --hero-switch-ink-on: rgb(var(--hero-wash-ink-rgb)); } html[data-theme="dark"], :root:not([data-theme="light"]) { --hero-switch-knob: var(--muted-soft); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hero-switch-knob: var(--ink); } } /* ───────────────────────────────────────────────────────────────────────── WAVE 13: THE AUDIENCE SWITCH IS FROSTED — the knob's tint, blur and saturation, per theme. The shape, the travel and the labels are unchanged from Wave 12; only the material moves. WHY THIS IS NOT WAVE 11 AGAIN. Wave 11 made the knob 22% black and the owner rejected it as not crisp: the hero band is a RASTER with grain, and at 22% the grain read straight through a shape that then had no edge. Frost is a different mechanism — `backdrop-filter: blur()` flattens the grain BEFORE the tint composites over it — so the failure mode Wave 11 hit does not exist here. The tint is still 92% opaque, which is the safety margin: only 8% of an already-blurred backdrop reaches the surface. THE OPAQUE KNOB IS STILL THE BASE DECLARATION. `--hero-switch-knob` is untouched and unconditional in landing-hero-fixes-v2.css; these tokens are consumed only inside `@supports (backdrop-filter: ...)`. A browser without backdrop-filter renders Wave 12 exactly. That is why the tint tokens are allowed to carry alpha where `--hero-switch-knob` may not: one is an enhancement, the other is the floor. THE VALUES ARE THE MOBILE MENU'S. 0.92 tint / 40px blur / 180% saturate are `--qf-menu-tint` / `--qf-menu-blur` / `--qf-menu-sat` (nav-unify.css:1490, 1500-1501), so the site has ONE glass treatment rather than two. The tint's rgb triplets are the two values `--hero-switch-knob` already resolves to — light `--ink` #020618 and dark `--muted-soft` #64748B — written out because `rgba()` needs the channels, not the colour. Same three-block theme structure as Wave 12 above: default (light), dark-or-unstamped, then the `prefers-color-scheme: light` correction for the unstamped visitor. ── `--hero-switch-gloss` IS AN EDGE TOKEN, NOT AN ELEVATION SHADOW ────── The tint alone is nearly invisible against a near-uniform band; what makes a surface read as glass is its LIT EDGE. `--hero-switch-gloss` is that edge: a 1px specular highlight painted with `outline` (see landing-hero-fixes-v2.css for why `outline` rather than `box-shadow` or `border`). It is filed here, next to the material, and NOT in the elevation ramp. The three shadows this system allows are `--qf-shadow-sm`, `--qf-shadow-md` and `--qf-shadow-lift` (style.css:1836-1838) — each an offset plus a blur, each one saying "this surface is lifted above that one". A zero-offset, zero-blur 1px line at an edge is not making that claim and is not a fourth entry in that ramp. Those three tokens are unchanged, and nothing in the audience switch references any of them. Keep it that way: if a future edit wants ELEVATION on this control it must take one of the three, not extend this. White in both themes, at two alphas, because it is a highlight — the light catching a raised edge — rather than a colour: 0.38 over the near-black light-theme knob, 0.30 over the lighter dark-theme knob, so the rim reads at the same strength on both. Alpha is fine here for the same reason it is fine on the frost tint: this whole block is consumed only inside `@supports`. Appended at EOF for baseline-protocol.md rule 1 (the guards key file:line). Hand-audited: no gradients, no shadows, no lengths off the ramp (40px is a filter radius and 1px an edge, not spacing), no raw hex, and no radius. ───────────────────────────────────────────────────────────────────────── */ :root { --hero-switch-frost: rgba(2, 6, 24, 0.92); --hero-switch-frost-blur: 40px; --hero-switch-frost-sat: 180%; --hero-switch-gloss: rgba(255, 255, 255, 0.38); } html[data-theme="dark"], :root:not([data-theme="light"]) { --hero-switch-frost: rgba(100, 116, 139, 0.92); --hero-switch-gloss: rgba(255, 255, 255, 0.30); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hero-switch-frost: rgba(2, 6, 24, 0.92); --hero-switch-gloss: rgba(255, 255, 255, 0.38); } }