Not applicable: Each button carries its own hover.
focus-visible
Not applicable: The pair does not take focus; links and buttons inside it carry their own focus ring.
active
Not applicable: The pair cannot be pressed.
disabled
Not applicable: The pair has nothing to disable.
loading
Not applicable: The pair is rendered at build time and is complete when the page loads.
empty
Not applicable: The pair is not rendered without content; the builder skips it.
error
Not applicable: The pair shows no data that can fail.
current
Not applicable: The pair has no current item.
visited
Not applicable: The pair is not a link.
expanded
Not applicable: The pair does not open or close.
Tokens
Part
Token
root.gap
--space-5
root.display
flex, wrap
--cta-pair-gap-space-5
var(--space-5)
--cta-pair-margin-top-space-8
var(--space-8)
Layout
Aspect
Value
breakpoints
Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; stacks full width under 600 px.
wrapping
The buttons wrap onto two rows.
textExpansion
Japanese labels fit; long labels wrap inside each button.
Spacing and rhythm
Aspect
Value
internal
--space-5 between buttons.
external
--space-9 above in the hero (D-SITE-005).
rhythm
Last in a hero or CTA section.
Motion
Aspect
Value
None
The buttons move; the pair does not.
Runtime and reuse
Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
Aspect
Value
role
group of links
name
Each button's label
keyboard
Tab from primary to secondary.
focus
Primary first.
screenReader
Two links in order.
contrast
As the button.
target
48 px each.
Content
Slot
Length
Voice
primary.label
4 words
cta.primary
secondary.label
6 words
cta.secondary
Good: “Book a conversation / Start with a free health check”
Bad: “Contact / Learn more / Pricing”
Japanese: 相談する / 無料で診断する（約3分） from content tokens.