` elements on this page (`.cmpbox` is one) and must keep whatever padding their own component CSS gives them — the kit does not touch a gate-checked class, ever. ================================================================ */ body.zx section:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ padding-top: var(--zx-s2); padding-bottom: var(--zx-s2); } body.zx section.zx-strip:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ padding-top: var(--zx-s1); padding-bottom: var(--zx-s1); } body.zx section.zx-major:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ padding-top: var(--zx-s3); padding-bottom: var(--zx-s3); } body.zx section.zx-break:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ padding-top: var(--zx-s4); padding-bottom: var(--zx-s4); } /* ================================================================ §6d EYEBROW — PILOT-REVIEW-google-maps-2026-09-02.md §1: an eyebrow label reused the `

`/`.h2` tag+class for its 12px uppercase look instead of a real heading. Retag the markup to `
` (SC10: same words, no copy change) and give it the exact visual treatment `.clients-wall h2,.clients-wall .h2` already ships (shared.css:299), so nothing repaints — only the semantics fix. 2026-09-02 UPDATE (coordinator, about.html rollout gap): this block is shared across every page's `.clients-wall`, so retagging is a per-page decision, not a kit one — CSS-only route preferred instead of a broadcast markup change. The kit now owns BOTH markup states directly: a page that has NOT retagged still renders `.clients-wall h2`/`.h2` (shared.css:299's own values, duplicated here so the kit does not depend on that file); a page that HAS retagged (google-maps.html) gets the identical look from `.zx-eyebrow` below. font-weight IS 600, not shared.css:299's stated 700 — verified live: shared.css:77's global `h2,.h2{font-weight:600!important}` outranks shared.css:299's non-important 700 on any element that is an

or carries `.h2`, so the un-retagged eyebrow has ALWAYS rendered at 600 in practice. A bare `
` does not match `h2,.h2`, so without this line it would render at whatever weight came before this rule instead, breaking the "identical either way" goal this fix exists for. `!important` on 4 properties now (font-size, weight, color, family) — all 4 matching an `!important` shared.css already uses somewhere in this cascade for this exact element, not new ones. / body.zx .clients-wall h2, body.zx .clients-wall .h2, body.zx .zx-eyebrow{ font-family: "Sarabun", system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #5D6B84) !important; margin-bottom: 0; } / DARK-GROUND VARIANT — homepage evaluator gap (2026-09-02, index-v2.html): the light-ground `--muted`/`#5D6B84` above measures 2.83:1 / 3.10:1 against `--zx-ink` / `--zx-ink-deep` (index-v2's dark `.zx-sec.zx-ink-deep.zx-break` section) — fails AA and is genuinely hard to read. `--zx-muted-on-ink` (defined above in `body.zx{}`, §5c) was already sized for exactly this: 7.45:1 on --zx-ink, 8.16:1 on --zx-ink-deep. Two hooks so any page can opt in without a markup change on pages that already use one of these conventions: `.zx-break` (the dark-section modifier this kit ships) and `[data-ground="dark"]` (an attribute hook for pages/components that mark dark context that way instead). Specificity (0,3,1) beats the base `body.zx .zx-eyebrow` (0,2,1) above unconditionally, and both are `!important` on `color` so this cannot lose to a load-order accident. DOCUMENTED CONTRACT: a page-local override of eyebrow colour on a dark section must be `body.zx`-prefixed (>= this rule's specificity) to win — a bare `.some-dark-section .zx-eyebrow{color:...}` will lose to this. / body.zx .zx-break .zx-eyebrow, body.zx [data-ground="dark"] .zx-eyebrow{ color: var(--zx-muted-on-ink) !important; } / ================================================================ §7 RADIUS + SHADOW UTILITIES ================================================================ / body.zx .zx-radius-pill{ border-radius: var(--zx-r-pill); } body.zx .zx-radius-1{ border-radius: var(--zx-r-1); } body.zx .zx-radius-2{ border-radius: var(--zx-r-2); } body.zx .zx-radius-3{ border-radius: var(--zx-r-3); } body.zx .zx-shadow-1{ box-shadow: var(--zx-sh-1); } body.zx .zx-shadow-2{ box-shadow: var(--zx-sh-2); } body.zx .zx-shadow-3{ box-shadow: var(--zx-sh-3); } / ================================================================ §8 THE .lit RING REPLACEMENT — scoped to `.zx .lit` ONLY. Never a bare `.lit` rule (that would edit every page that ships the amber ring outside this kit). Reference gap #5 in design/ANGA-REFERENCE-SPEC-2026-09-02.md §8(a): replace the amber `0 0 0 1.5px rgba(255,184,37,.22)` ring with a real shadow — here, shadow tier 2 (large soft panel). WHY THIS SELECTOR SHAPE — PILOT-REVIEW-google-maps-2026-09-02.md §3 found the ring still on 9 elements despite the rule below existing. Two independent causes, both fixed here: 1. SPECIFICITY LOSS ON SPECIFIC COMPONENTS. glow3.css's ring rule is one comma-joined selector list; the browser scores each selector in it separately per matching element. `body .lit:not(.glow-card)` is (0,2,1), tied with the old `body.zx .lit` (0,2,1) — a tie zx-system.css should win by loading last. But the SAME glow3 rule also lists `.premium .step:not(.glow-card)`, `.premium .stat-tile :not(.glow-card)`, `.premium .tcard:not(.glow-card)`, `.premium .ba-card:not(.glow-card)` etc — each (0,3,0) — which beats (0,2,1) outright regardless of source order. `.lit.lit` (repeating the class) plus the 12-class gate exclusion below pushes this rule's own specificity past every one of those, so it wins unconditionally. 2. THE is-lit BLOOM COMES BACK AFTER SCROLL-IN. glow3.css's entrance bloom `body .lit.is-lit:not(.glow-card)` is (0,3,1) — also higher than the old (0,2,1) rule, so the ring reappeared the moment glow3.js added `.is-lit` on intersection, even on elements the base rule had already fixed at rest. Because THIS rule's selector does not mention `.is-lit` at all, its (very high, see below) specificity applies in every state — rest, is-lit and hover alike — so there is nothing left for glow3's is-lit rule to re-win. GATE EXCLUSION — ops/shane_check.py SC19_COMPONENTS, the exact 12 classes SC19 pins to the /medical-tourism anchor for both borderRadius (4 corners) and boxShadow. A gate-checked element must render pixel-identical to the anchor; this kit must never restyle one, which is why the whole gate list is `:not()`-excluded from both properties below and glow3.css is left to own them, unopposed, in every state (rest / is-lit / hover). ================================================================ / body.zx .lit.lit:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ box-shadow: var(--zx-sh-2); border-radius: var(--zx-r-1); transition: box-shadow var(--zx-dur-interact) var(--zx-ease); } body.zx .lit.lit:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk):hover{ box-shadow: var(--zx-sh-3); } @media (prefers-reduced-motion: reduce){ body.zx .lit.lit:not(.cmpgrid):not(.cmpbox):not(.cmp-us):not(.cmp-lbl):not(.cmp-vs):not(.vs):not(.vs-col):not(.proofgrid):not(.answer-box):not(.mt-stat):not(.faq-item):not(.blk){ transition: none; } } / ================================================================ §9 ENTRANCE MOTION — anything using `.zx-reveal` gets the >=0.9s entrance floor; interaction (buttons, tabs, carousel controls) stays on the 0.3s interaction duration (applied per-component below and in zx-carousel.js / zx-tabs.js). ================================================================ / body.zx .zx-reveal{ opacity: 0; transform: translateY(16px); transition: opacity var(--zx-dur-enter) var(--zx-ease), transform var(--zx-dur-enter) var(--zx-ease); } body.zx .zx-reveal.is-in{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ body.zx .zx-reveal{ transition: none; opacity: 1; transform: none; } } / ================================================================ KIT B — .zx-carousel — SITE-REDIRECTION slice 5. Mechanism per ANGA §3.1: transform-based track (translate3d), arrow buttons, pointer drag, NO autoplay, NO dots, NO CSS scroll-snap (scroll-snap-type stays `none` throughout — the snap-to-card behaviour lives in JS as a velocity-based settle, never as `scroll-snap-type`). ================================================================ / body.zx .zx-carousel{ position: relative; --zx-gap: 20px; } body.zx .zx-carousel-viewport{ overflow: hidden; / NOT overflow-x:auto — this is not a scroll container / scroll-snap-type: none; / explicit: no CSS scroll-snap, ANGA §3.1 / §3.8 / touch-action: pan-y; cursor: grab; } body.zx .zx-carousel-viewport.is-dragging{ cursor: grabbing; } body.zx .zx-carousel-track{ display: flex; gap: var(--zx-gap); will-change: transform; transition: transform var(--zx-dur-interact) var(--zx-ease); } body.zx .zx-carousel-track.is-dragging{ transition: none; } @media (prefers-reduced-motion: reduce){ body.zx .zx-carousel-track{ transition: none; } } body.zx .zx-card{ flex: 0 0 clamp(240px, 78%, 320px); background: #fff; border-radius: var(--zx-r-1); box-shadow: var(--zx-sh-1); padding: 28px; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px){ body.zx .zx-card{ flex-basis: clamp(280px, 40%, 340px); } } body.zx .zx-card-num{ font-family: var(--zx-font-display); font-weight: 700; font-size: 44px; line-height: 1.1; color: inherit; } body.zx .zx-card-num small{ font-size: 18px; font-weight: 700; } body.zx .zx-card-label{ font-size: 16px; line-height: 1.5; } body.zx .zx-carousel-controls{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } body.zx .zx-arrow{ width: 44px; height: 44px; border-radius: var(--zx-r-pill); background: #fff; box-shadow: var(--zx-sh-1); border: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: box-shadow var(--zx-dur-interact) var(--zx-ease), background var(--zx-dur-interact) var(--zx-ease); } body.zx .zx-arrow:hover{ box-shadow: var(--zx-sh-2); } body.zx .zx-arrow:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } body.zx .zx-arrow[disabled]{ opacity: .35; cursor: default; box-shadow: none; } / mobile: cards + arrows never force page-width overflow (tasklist req: no 390 overflow) — the viewport clips, the track is free to extend past it / body.zx .zx-carousel-viewport{ max-width: 100%; } / ================================================================ KIT C — .zx-tabs — SITE-REDIRECTION slice 6. Mechanism per ANGA §3.2: CSS position:sticky; top:-20px; z-index:20, white rounded-full rail, JS-applied .active on click + hash (our version also runs a working IntersectionObserver scroll-spy — the reference's does not, per ANGA §3.2 "There is no working scroll-spy"). STICKY RULE — READ BEFORE PLACING THIS COMPONENT: `position:sticky` breaks (silently, no console warning) when ANY ancestor between `.zx-tabs` and the scrolling viewport has: - overflow != visible (hidden / auto / scroll) — clips the sticky travel range to that ancestor's box instead of the viewport, OR - a `transform`, `filter`, `perspective`, or `will-change` value that establishes a new containing block — sticky then sticks relative to THAT ancestor, not the viewport. `position:relative` on an ancestor does NOT break sticky by itself. What DOES break it is a same-specificity rule that sets `position` on the sticky element ITSELF later in source order — this is the documented services.html defect (ANGA spec §7 DEFECT row): `.svc-tabs{position:sticky}` (premium.css:419) loses to `.lit{position:relative}` (glow3.css:45) because `.lit` is also applied to the same
element and both rules share (0,1,0) specificity, so source order decides and glow3.css loads after premium.css. FIX: never put `.lit` (or any other class carrying a bare `position:` declaration) on the `.zx-tabs` element itself, and never nest `.zx-tabs` inside a `.zx-carousel-viewport`, `.svc-rail-wrap`, or any other overflow:hidden/auto ancestor. ================================================================ / body.zx .zx-tabs{ position: sticky; / ANGA's literal `top:-20px` (see block comment above) parks the rail 20px ABOVE the viewport top before any header is accounted for — the direct root cause of the sitewide occlusion in §3b. Every one of the 19 rail-bearing pages already overrides this with its own page-local `body.zx .zx-tabs{top:...}` rule, but those overrides are same-specificity (0,1,1) as this one, so whichever stylesheet loads LAST wins the cascade — some pages link zx-system.css BEFORE their own