/* Design system specimen page (temporary — neuwo-design-system branch). */

.ds-page {
  padding: var(--space-12) 0 var(--space-24);
}

.ds-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (min-width: 64rem) {
  .ds-page__inner {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-16);
    padding: 0 var(--space-8);
  }
}

/* ---------- Sidebar TOC ---------- */
.ds-toc {
  align-self: start;
}

@media (min-width: 64rem) {
  .ds-toc {
    position: sticky;
    top: var(--space-8);
  }
}

.ds-toc__home {
  display: inline-block;
  padding: 0 var(--space-3);
  border-left: 2px solid transparent;
  margin: 0 0 var(--space-6);
  transition: opacity var(--transition-fast);
}

.ds-toc__home:hover,
.ds-toc__home:focus-visible {
  text-decoration: none;
  outline: none;
  opacity: 0.85;
}

.ds-toc__home-logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.ds-toc__list,
.ds-toc__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ds-toc__list {
  gap: 0.125rem;
}

.ds-toc__group + .ds-toc__group {
  margin-top: var(--space-1);
}

.ds-toc__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.ds-toc__link:hover {
  color: var(--color-text);
  background: var(--glass-bg-light);
}

.ds-toc__link--active {
  color: var(--color-heading);
  font-weight: 600;
  background: var(--glass-bg);
  border-left-color: var(--color-blue);
}

.ds-toc__sublist {
  gap: 0;
  margin: var(--space-1) 0 var(--space-2) 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--glass-border);
  margin-left: var(--space-3);
}

.ds-toc__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.375rem var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ds-toc__sublink:hover {
  color: var(--color-text);
  background: var(--glass-bg-light);
}

.ds-toc__sublink--soon {
  opacity: 0.55;
}

.ds-toc__sublink--soon:hover {
  opacity: 0.8;
}

.ds-toc__badge {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.0625rem 0.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--glass-bg-light);
  flex-shrink: 0;
}

/* ---------- Page header ---------- */
.ds-content {
  min-width: 0;
}

.ds-header {
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--glass-border);
}

.ds-header__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin: 0 0 var(--space-3);
}

.ds-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  margin: 0 0 var(--space-5);
}

.ds-header__lead {
  font-size: var(--font-size-lg);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 50rem;
  margin: 0;
}

/* ---------- Sections ---------- */
.ds-section {
  margin-bottom: var(--space-24);
  scroll-margin-top: 6rem;
}

.ds-section__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.ds-section__intro {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 50rem;
  margin: 0 0 var(--space-12);
}

.ds-section__intro strong {
  color: var(--color-text);
  font-weight: 600;
}

.ds-block {
  margin-bottom: var(--space-12);
}

.ds-block__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}

.ds-block__intro {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  max-width: 45rem;
}

.ds-block__intro code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
}

/* ---------- Font family cards ---------- */
.ds-families {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ds-families { grid-template-columns: repeat(2, 1fr); }
}

.ds-family {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-family__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.ds-family__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  letter-spacing: -0.02em;
}

.ds-family__role {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-family__alphabet {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0 0 var(--space-5);
  word-spacing: 0.15em;
}

.ds-family--heading .ds-family__alphabet,
.ds-family--heading .ds-family__weight {
  font-family: var(--font-heading);
}

.ds-family--text .ds-family__alphabet,
.ds-family--text .ds-family__weight {
  font-family: var(--font-text);
}

.ds-family__weights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-family__weight {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.ds-family__weight-num {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 2.5rem;
}

/* ---------- Type scale ---------- */
.ds-scale {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-scale__row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 9.5rem) minmax(4.5rem, 5.5rem) 1fr;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-2);
}

.ds-scale__row + .ds-scale__row {
  border-top: 1px solid var(--glass-border);
}

.ds-scale__token,
.ds-scale__size {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ds-scale__token { color: var(--color-blue-light); }
.ds-scale__size { color: var(--color-text-muted); }

.ds-scale__sample {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Role cards ---------- */
.ds-roles {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .ds-roles--two-col { grid-template-columns: repeat(2, 1fr); }
}

.ds-role {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.ds-role__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.ds-role__recipe {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: var(--color-grey-100);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ds-role__sample {
  margin: 0 0 var(--space-5);
  color: var(--color-heading);
}

.ds-role__sample:last-child { margin-bottom: 0; }

.ds-role__usage {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-role__usage code,
.ds-role__refs code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-role__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.ds-role__refs {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px dashed var(--glass-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.ds-role__refs li {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.ds-role__refs-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ds-role__refs a {
  color: var(--color-blue-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ds-role__refs a:hover,
.ds-role__refs a:focus-visible {
  color: var(--color-blue);
  border-bottom-color: currentColor;
}

/* ---------- Sample-class recipes (mirror production rules) ---------- */
.ds-sample--display {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ds-sample--section {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
}

.ds-sample--subsection {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.3;
}

.ds-sample--body-lg {
  font-family: var(--font-text);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
}

.ds-sample--body {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

.ds-sample--article {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text);
}

.ds-sample--meta {
  font-family: var(--font-text);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Eyebrow variant row -- canonical kicker recipe in its three brand colours */
.ds-eyebrows {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-5);
  padding: var(--space-2) 0;
}

a.ds-eyebrows__item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

a.ds-eyebrows__item:hover {
  transform: translateY(-1px);
}

a.ds-eyebrows__item:hover .ds-eyebrows__caption code {
  color: var(--color-blue);
}

.ds-eyebrows__caption {
  font-family: var(--font-text);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-muted);
}

.ds-eyebrows__caption code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

/* Canonical eyebrow recipe + colour variants */
.ds-eyebrow-sample {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ds-eyebrow-sample--blue  { color: var(--color-blue); }
.ds-eyebrow-sample--green { color: var(--color-green); }

.ds-sample--footer-heading {
  font-family: var(--font-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
}

.ds-sample--label {
  font-family: var(--font-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-heading);
}

.ds-sample--muted-title {
  font-family: var(--font-text);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (min-width: 48rem) {
  .ds-sample--muted-title {
    font-size: var(--font-size-3xl);
  }
}

/* Highlight: Lumi green-only diagonal */
.ds-sample--highlight em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: #0000;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Highlight: primary accent -- shared --gradient-accent token */
.ds-sample--highlight-landing em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  color: #0000;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Highlight: solution + about hero -- shared --gradient-accent-shimmer token */
.ds-sample--highlight-shimmer em {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  background: var(--gradient-accent-shimmer);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ds-shimmer 4s ease-in-out infinite;
}

@keyframes ds-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-sample--highlight-shimmer em {
    animation: none;
  }
}

/* ---------- Colour swatches ---------- */
.ds-swatches {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .ds-swatches { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .ds-swatches { grid-template-columns: repeat(3, 1fr); }
}

.ds-swatch {
  display: grid;
  grid-template-rows: 12rem 1fr;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-swatch--no-body {
  grid-template-rows: 12rem auto;
}

.ds-swatch__chip {
  position: relative;
  border-bottom: 1px solid var(--glass-border);
}

.ds-swatch__chip--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-solid);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ds-swatch__chip--checker {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--color-blue) 70%, var(--color-grey-50)) 0 1.5rem,
      color-mix(in srgb, var(--color-green) 70%, var(--color-grey-50)) 1.5rem 3rem
    );
}

.ds-swatch__chip--checker::after {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border-radius: var(--radius-md);
}

.ds-swatch__chip--glass-bg::after        { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.ds-swatch__chip--glass-bg-light::after  { background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.ds-swatch__chip--glass-border::after    { background: transparent; border: 1px solid var(--glass-border); }
.ds-swatch__chip--glass-border-hover::after { background: transparent; border: 1px solid var(--glass-border-hover); }

.ds-swatch__chip--gradient-accent {
  background: var(--gradient-accent);
}

.ds-swatch__chip--gradient-shimmer {
  background: var(--gradient-accent-shimmer);
  background-size: 200% 100%;
  animation: ds-shimmer 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-swatch__chip--gradient-shimmer { animation: none; }
}

.ds-swatch__chip--grid {
  background:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px) 0 0 / 100% 1.25rem,
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px) 0 0 / 1.25rem 100%,
    var(--color-body-bg);
}

.ds-swatch__chip--shimmer {
  background:
    linear-gradient(90deg, transparent, var(--color-shimmer), transparent),
    var(--color-grey-100);
  background-size: 50% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  animation: ds-shimmer-sweep 2.4s ease-in-out infinite;
}

@keyframes ds-shimmer-sweep {
  0%   { background-position: -50% 0, 0 0; }
  100% { background-position: 150% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-swatch__chip--shimmer { animation: none; }
}

.ds-swatch__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: grid;
  gap: 0.25rem;
}

.ds-swatch__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-swatch__value-row {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0 calc(var(--space-2) * -1);
}

.ds-swatch__value {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: transparent;
  padding: 0.25rem var(--space-2);
  border-radius: var(--radius-sm);
  word-break: break-all;
  user-select: text;
  cursor: text;
}

.ds-swatch__copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.ds-swatch__copy:hover,
.ds-swatch__copy:focus-visible {
  color: var(--color-text);
  background: var(--color-grey-100);
  border-color: var(--glass-border);
  outline: none;
}

.ds-swatch__copy--copied,
.ds-swatch__copy--copied:hover {
  color: var(--color-green);
  border-color: color-mix(in srgb, var(--color-green) 30%, transparent);
  background: transparent;
}

.ds-swatch__copy-icon {
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ds-swatch__copy-icon--check { display: none; }
.ds-swatch__copy--copied .ds-swatch__copy-icon--copy { display: none; }
.ds-swatch__copy--copied .ds-swatch__copy-icon--check { display: block; }

.ds-swatch__usage {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.ds-block__cross-ref {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
}

.ds-block__cross-ref a {
  color: var(--color-blue-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ds-block__cross-ref a:hover,
.ds-block__cross-ref a:focus-visible {
  color: var(--color-blue);
  border-bottom-color: currentColor;
}

/* ---------- Brand: logo grid ---------- */
.ds-logos {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ds-logos { grid-template-columns: repeat(2, 1fr); }
}

.ds-logo {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-logo__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  min-height: 9rem;
  border-bottom: 1px solid var(--glass-border);
}

.ds-logo__stage--white   { background: var(--color-white); }
.ds-logo__stage--cyan    { background: var(--color-blue); }
.ds-logo__stage--surface { background: var(--color-surface-solid); }
.ds-logo__stage--body    { background: var(--color-body-bg); }

.ds-logo__img {
  display: block;
  width: 14rem;
  height: auto;
  max-width: 100%;
}

.ds-logo__meta {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-logo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ds-logo__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ds-logo__pill {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-full);
  padding: 0.125rem 0.5rem;
}

.ds-logo__file {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-grey-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-logo__usage {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-logo__usage code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- Brand: logo usage rules ---------- */
.ds-rules {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ds-rules { grid-template-columns: repeat(2, 1fr); }
}

.ds-rules__col {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-rules__col--do   { border-top: 3px solid var(--color-green); }
.ds-rules__col--dont { border-top: 3px solid var(--color-text-muted); }

.ds-rules__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

.ds-rules__col--do   .ds-rules__heading { color: var(--color-green); }
.ds-rules__col--dont .ds-rules__heading { color: var(--color-text-muted); }

.ds-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-rules__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.ds-rules__col--do   .ds-rules__list li::before,
.ds-rules__col--dont .ds-rules__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
}

.ds-rules__col--do   .ds-rules__list li::before { background: var(--color-green); }
.ds-rules__col--dont .ds-rules__list li::before { background: var(--color-text-muted); opacity: 0.6; }

/* ---------- Brand: favicon ---------- */
.ds-favicons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-body-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

.ds-favicon {
  margin: 0;
  flex: 1 1 8rem;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background:
    repeating-conic-gradient(
      var(--color-grey-100) 0 25%,
      var(--color-grey-50) 0 50%
    ) 0 0 / 1rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.ds-favicon__img {
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.ds-favicon__caption {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-heading);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ds-favicon__caption span {
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ---------- Code block primitive ---------- */
.ds-code {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-grey-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.ds-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre;
}

/* ---------- Surface specimens ---------- */
.ds-role--span-2 {
  grid-column: 1 / -1;
}

.ds-role__split {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .ds-role__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ds-role__split > .ds-role__sample,
.ds-role__split > .ds-code {
  margin: 0;
  align-self: stretch;
}

.ds-role__sample--surface {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, oklch(66.623% 0.1177 217.10 / 0.15) 0%, transparent 100%),
    radial-gradient(ellipse 40% 50% at 75% 15%, oklch(77.183% 0.1766 131.692 / 0.11) 0%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 60%, oklch(66.623% 0.1177 217.10 / 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 45% 45% at 80% 70%, oklch(77.183% 0.1766 131.692 / 0.08) 0%, transparent 100%),
    var(--color-body-bg);
}

.ds-surface-card {
  position: absolute;
  inset: var(--space-5);
  border-radius: var(--radius-lg);
}

.ds-surface-card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

.ds-surface-card--glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.ds-surface-card--glass-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line-light) 1px, transparent 1px);
  background-size: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  mask-image:
    linear-gradient(to right, transparent, black 25%, black 75%, transparent),
    linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 25%, black 75%, transparent),
    linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-composite: source-in;
  pointer-events: none;
}

.ds-surface-card--glass-blob {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.ds-surface-card--solid {
  background: var(--color-surface-solid);
  border: 1px solid var(--glass-border);
}

.ds-surface-card--glass-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-green) 18%, transparent) 0, transparent 55%),
    radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--color-blue) 16%, transparent) 0, transparent 55%);
  pointer-events: none;
}

/* ---------- Components: button specimens ---------- */
.ds-btns {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ds-btns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .ds-btns--triple { grid-template-columns: repeat(3, 1fr); }
}

.ds-btn-spec {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-btn-spec__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  min-height: 9rem;
  border-bottom: 1px solid var(--glass-border);
}

.ds-btn-spec__stage--surface { background: var(--color-surface-solid); }
.ds-btn-spec__stage--body    { background: var(--color-body-bg); }
.ds-btn-spec__stage--blue    { background: var(--color-blue); }

/* Specimen-only override: the announcement-bar close is absolutely positioned
   in production so it pins to the bar edge -- inside the stage we want it to
   sit naturally in the flex centring. */
.ds-btn-spec__stage .announcement-bar__close {
  position: static;
  transform: none;
}

.ds-btn-spec__stage--gradient {
  background:
    radial-gradient(circle at 20% 30%, oklch(66.623% 0.1177 217.10 / 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, oklch(77.183% 0.1766 131.692 / 0.14), transparent 55%),
    var(--color-body-bg);
}

.ds-btn-spec__meta {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-btn-spec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ds-btn-spec__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.ds-btn-spec__class {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-blue-light);
  background: var(--color-grey-100);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-btn-spec__usage {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-btn-spec__usage code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* States table -- compact row layout */
.ds-btn-states {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-btn-states__row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
}

.ds-btn-states__row + .ds-btn-states__row {
  border-top: 1px solid var(--glass-border);
}

.ds-btn-states__row--head {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.ds-btn-states__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-btn-states__col-head {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin: 0;
  padding: 0 var(--space-2);
}

.ds-btn-states__sample {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-2);
}

.ds-btn-states__sample--gradient {
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3);
  background:
    radial-gradient(circle at 20% 30%, oklch(66.623% 0.1177 217.10 / 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, oklch(77.183% 0.1766 131.692 / 0.14), transparent 55%),
    var(--color-body-bg);
}

/* Static previews -- the buttons in this matrix are non-interactive so each
   state stays put when the cursor moves across them. */
.ds-btn-states__sample .btn {
  pointer-events: none;
}

.ds-btn-states__sample .btn.is-hover-solid {
  background: var(--color-blue-dark);
  box-shadow: var(--shadow-glow);
  transform: translateY(-0.125rem);
}

.ds-btn-states__sample .btn.is-hover-outline,
.ds-btn-states__sample .btn.is-hover-glass {
  background: color-mix(in srgb, var(--color-blue) 10%, transparent);
  color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  box-shadow: var(--shadow-glow);
  transform: translateY(-0.125rem);
}

/* ---------- Cards: side-by-side specimen pairs ---------- */
.ds-cards-pair {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .ds-cards-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ds-cards-pair__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.ds-cards-pair__caption {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

.ds-cards-pair__caption code {
  font-family: var(--font-heading);
  font-size: 0.95em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
}

.ds-cards-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------- Spacing scale ---------- */
.ds-spacing {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-spacing__row {
  display: grid;
  grid-template-columns: minmax(7rem, 8rem) minmax(7rem, 9rem) 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-2);
}

.ds-spacing__row + .ds-spacing__row {
  border-top: 1px solid var(--glass-border);
}

.ds-spacing__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-blue-light);
  white-space: nowrap;
}

.ds-spacing__size {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ds-spacing__bar {
  display: block;
  height: 1.25rem;
  background: var(--gradient-accent);
  border-radius: var(--radius-sm);
  max-width: 100%;
}

/* ---------- Section / container rhythm tables ---------- */
.ds-rhythm {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-rhythm__row {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) minmax(7rem, 9rem) 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
}

.ds-rhythm__row + .ds-rhythm__row {
  border-top: 1px solid var(--glass-border);
}

.ds-rhythm__breakpoint {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ds-rhythm__bp-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.ds-rhythm__token code {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-rhythm__value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* ---------- Radii scale ---------- */
.ds-radii {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 36rem) {
  .ds-radii { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .ds-radii { grid-template-columns: repeat(6, 1fr); }
}

.ds-radius {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-radius__chip {
  width: 5rem;
  height: 5rem;
  background: var(--gradient-accent);
  border: 1px solid var(--glass-border);
}

.ds-radius__chip--full {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-blue) 70%, transparent), transparent 60%),
    var(--gradient-accent);
}

.ds-radius__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.ds-radius__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-radius__value {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ---------- Radii / shadow role list ---------- */
.ds-radii-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-radii-roles li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

@media (min-width: 48rem) {
  .ds-radii-roles li {
    grid-template-columns: minmax(9rem, 11rem) 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

.ds-radii-roles li + li {
  border-top: 1px solid var(--glass-border);
}

.ds-radii-roles__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-blue-light);
  white-space: nowrap;
}

.ds-radii-roles__role {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text);
}

.ds-radii-roles__role strong {
  color: var(--color-heading);
  font-weight: 600;
}

.ds-radii-roles__role code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- Shadow scale ---------- */
.ds-shadows {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  background: var(--color-body-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}

@media (min-width: 36rem) {
  .ds-shadows { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .ds-shadows { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .ds-shadows { grid-template-columns: repeat(5, 1fr); }
}

.ds-shadow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.ds-shadow__chip {
  width: 100%;
  max-width: 7rem;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.ds-shadow__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  max-width: 100%;
}

.ds-shadow__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-shadow__value {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  background: transparent;
  padding: 0;
  text-align: center;
}

/* ---------- Animations: inline rows with live demos ---------- */
.ds-anim {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-anim__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-5);
}

@media (min-width: 48rem) {
  .ds-anim__row {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 16rem);
    gap: var(--space-6);
  }
}

.ds-anim__row + .ds-anim__row {
  border-top: 1px solid var(--glass-border);
}

.ds-anim__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ds-anim__token {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-2);
}

.ds-anim__token strong {
  color: var(--color-heading);
  font-weight: 700;
}

.ds-anim__token code {
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 600;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
}

.ds-anim__token-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.ds-anim__use {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.ds-anim__use code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-anim__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
}

/* Transition demo chip -- shared rest + hover, each variant overrides only the duration */
.ds-anim__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
}

.ds-anim__chip--fast {
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.ds-anim__chip--base {
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.ds-anim__chip--slow {
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    transform var(--transition-slow);
}

.ds-anim__chip:hover,
.ds-anim__chip:focus-visible {
  background: var(--color-blue);
  border-color: var(--color-blue-light);
  color: var(--color-white);
  transform: translateY(-0.25rem);
  outline: none;
}

/* Card-lift specimen -- mirrors the .team-card hover recipe */
.ds-lift-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  max-width: 14rem;
  padding: var(--space-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.ds-lift-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
  border-color: var(--glass-border-hover);
}

.ds-lift-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-lift-card__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---------- Animations: replay button ---------- */
.ds-replay-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.ds-replay-btn:hover,
.ds-replay-btn:focus-visible {
  background: color-mix(in srgb, var(--color-blue) 15%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 50%, transparent);
  color: var(--color-blue-light);
  outline: none;
  transform: translateY(-0.125rem);
}

.ds-replay-btn__icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---------- Animations: scroll-triggered demos ---------- */
.ds-fade-demo {
  width: 100%;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.ds-fade-demo__target {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.ds-fade-demo__target.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ds-fade-demo__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
}

.ds-fade-demo__sub {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-keyframe-stage--counts {
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-5);
}

/* Typewriter stage -- column flex so the Replay button sits above the quote */
.ds-keyframe-stage--typewriter {
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
}

.ds-typewriter-demo {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
}

.ds-typewriter-demo__mark {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-style: normal;
  line-height: 1;
  color: var(--color-blue-light);
}

.ds-typewriter-demo .js-typewriter {
  font-style: italic;
}

/* CTR performance stage */
.ds-keyframe-stage--perf {
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-5);
}

.ds-perf-demo {
  width: 100%;
  max-width: 40rem;
}

.ds-count-demo {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 40rem;
}

@media (min-width: 48rem) {
  .ds-count-demo { grid-template-columns: repeat(4, 1fr); }
}

.ds-count-demo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.ds-count-demo__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
}

.ds-count-demo__num .accent {
  color: var(--color-blue-light);
  font-size: 0.6em;
  font-weight: 700;
}

.ds-count-demo__desc {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- Animations: signal-flow demo ----------
   Static placeholder for now — two glass panels with skeleton blocks
   inside (article shape on the left, signal-output shape on the right),
   joined by the Neuwo AI connector. The connector tracks are visible but
   inert, ready to host the article-scan / grid-reveal animations once
   those are wired up. */
.ds-keyframe-stage--flow {
  padding: var(--space-10) var(--space-5);
}

.ds-flow {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  max-width: 36rem;
}

.ds-flow__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  min-height: 14rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-flow__panel-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ds-flow__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-flow__connector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.ds-flow__track {
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-blue) 25%, transparent),
    color-mix(in srgb, var(--color-green) 25%, transparent)
  );
  border-radius: var(--radius-full);
}

.ds-flow__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--color-blue);
}

.ds-flow__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ds-flow__badge-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
  text-align: center;
  line-height: 1.3;
}

/* ---------- Animations: keyframe live stage ---------- */
.ds-keyframe-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  margin: 0 0 var(--space-5);
  background: var(--color-body-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ds-keyframe-stage > p {
  margin: 0;
  text-align: center;
}

/* Cap the embedded specimens so they sit comfortably inside the stage */
.ds-keyframe-stage .cta-banner {
  width: 100%;
  max-width: 36rem;
}

.ds-keyframe-stage .final-cta__card {
  width: 100%;
  max-width: 38rem;
}

.ds-keyframe-stage .final-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0 0 var(--space-6);
}

/* Final-CTA stage: extra padding so the halo bleed has room, and
   isolation: isolate so the halo's z-index: -1 stays inside the stage
   instead of escaping behind the stage background. Hover the card to
   trigger the conic spin + bloom (production behaviour). */
.ds-keyframe-stage--final-cta {
  isolation: isolate;
  padding: var(--space-12) var(--space-8);
}

/* ---------- Animations: keyframe catalogue entries ---------- */
.ds-keyframe {
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-keyframe + .ds-keyframe {
  margin-top: var(--space-3);
}

.ds-keyframe__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--glass-border);
}

.ds-keyframe__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-blue-light);
  background: var(--color-grey-100);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}

.ds-keyframe__name-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-left: 0.25rem;
}

.ds-keyframe__cadence {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ds-keyframe__use {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.ds-keyframe__use strong {
  color: var(--color-heading);
  font-weight: 600;
}

.ds-keyframe__use code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ds-keyframe__src {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.ds-keyframe__src code {
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  padding: 0;
}

/* ---------- Borders catalogue ----------
   Sample is the dominant element: full-width, taller, with representative
   content inside so each border treatment reads in context. Meta sits
   below in compact form. */
.ds-borders {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ds-borders { grid-template-columns: repeat(2, 1fr); }
}

.ds-border {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-border__sample {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  width: 100%;
  min-height: 9rem;
  padding: var(--space-5) var(--space-5);
  background: var(--color-body-bg);
  border-radius: var(--radius-md);
}

.ds-border__sample-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-border__sample-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ds-border__sample .skeleton {
  display: block;
}

.ds-border__sample-divider {
  display: block;
  width: 100%;
  border-top: 1px dashed var(--glass-border);
  margin: var(--space-2) 0;
}

/* Sample variants -- each isolates a single border treatment */
.ds-border__sample--glass        { border: 1px solid var(--glass-border); }
.ds-border__sample--glass-hover  { border: 1px solid var(--glass-border-hover); }
.ds-border__sample--dashed       { border: 1px solid var(--glass-border); }

.ds-border__sample--brand-blue {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-blue) 22%, transparent);
  background: color-mix(in srgb, var(--color-blue) 6%, var(--color-body-bg));
}

.ds-border__sample--brand-green {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-green) 25%, transparent);
  background: color-mix(in srgb, var(--color-green) 6%, var(--color-body-bg));
}

.ds-border__sample--blockquote {
  justify-content: center;
  border-left: 3px solid var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 10%, var(--color-body-bg));
  padding: var(--space-5) var(--space-6);
}

.ds-border__sample--top-stripe {
  border-top: 3px solid var(--color-green);
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  border-left: 1px solid var(--glass-border);
}

.ds-border__sample--placeholder {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--color-body-bg), var(--color-body-bg)),
    repeating-linear-gradient(
      45deg,
      var(--glass-border) 0 4px,
      transparent 4px 8px
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Animated gradient ring -- the .solutions__card--featured recipe.
   Padding: 1px + conic-gradient background creates the 1 px ring;
   the inner panel masks the centre. The @property registration lets us
   transition the gradient angle, and the keyframe spins it linearly. */
@property --ds-gradient-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes ds-gradient-ring-spin {
  to { --ds-gradient-ring-angle: 360deg; }
}

.ds-border__sample--gradient-ring {
  padding: 1px;
  background: conic-gradient(
    from var(--ds-gradient-ring-angle),
    var(--color-blue),
    var(--color-green),
    var(--color-blue)
  );
  border: none;
  border-radius: calc(var(--radius-md) + 1px);
  animation: ds-gradient-ring-spin 12s linear infinite;
  min-height: 0;
}

.ds-border__sample-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  width: 100%;
  min-height: 9rem;
  padding: var(--space-5);
  background: var(--color-surface-solid);
  border-radius: var(--radius-md);
}

.ds-border__sample-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-light);
}

@media (prefers-reduced-motion: reduce) {
  .ds-border__sample--gradient-ring { animation: none; }
}

/* Pill content for brand-ring samples -- mirrors .bid-console__latency etc */
.ds-border__pill {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
}

.ds-border__pill--blue {
  color: var(--color-blue-light);
  background: color-mix(in srgb, var(--color-blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.ds-border__pill--green {
  color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
}

/* Pull-quote sample -- mirrors blog .blog-post__content blockquote */
.ds-border__sample-quote {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
}

/* Top-stripe sample -- a "Do" category card */
.ds-border__sample-stripe-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
}

/* Transparent-placeholder sample -- two button states side by side */
.ds-border__sample-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-grey-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.ds-border__sample-btn--rest {
  border: 1px solid transparent;
}

.ds-border__sample-btn--hover {
  border: 1px solid var(--glass-border);
  color: var(--color-blue-light);
}

.ds-border__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ds-border__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.ds-border__value {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-blue-light);
  background: var(--color-grey-100);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  align-self: flex-start;
  word-break: break-word;
  max-width: 100%;
}

.ds-border__role {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.ds-border__role em {
  font-style: italic;
  color: var(--color-heading);
}

.ds-border__refs {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--glass-border);
}

.ds-border__refs strong {
  color: var(--color-heading);
  font-weight: 600;
}

.ds-border__refs code,
.ds-border__role code {
  font-family: var(--font-heading);
  font-size: 0.85em;
  background: var(--color-grey-100);
  color: var(--color-blue-light);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---------- Inputs: state matrix ---------- */
.ds-role__sample--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-input-states {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-input-states__row {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  align-items: center;
  gap: var(--space-4);
}

.ds-input-states__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The state matrix shows static frozen previews. Inputs are non-interactive
   (readonly + tabindex="-1") so the focus state stays put when the cursor
   moves across them. */
.ds-input-static {
  pointer-events: none;
  cursor: default;
}

/* Force the focus styles on the static "Focus" row so the user sees what
   focus looks like without having to click into a real input. */
.ds-input-static.is-focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 18%, transparent);
}

/* Suppress the api-demo error-shake animation on the static error preview
   so it doesn't fire on every page load and look broken. */
.ds-input-static--no-shake {
  animation: none !important;
}

/* ---------- Stub sections ---------- */
.ds-stub {
  background: var(--glass-bg-light);
  border: 1px dashed var(--glass-border-hover);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-stub__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin: 0 0 var(--space-3);
}

.ds-stub__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}

/* ---------- Selection controls specimens ---------- */

.ds-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-checks__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.ds-checks__head {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 5rem;
  flex-shrink: 0;
}

/* ---------- Stub sections ---------- */

.ds-stub__desc {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 32rem;
}

/* ---------- Header pattern preview ---------- */

.ds-header-preview {
  margin-bottom: var(--space-12);
}

.ds-header-preview__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.ds-header-preview__frame {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--color-blue) 22%, transparent), transparent 60%),
    radial-gradient(ellipse at 85% 80%, color-mix(in srgb, var(--color-green) 18%, transparent), transparent 60%),
    var(--color-body-bg);
}

.ds-header-preview__frame--dropdown {
  overflow: visible;
}

.ds-header-preview__hero {
  padding: var(--space-16) var(--space-6) var(--space-16);
  text-align: center;
}

.ds-header-preview__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.ds-header-preview__lead {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 36rem;
}

.ds-header-preview__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.ds-header-preview__caption code {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  background: var(--color-grey-100);
  padding: 0.125rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.ds-header-preview .site-header {
  position: static;
}

/* ---------- Compact token list (Tokens page) ---------- */

.ds-token-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-token-row {
  display: grid;
  grid-template-columns: 2rem minmax(8rem, 14rem) minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: 0.375rem var(--space-3);
  min-height: 2.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.ds-token-row:last-child {
  border-bottom: none;
}

.ds-token-row__chip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ds-token-row__chip--preview-bg {
  background-image:
    linear-gradient(45deg, var(--color-grey-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-grey-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-grey-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-grey-200) 75%);
  background-size: 0.625rem 0.625rem;
  background-position: 0 0, 0 0.3125rem, 0.3125rem -0.3125rem, -0.3125rem 0;
}

.ds-token-row__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-token-row__value {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-token-row .ds-swatch__copy {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}

.ds-token-row--dual {
  grid-template-columns: 2rem minmax(8rem, 14rem) minmax(0, 1fr);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.ds-token-row__values {
  display: grid;
  gap: 0.25rem;
}

.ds-token-row__values-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: var(--space-3);
}

.ds-token-row--type {
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
}

.ds-token-row__type-sample {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-token-row--space {
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto;
}

.ds-token-row__space-bar {
  height: 0.5rem;
  background: var(--color-blue);
  border-radius: var(--radius-sm);
  max-width: 100%;
}

.ds-token-row--motion {
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto;
}

.ds-token-row__motion-demo {
  width: 100%;
  height: 0.5rem;
  background: var(--glass-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  max-width: 12rem;
}

.ds-token-row__motion-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-blue);
  border-radius: var(--radius-sm);
  transform: translateX(-100%);
  animation: ds-token-motion-loop 3s ease-in-out infinite;
}

.ds-token-row__motion-demo--fast::after { animation-duration: 1.5s; }
.ds-token-row__motion-demo--base::after { animation-duration: 2.25s; }
.ds-token-row__motion-demo--slow::after { animation-duration: 3.5s; }

@keyframes ds-token-motion-loop {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-token-row__motion-demo::after { animation: none; transform: translateX(0); }
}

.ds-token-group {
  margin-bottom: var(--space-6);
}

.ds-token-group__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* ---------- Landing page (/) ---------- */

.ds-home__intro {
  font-size: var(--font-size-lg);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 44rem;
  margin: 0 0 var(--space-12);
}

.ds-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 36rem) {
  .ds-home__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .ds-home__grid { grid-template-columns: repeat(3, 1fr); }
}

.ds-home__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ds-home__card:hover,
.ds-home__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg);
  text-decoration: none;
  outline: none;
}

.ds-home__card-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin: 0;
}

.ds-home__card-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
}

.ds-home__card-desc {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.ds-home__card-meta {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin: var(--space-2) 0 0;
}

.ds-home__footer {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--glass-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}