| s become labelled key/value rows so users
never need to scroll horizontally on a phone. */
@media (max-width: 480px) {
.sk-table-scroll {
overflow-x: visible;
background: none;
}
.sk-table-scroll table { min-width: 0; }
.sk-compare-table,
.sk-compare-table tbody,
.sk-compare-table tr,
.sk-compare-table th,
.sk-compare-table td {
display: block;
width: 100%;
}
.sk-compare-table thead { display: none; }
.sk-compare-table tr {
border: 1px solid var(--sk-border);
border-radius: 6px;
background: var(--sk-bg-card);
margin-bottom: 12px;
padding: 14px 16px;
}
.sk-compare-table tbody tr:hover td,
.sk-compare-table tbody tr:hover .sk-compare-hl { background: transparent; }
.sk-compare-table th[scope="row"].sk-compare-rowhead {
border: none;
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid var(--sk-border);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sk-fg-dim);
}
.sk-compare-table td {
border: none;
padding: 5px 0;
display: grid;
grid-template-columns: 7.25rem minmax(0, 1fr);
column-gap: 12px;
align-items: baseline;
background: transparent;
}
.sk-compare-table td.sk-compare-hl { background: transparent; }
.sk-compare-table td::before {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sk-fg-dim);
}
.sk-compare-table td:nth-of-type(1)::before { content: 'SafeKernels'; color: var(--sk-cyan); }
.sk-compare-table td:nth-of-type(2)::before { content: 'LLM guards'; }
.sk-compare-table td:nth-of-type(3)::before { content: 'Vendor PLCs'; }
.sk-compare-table td:nth-of-type(4)::before { content: 'In-house'; }
}
/* ============================================================
Section spacing, tighten the marketing-template defaults.
Base style.css uses 120/100/90/60 at descending breakpoints which
reads as huge dead air on dense content pages. Override globally.
============================================================ */
.section-spacing-top-120 { padding-top: 80px; }
.section-spacing-bottom-120 { padding-bottom: 80px; }
.section-spacing-120 { padding-top: 80px; padding-bottom: 80px; }
/* Continuous transition: selectively halve the top gap when a section
reads as a continuation of the previous one rather than a fresh chapter. */
.section-spacing-120.sk-section--continuous { padding-top: 40px; }
.section-spacing-top-100 { padding-top: 72px; }
.section-spacing-bottom-100 { padding-bottom: 72px; }
@media (max-width: 1199px) {
.section-spacing-top-120, .section-spacing-bottom-120,
.section-spacing-top-100, .section-spacing-bottom-100 { padding-top: 60px; padding-bottom: 60px; }
.section-spacing-top-120, .section-spacing-top-100 { padding-bottom: 0; }
.section-spacing-bottom-120, .section-spacing-bottom-100 { padding-top: 0; }
.section-spacing-120 { padding-top: 60px; padding-bottom: 60px; }
}
@media (max-width: 720px) {
.section-spacing-top-120, .section-spacing-top-100 { padding-top: 48px; }
.section-spacing-bottom-120, .section-spacing-bottom-100 { padding-bottom: 48px; }
.section-spacing-120 { padding-top: 48px; padding-bottom: 48px; }
}
/* ============================================================
Active nav state, current page link in main nav
============================================================ */
/* Nav tab indicator. Color shift + glow underline only — no leading pip. */
.main-menu ul li a {
position: relative;
transition: color 0.2s ease, letter-spacing 0.2s ease;
}
/* Tighter tab link box. style.pruned.css ships `padding: 38px 26px` (default)
and `36px 12px` at ≤1919px on the same selector — the 36–38px vertical
leaves the header divider stranded ~28px below the active underline glow,
and the 12px sides leave labels cramped. Tighten vertical to 22px so the
divider rides just under the underline, and bump horizontal to 22px for
breathing room between labels. Match the selector exactly so cascade order
(brand-override loads after style.pruned.css) lets these values win. */
.header-area .main-menu li a {
padding: 22px 22px;
}
/* Glow underline. The line is a horizontal beam — gradient that fades to
transparent at both ends — so it reads as light bleeding under the label,
not a flat highlighter mark. Animated via transform: scaleX
(compositor-only) instead of width (triggers layout). Anchored ~8px below
the text baseline (not the link's outer bottom) so it reads as an
underline, not a glow on the header divider. */
.main-menu ul li a::after {
content: "";
position: absolute;
left: 50%;
bottom: 14px;
width: 70%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sk-cyan), transparent);
transform: translateX(-50%) scaleX(0);
transform-origin: left;
transition: transform 200ms var(--sk-ease), opacity 0.2s ease;
opacity: 0;
}
.main-menu ul li a:hover { color: var(--sk-cyan); }
.main-menu ul li a:hover::after { transform: translateX(-50%) scaleX(1); opacity: 0.55; }
.main-menu ul li a.is-active {
color: var(--sk-cyan) !important;
letter-spacing: 0.04em;
}
.main-menu ul li a.is-active::after {
/* Active: 100% wide (vs 70% on hover). Re-anchor left:0 + drop translate so
scaleX(1) stretches edge-to-edge under the label. */
left: 0;
width: 100%;
transform: scaleX(1);
opacity: 1;
height: 1px;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.55);
}
/* Mobile menu trigger and close affordances. Stackly's original hamburger
drew only the two 26x2px bars, which left a tiny touch target. */
.header__navicon .bar-icon {
width: 44px !important;
height: 44px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-direction: column;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
}
.header-area .header-right .side-toggle .bar-icon span,
.header__navicon .bar-icon span {
flex: 0 0 2px;
width: 26px;
height: 2px;
background: var(--sk-fg) !important;
}
.header__navicon .bar-icon:hover,
.header__navicon .bar-icon:focus-visible {
border-color: var(--sk-border);
}
.side-info-close {
width: 44px !important;
height: 44px !important;
border-radius: 4px !important;
border-color: var(--sk-border) !important;
color: var(--sk-fg) !important;
}
body.sk-panel-open {
overflow: hidden;
}
/* ============================================================
Sticky "Schedule a call" CTA, desktop right-rail
============================================================ */
.sk-sticky-cta {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 998;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
min-height: 44px;
background: var(--sk-cyan);
color: var(--sk-bg);
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 8px 24px rgba(var(--sk-cyan-rgb), 0.28), 0 2px 8px rgba(var(--sk-bg-rgb), 0.4);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sk-sticky-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(var(--sk-cyan-rgb), 0.4), 0 4px 12px rgba(var(--sk-bg-rgb), 0.5);
color: var(--sk-bg);
background: var(--sk-fg);
}
.sk-sticky-cta__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sk-bg);
box-shadow: 0 0 0 0 rgba(10, 11, 15, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
.sk-sticky-cta__dot { animation: sk-sticky-pulse 2.4s infinite; }
}
@keyframes sk-sticky-pulse {
0% { box-shadow: 0 0 0 0 rgba(10, 11, 15, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(10, 11, 15, 0); }
100% { box-shadow: 0 0 0 0 rgba(10, 11, 15, 0); }
}
@media (max-width: 720px) {
/* Avoid covering first-fold proof strips, form submit, and footer mailto. */
.sk-sticky-cta { display: none; }
}
.sk-sticky-cta { display: none !important; }
/* ============================================================
Footer top row, wordmark + email capture inline
============================================================ */
.sk-footer-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
padding-bottom: 36px;
border-bottom: 1px solid var(--sk-border);
margin-bottom: 36px;
flex-wrap: wrap;
}
.sk-footer-top .footer-5__logo { flex: 0 0 auto; margin: 0; padding-top: 4px; }
/* Footer brand stack: wordmark + one-line descriptor.
Balances visual weight on the left so the capture block on the
right doesn't feel orphaned in 800px of empty middle. */
.sk-footer-brand {
display: flex !important;
flex-direction: column;
gap: 12px;
flex: 0 1 380px !important;
}
.sk-footer-brand__tag {
margin: 0;
font-size: 0.92rem;
color: var(--sk-fg-muted);
line-height: 1.5;
max-width: 340px;
}
@media (max-width: 720px) {
.sk-footer-brand__tag { max-width: none; }
}
/* Footer "Field notes" capture: vertical stack on the right.
Eyebrow > copy > button. Right-aligned to the column edge. */
.sk-footer-capture {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
flex: 0 1 420px;
min-width: 0;
text-align: right;
}
.sk-footer-capture__eyebrow {
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sk-cyan);
}
.sk-footer-capture__copy {
margin: 0;
max-width: 380px;
font-size: 0.94rem;
color: var(--sk-fg-muted);
line-height: 1.5;
}
@media (max-width: 720px) {
.sk-footer-capture {
align-items: flex-start;
text-align: left;
flex-basis: 100%;
}
}
.sk-footer-capture__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
min-height: 44px;
background: transparent;
color: var(--sk-cyan) !important;
border: 1px solid var(--sk-cyan);
border-radius: 3px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.sk-footer-capture__link:hover {
background: var(--sk-cyan);
color: var(--sk-bg) !important;
}
.sk-footer-capture__link span { transition: transform 0.18s ease; }
.sk-footer-capture__link:hover span { transform: translateX(3px); }
.sk-wordmark,
.footer-5__area a,
.sk-contact-card__list a,
main li a:not([class]) {
min-height: 44px;
}
.sk-wordmark,
.footer-5__area a,
.sk-contact-card__list a,
main li a:not([class]) {
display: inline-flex;
align-items: center;
}
.footer-5__area ul a {
padding-block: 3px;
}
@media (max-width: 860px) {
.sk-footer-top { gap: 18px; }
.sk-footer-capture { justify-content: flex-start; flex-basis: 100%; }
.sk-footer-capture__copy { text-align: left; max-width: none; }
}
/* ============================================================
Home: ICP "fit if" block
============================================================ */
.sk-fit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
.sk-fit__col {
padding: 24px 26px;
border: 1px solid var(--sk-border);
border-radius: 6px;
background: rgba(var(--sk-fg-rgb), 0.015);
}
.sk-fit__col--yes { border-color: rgba(0, 212, 255, 0.45); background: rgba(0, 212, 255, 0.04); }
.sk-fit__head {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 14px;
}
.sk-fit__col--yes .sk-fit__head { color: var(--sk-cyan); }
.sk-fit__col--no .sk-fit__head { color: var(--sk-fg-dim); }
.sk-fit__list { list-style: none; padding: 0; margin: 0; }
.sk-fit__list li {
padding: 8px 0 8px 26px;
position: relative;
font-size: 0.92rem;
line-height: 1.45;
border-bottom: 1px solid rgba(var(--sk-fg-rgb), 0.04);
}
.sk-fit__list li:last-child { border-bottom: none; }
.sk-fit__list li::before {
position: absolute;
left: 0;
top: 8px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.9rem;
}
.sk-fit__col--yes .sk-fit__list li::before { content: "✓"; color: var(--sk-cyan); }
.sk-fit__col--no .sk-fit__list li::before { content: "✕"; color: var(--sk-fg-dim); }
@media (max-width: 720px) {
.sk-fit { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
Home: Design partners strip (anonymized)
============================================================ */
.sk-partners {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sk-partner {
padding: 22px 22px;
border: 1px solid var(--sk-border);
border-radius: 6px;
background: rgba(var(--sk-fg-rgb), 0.015);
}
.sk-partner__badge {
display: inline-block;
padding: 4px 10px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sk-cyan);
border: 1px solid rgba(0, 212, 255, 0.4);
border-radius: 999px;
margin-bottom: 12px;
}
.sk-partner__name { font-size: 0.95rem; margin: 0 0 6px; }
.sk-partner__line { font-size: 0.84rem; color: var(--sk-fg-muted); margin: 0; line-height: 1.45; }
.sk-partner__status {
display: block;
margin-top: 14px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sk-fg-dim);
}
@media (max-width: 720px) {
.sk-partners { grid-template-columns: 1fr; }
}
/* ============================================================
Contact form fields, labelled and labelled-for
============================================================ */
.sk-field { margin-bottom: 16px; }
.sk-field__label {
display: block;
margin-bottom: 6px;
font-size: 0.85rem;
color: var(--sk-fg-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sk-field__input {
width: 100%;
box-sizing: border-box;
min-height: 44px;
padding: 12px 14px;
}
.sk-form-required-hint {
margin: 0 0 14px;
font-size: 0.78rem;
color: var(--sk-fg-dim);
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0.04em;
}
.sk-required-mark {
color: var(--sk-cyan);
margin-left: 2px;
font-weight: 600;
}
/* Direct-contact card on the contact page. Replaces inline padding/font/list
styling that previously bypassed the token system. */
.sk-contact-card {
display: block;
padding: 32px;
background: var(--sk-bg-card);
border: 1px solid var(--sk-border);
border-radius: 8px;
}
.sk-contact-card__title { font-size: 1.05rem; margin: 0; }
.sk-contact-card__list {
margin-top: 16px;
padding: 0;
list-style: none;
line-height: 2.2;
}
.sk-contact-card__icon {
color: var(--sk-cyan);
margin-right: 10px;
}
.sk-contact-card__rule {
margin: 24px 0;
border: 0;
border-top: 1px solid var(--sk-border);
}
.sk-contact-card__loc {
font-size: 0.85rem;
color: var(--sk-fg-muted);
margin: 0;
}
/* Per-field inline error message. Empty by default; populated when
aria-invalid="true". role="alert" announces on appearance. */
.sk-field__error {
display: block;
min-height: 0;
margin-top: 8px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--sk-red);
}
.sk-field__error:empty { display: none; }
/* Invalid-state border on inputs/selects/textareas. */
.sk-field__input[aria-invalid="true"] {
border-color: var(--sk-red) !important;
}
/* ============================================================
Contact form success state
============================================================ */
.sk-form-msg {
margin-top: 16px;
padding: 14px 16px;
border-radius: 4px;
font-size: 0.9rem;
display: none;
}
.sk-form-msg--ok {
background: rgba(0, 212, 255, 0.08);
border: 1px solid rgba(0, 212, 255, 0.4);
color: var(--sk-cyan);
}
.sk-form-msg.is-shown { display: block; }
.sk-mail-fallback {
margin-top: 18px;
padding: 18px;
border: 1px solid var(--sk-border);
border-radius: 6px;
background: var(--sk-bg-card);
}
.sk-mail-fallback[hidden] { display: none; }
.sk-mail-fallback__copy {
margin: 0 0 12px;
color: var(--sk-fg-muted);
}
.sk-mail-fallback__summary {
width: 100%;
min-height: 190px;
resize: vertical;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
font-size: 0.78rem;
line-height: 1.55;
}
.sk-mail-fallback__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.sk-form-privacy {
margin-top: 14px;
font-size: 0.8rem;
color: var(--sk-fg-dim);
}
.sk-form-privacy a { color: var(--sk-fg-muted); border-bottom: 1px solid var(--sk-border); }
/* ============================================================
Platform: jump-to section nav
============================================================ */
.sk-section-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
justify-content: center;
}
.sk-section-nav a {
padding: 8px 14px;
border: 1px solid var(--sk-border);
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sk-fg-muted);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sk-section-nav a:hover {
border-color: var(--sk-cyan);
color: var(--sk-cyan);
background: rgba(0, 212, 255, 0.04);
}
/* Inline section CTA chip, quiet "Talk to engineering" link after a section */
.sk-section-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 10px 16px;
border: 1px solid rgba(0, 212, 255, 0.35);
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sk-cyan);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.sk-section-cta:hover { background: rgba(0, 212, 255, 0.08); border-color: var(--sk-cyan); color: var(--sk-cyan); }
.sk-section-cta::after { content: "→"; font-size: 0.95rem; }
/* === Reduced motion: kill infinite animations ===
Off-switch for any animation declared unconditionally above (not already
gated on `prefers-reduced-motion: no-preference`). The KG schematic and HMI
pulse loop forever — disable them for users who request reduced motion.
Already-gated animations (sk-led-pulse, sk-trust-dot,
.sk-hero-schematic.is-in .hd-*) do not need to be repeated here. */
@media (prefers-reduced-motion: reduce) {
.sk-kg .kg-edge--active,
.sk-kg .kg-node--active .kg-pulse,
.sk-kg .kg-dot--active,
.sk-hmi__pulse {
animation: none !important;
}
/* SVG : max-width 760, top margin 20, centered. */
.sk-hero-dec { max-width: 760px; margin: 20px auto 0; }
/* CTA-banner subhead: tight grey paragraph next to a heading. */
.sk-cta-sub { margin: 12px 0 0; max-width: 560px; color: var(--sk-fg-muted); }
/* CTA banner shell (final CTA, page-end punctuation).
Glowing cyan accent at the top, deeper bg, bigger title in this context,
secondary link next to the primary button. */
.sk-cta-banner {
position: relative;
background-color: var(--sk-bg-alt) !important;
border-top: none;
border-bottom: 1px solid var(--sk-border);
padding: 104px 0 96px;
}
.sk-cta-banner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
rgba(0, 212, 255, 0) 0%,
rgba(0, 212, 255, 0.55) 22%,
rgba(0, 212, 255, 0.95) 50%,
rgba(0, 212, 255, 0.55) 78%,
rgba(0, 212, 255, 0) 100%);
box-shadow: 0 0 18px rgba(0, 212, 255, 0.4);
pointer-events: none;
}
.sk-cta-banner .sk-h-cta {
font-size: clamp(2rem, 3.4vw, 2.55rem);
line-height: 1.18;
letter-spacing: -0.005em;
}
@media (max-width: 720px) {
.sk-cta-banner { padding: 80px 0 72px; }
}
/* Footnote rule under a card body. */
.sk-fineprint {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--sk-border);
font-size: 0.85rem;
color: var(--sk-fg-dim);
}
/* Bulleted feature list spacing inside cards. */
.sk-feature-list { margin-top: 12px; padding-left: 20px; line-height: 1.9; }
/* Section-level alt band (paired-row backgrounds). */
.sk-section-alt { background-color: var(--sk-bg-alt) !important; }
/* Visually-hidden, screen-reader-only. Replaces 4× inline clip-rect. */
.sk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Per-card mini-eyebrow (inside a card, smaller than .sub-title).
fg-dim by default; only opt into .sk-c-cyan when the label is
actually state-bearing (e.g. SHIPPING, LIVE). */
.sk-mini-eyebrow {
display: block;
margin-bottom: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sk-fg-dim);
}
/* === Layout utilities ===
Promoted from inline styles in _build_pages.py and the static pages so
the breakpoint system, dark-token palette, and motion vocabulary stay in
one place. Add new utilities here rather than re-introducing inline
`style=""` blocks. */
/* Phrase grouping for display headings: wrap parallel clauses
("One X. One Y. One Z.") in so the browser
can wrap *between* clauses but never *within* one. Avoids ugly
mid-clause splits like "One shared / graph". */
.sk-nobr { white-space: nowrap; }
/* Spacing — margin-top */
.sk-mt-8 { margin-top: 8px; }
.sk-mt-10 { margin-top: 10px; }
.sk-mt-12 { margin-top: 12px; }
.sk-mt-14 { margin-top: 14px; }
.sk-mt-16 { margin-top: 16px; }
.sk-mt-20 { margin-top: 20px; }
.sk-mt-24 { margin-top: 24px; }
.sk-mt-32 { margin-top: 32px; }
.sk-mt-40 { margin-top: 40px; }
/* margin-top, but rendered as a block so it can be applied to inline-by-default
anchor CTAs without losing the gap. */
.sk-mt-20-block { display: inline-block; margin-top: 20px; }
/* Spacing — margin-bottom */
.sk-mb-16 { margin-bottom: 16px; }
.sk-mb-20 { margin-bottom: 20px; }
.sk-mb-24 { margin-bottom: 24px; }
.sk-mb-40 { margin-bottom: 40px; }
/* Row utility used directly on .row containers */
.sk-row-mb-8 { margin-bottom: 8px; }
.sk-row-mb-40 { margin-bottom: 40px; }
/* Row gap */
.sk-row-gap-20 { row-gap: 20px; }
.sk-row-gap-24 { row-gap: 24px; }
.sk-row-gap-32 { row-gap: 32px; }
/* Width and prose */
.sk-mw-560 { max-width: 560px; }
.sk-mw-640 { max-width: 640px; }
.sk-mw-680 { max-width: 680px; }
.sk-mw-760 { max-width: 760px; }
.sk-prose-center { max-width: 680px; margin-left: auto; margin-right: auto; }
.sk-text-right { text-align: right; }
/* Color */
.sk-fg-muted { color: var(--sk-fg-muted); }
.sk-fg-dim { color: var(--sk-fg-dim); }
.sk-c-dim { color: var(--sk-fg-dim); }
/* Typography size helpers */
.sk-text-xs { font-size: 0.85rem; }
.sk-text-sm { font-size: 0.92rem; }
/* Section background variant — replaces inline
style="background-color: var(--sk-bg-alt) !important;" on |