Variants:
(default) → column stack, button atop tagline.
Use in centered/symmetric heros and
centered closers (master /agents Act
5, spoke /api Act 1).
.cta-stack--inline → row, button left + tagline right.
Use in editorial column closers and
asymmetric heros (/home hero,
/agents/workflows Act 3, sub-page
closers).
Mobile collapse: at <600px the inline variant collapses to
column / align-items: stretch so the CTA fills the column.
Followups (separate PRs): migrate the per-page wrappers
(.ag-hero-cta, .ag-end-cta, .cli-hero-cta, .mc-closer-cta,
.mo-closer-cta, .bt-closer-cta, .sb-hero-cta, .ag-plugins-
end-cta, .ag-skills-end-cta, /agents/workflows
.ag-closer-cta-stack) to use this shared component. Each
migration removes ~12 lines of duplicated layout.
In use:
/agents/workflows Act 3 (--inline)
─────────────────────────────────────────────────────────── */
.cta-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.cta-stack--inline {
flex-direction: row;
align-items: center;
gap: clamp(16px, 1.8vw, 28px);
}
/* Centered variant — for symmetric compositions where the
stack reads as a single centered block (e.g. centered closer
acts like /products/monitor). Composes with the default or
inline variant. */
.cta-stack--center {
align-items: center;
text-align: center;
}
/* children default to align-self:flex-start (e.g. .link-cta); the centered
variant must win so a secondary link sits centered under the button. */
.cta-stack--center > * {
align-self: center;
}
@media (max-width: 600px) {
.cta-stack--inline {
flex-direction: column;
/* Hug contents (button sizes to its label, never full-bleed) and stay
LEFT — the common case is a left-aligned hero whose CTA must line up
with the H1/body above it. Centred closers opt back in below. */
align-items: flex-start;
gap: 12px;
}
/* Centred stacks keep centering when the row collapses to a column.
These page stacks declare justify-content:center for their desktop row
(centred closers + the two centred heroes ka-/px-); preserve that intent
via align-items now that the main axis is vertical. */
.cta-stack--center,
.aa-end-cta, .at-end-cta, .cr-end-cta, .ec-end-cta, .ex-closer-cta,
.fc-end-cta, .fi-end-cta, .ka-hero-cta, .lg-end-cta, .mr-end-cta,
.nm-end-cta, .px-hero-cta, .sm-end-cta, .srp-end-cta {
align-items: center;
}
}
.cta-stack-tag {
margin: 0;
font-family: var(--font-code, "IBM Plex Mono", monospace);
font-size: 12px;
letter-spacing: 0.04em;
line-height: 1.4;
color: var(--text-tertiary);
}
/* ──────────────────────────────────────────────────────────
.seg-control — Segmented control DS atom.
One inline group of 2-4 mutually-exclusive options where
one is "active" and clicking another swaps state. Three
visual flavors (same structure + a11y semantics, cosmetic
differences only):
(default) → pill container, active = white
fill on dark / dark text
.seg-control--brand → pill container, active = brand
purple fill / white text
.seg-control--underline → no container, active = underline
reveal (::after scaleX from left)
Sizes (apply to the container):
(default) → 32px tall, 12px label
.seg-control--md → 40px tall, 13px label
State markers — atom listens to all three for compatibility,
but pick ONE per usage and use it consistently:
[aria-selected="true"] for role="tab"
[aria-checked="true"] for role="radio"
.is-active JS-driven, no a11y semantics
Markup (radio group, default pill flavor):