/* Readability settings for the dev showcase only; project pages stay unchanged. */
:root {
  --dev-text-meta: .75rem; /* 12px */
  --dev-text-label: .875rem; /* 14px */
  --dev-text-body: 1rem; /* 16px */
  --dev-step-size: 1.25rem; /* 20px */
  --dev-step-color: var(--cyan);
}

.brand small,
.visual-toolbar,
.floating-chip span,
.product-meta,
.product-small-copy > span:first-child,
.product-small-copy .soon,
.solution-note,
.contact dt,
.ipscan-radar span,
.onec-stack b {
  font-size: var(--dev-text-meta);
  line-height: 1.5;
}

.site-header nav a,
.menu-toggle,
.button,
.hero-facts span,
.floating-chip,
.service-card ul,
.service-card-accent a,
.product-actions > span,
.product-link,
.project-added .product-link,
.contact dd,
.site-footer {
  font-size: var(--dev-text-label);
  line-height: 1.6;
}

.service-card p,
.process-list p,
.product-small-copy p,
.project-added .product-small-copy p {
  font-size: var(--dev-text-body);
  line-height: 1.7;
}

/* All section and benefit numbers use the same size, typeface and accent. */
.hero-facts strong,
.service-number,
.process-list li > .process-marker {
  color: var(--dev-step-color);
  font: 600 var(--dev-step-size)/1.2 Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.hero-facts strong { flex-shrink: 0; }
.hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-facts span { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
.hero-facts span,
.service-card ul,
.product-actions > span,
.product-small-copy > span:first-child,
.solution-note,
.contact dt,
.site-footer { color: var(--muted); }

.site-header nav { gap: clamp(14px, 2vw, 32px); }
.button { padding-block: 12px; text-align: center; }
.product-meta { flex-wrap: wrap; }
.product-small-copy { min-width: 0; }
.product-small-copy > span:first-child { overflow-wrap: anywhere; }
.product-link { gap: 12px; letter-spacing: .05em; }
.product-link b { flex-shrink: 0; }
.site-footer { gap: 24px; }
.site-footer > div { flex-wrap: wrap; }

/* The small labels inside existing decorative previews are readable too. */
.calendar-bar,
.calendar-preview > p,
.calendar-event b { font-size: var(--dev-text-label); }
.calendar-event small,
.calendar-event strong { font-size: var(--dev-text-meta); line-height: 1.5; }
.calendar-event span { min-width: 0; }
.calendar-event strong { flex-shrink: 0; }
.calendar-preview { padding-bottom: 48px; }

@media (max-width: 800px) {
  .site-header nav { gap: 0; }
  .hero-facts { grid-template-columns: minmax(0, 1fr); }
  .code-lines { font-size: var(--dev-text-meta); }
}

@media (max-width: 480px) {
  .process-list li { grid-template-columns: 60px minmax(0, 1fr); }
}