/* Angstrom brand helpers (Brand Kit 2.0): headings, the slash device, section labels, rules, sphere, skeletons. Needs tokens.css. */
.ang-display, .ang-h1, .ang-h2, .ang-h3 { font-family: var(--brand-font); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ang-head-track); line-height: 1.04; margin: 0; }
.ang-display { font-size: clamp(40px, 6vw, var(--ang-display)); }
.ang-h1 { font-size: clamp(32px, 4.4vw, var(--ang-h1)); } .ang-h2 { font-size: var(--ang-h2); } .ang-h3 { font-size: var(--ang-h3); }
.ang-label { font-family: var(--label-font); font-weight: 600; font-size: 12px; letter-spacing: var(--ang-label-track); text-transform: uppercase; color: var(--ink-3); }
/* the double slash before a section label:  <span class="ang-kicker">Capabilities</span> */
.ang-kicker { font-family: var(--label-font); font-weight: 600; font-size: 13px; letter-spacing: var(--ang-label-track); text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: .7em; }
.ang-kicker::before { content: ""; width: 1.15em; height: .95em; flex: none;
  background: linear-gradient(var(--ang-red), var(--ang-red)) 0 0 / .28em 100% no-repeat, linear-gradient(var(--ang-red), var(--ang-red)) .6em 0 / .28em 100% no-repeat;
  transform: skewX(var(--ang-skew)); transform-origin: bottom left; }
.ang-slash { display: inline-block; width: .3em; height: 1em; background: var(--ang-red); transform: skewX(var(--ang-skew)); }
.ang-rule { height: 1px; border: 0; background: var(--line); margin: var(--ang-space-6) 0; position: relative; overflow: visible; }
.ang-rule::after { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 5px; background: var(--ang-red); transform: skewX(var(--ang-skew)); }
.ang-sphere { width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F46060 0, #E02424 18%, #C00000 55%, #7E0D10 86%, #5A0A0D 100%); display: inline-block; }
.ang-tab-skew { position: relative; isolation: isolate; } .ang-tab-skew::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--accent-soft); transform: skewX(var(--ang-skew)); }
.ang-grid-bg { background-color: var(--bg); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 32px 32px; }
.ang-skeleton { background: linear-gradient(100deg, var(--surface-2) 30%, var(--hover-2) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; animation: ang-shimmer 1.4s var(--ang-ease) infinite; border-radius: var(--radius-sm); }
@keyframes ang-shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .ang-skeleton { animation: none; } }