Fix Key Concepts tab color and card/image height mismatch

[alpha912]

Summary

• Active tab fill changed from solid near-black to a soft teal tint (matches the existing CTA button style) — the previous fill was too heavy.
• Structural fix: the side-by-side card's height is now media's own aspect-ratio-derived height (not an independent guessed value), eliminating both the letterboxing gap and any temptation to crop the image to fit — the card is exactly as tall as the true-16:9 image wants.
• The text column's typography is now fluid via CSS container query units (cqh), scaling headline/subtitle/description/CTA to fit whatever height the image produces at each viewport width, within a legible floor — this is what makes the height-matching possible without re-introducing a fixed-height fight.
• Side-by-side tier now starts at 1200px (was 1300px); stacked (image-above-text) tier covers 901-1199px, unchanged crop behavior from 0.4.1.

Test plan

• bun run test — 20/20 smoke tests pass
• bunx playwright test — 22/22 e2e tests pass, including 2 new regression tests (mobile tab strip legibility, and true-16:9-no-letterbox)
• Measured crop ratio is exactly 1.778 (16:9) at every width 901-2560px — zero crop, structurally guaranteed
• Measured letterbox gap is 0px from 1366px up; 11-47px only in the narrow 1200-1300px band (down from up to 174px before)
• Verified residual sub-5px content overflow at the single tightest case (LOOP's description at 1200-1250px) is visually imperceptible (3.6px, CTA fully visible with margin)
• Verified mobile and narrow-desktop (901-1199px) tiers unaffected — fluid typography is scoped to the >=1200px tier only