/* ==========================================================================
   Pages — page-specific layout and overrides only.
   Scope every rule with the page class set on <body>, e.g.
     .page-home .hero { ... }
   If a rule is needed on two pages, promote it to components.css or layout.css.
   ========================================================================== */

/* ---------- Homepage (index.html) ------------------------------------------ */

/* Why Syphers: statement heading beside the copy, points below */
.page-home .home-why {
  align-items: start;
}

.page-home .home-why__title {
  margin-block-start: var(--space-4);
}

.page-home .home-why__points {
  --grid-gap: var(--space-7);
  margin-block-start: var(--section-header-gap);
}

.page-home .home-why .stack {
  --stack-gap: var(--space-5);
  max-width: 40rem;
}

/* Insights: lighter card borders to reduce visual density */
.page-home .card--insight {
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  border-color: var(--color-border);
}

/* Experience stat under the Why Syphers lead: one column (the founders' two stats stack too) */
.page-home .home-why .stats {
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--space-3);
}

/* ---------- Development style guide (dev/styleguide.html) ----------------- */

.page-styleguide .sg-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
}

.page-styleguide .sg-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.page-styleguide .sg-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-caption);
}

.page-styleguide .sg-swatch__chip {
  height: var(--space-9);
  margin-block-end: var(--space-1);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.page-styleguide .sg-swatch code {
  color: var(--color-text-muted);
}

.page-styleguide .sg-type-row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
}

.page-styleguide .sg-type-row code {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.page-styleguide .sg-space {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-caption);
}

.page-styleguide .sg-space__bar {
  height: var(--space-3);
  background: var(--gradient-brand);
  border-radius: var(--radius-sm);
}

/* Stand-in for assets not yet supplied (icons, images) */
.page-styleguide .sg-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: var(--icon-size-lg);
  min-width: var(--icon-size-lg);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  border: var(--border-width) dashed currentColor;
  border-radius: var(--radius-sm);
}

.page-styleguide .card__icon .sg-placeholder {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--accent, var(--color-text-muted));
  font-size: 0;
}