/* Brand colors: the app's Palette.PRIMARY (#2563EB) and ACCENT (#F59E0B). */
:root {
  --md-primary-fg-color: #2563eb;
  --md-primary-fg-color--light: #3b82f6;
  --md-primary-fg-color--dark: #1d4ed8;
  --md-accent-fg-color: #f59e0b;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1e40af;
  --md-typeset-a-color: #60a5fa;
}

/* Home hero */
.hero {
  text-align: center;
  padding: 2.5rem 0 1.5rem;
}
.hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--md-typeset-color);
}
.hero p {
  font-size: 1.05rem;
  max-width: 40rem;
  margin: 0 auto 1.2rem;
}
.hero .md-button { margin: 0.25rem; }

/* Screenshot placeholders, until real screenshots exist */
.shot {
  border: 2px dashed var(--md-default-fg-color--lighter);
  border-radius: 0.5rem;
  padding: 3rem 1rem;
  margin: 1rem 0;
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-style: italic;
}

/* Pricing cards: the price line */
.price {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.3rem 0 0;
}
.price small { font-size: 0.8rem; font-weight: 400; }
.grid.cards .md-button { margin-top: 0.5rem; }

@media screen and (max-width: 44.9375em) {
  .hero h1 { font-size: 1.8rem; }
}