/* Shared responsive layouts. Content typography and brand live in styles.css. */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { display: inline-flex; margin: 0; vertical-align: baseline; }
.brand-mark img { display: block; width: 30px; height: 30px; border-radius: 8px; }

.section-intro {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.section-intro > .eyebrow { flex: 1 1 0; }
.section-intro > h2 { flex: 2 1 0; min-width: 0; }

.principle-grid {
  display: flex;
  flex-wrap: wrap;
}
.principle-grid > article {
  flex: 1 1 calc(33.333% - 1px);
  min-width: 0;
}

.app-hero-content {
  display: flex;
  align-items: center;
  gap: 72px;
}
.app-hero-content > :first-child { flex: 1 1 0; min-width: 0; }
.app-hero-content > .ledger-preview { flex: 0 1 365px; margin-left: auto; }

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.feature-grid > article {
  flex: 0 0 25%;
  min-width: 0;
}

@media (min-width: 701px) and (max-width: 1000px) {
  .app-hero-content { gap: 30px; }
  .feature-grid > article { flex-basis: 50%; }
}

@media (max-width: 700px) {
  .section-intro,
  .app-hero-content { flex-direction: column; align-items: stretch; }
  .store-actions { flex-direction: column; align-items: flex-start; }
  .section-intro { gap: 0; }
  .section-intro > .eyebrow,
  .section-intro > h2 { flex: none; }
  .principle-grid > article { flex-basis: 100%; }
  .app-hero-content { gap: 45px; }
  .app-hero-content > :first-child,
  .app-hero-content > .ledger-preview { flex: none; }
  .app-hero-content > .ledger-preview { margin-left: 0; }
  .feature-grid > article { flex-basis: 50%; }
}

@media (max-width: 380px) {
  .feature-grid > article { flex-basis: 100%; }
}