/*
 * The QuestLoom pitch page (about.html) — old design.
 *
 * Its own file rather than a style.css section: the page exists in both branches
 * and the design branch restyles it with mc-about.css on top; keeping the base
 * out of style.css keeps cherry-picks clean.
 */

/* The mark sits beside the wordmark, baseline-ish aligned; the pair stays LTR
   in both languages — a brand reads one way, like a version number. */
.about-brandrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.2rem 0 0.6rem;
}

.about-brandrow svg {
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.about-brandrow .about-brand {
  margin: 0;
}

.about-brand {
  /* The brand is Latin in both languages, so the pixel font is safe here. */
  font-family: var(--font-brand);
  color: #8a5a00;
}

.about-lede {
  margin: 0.4rem 0 1.2rem;
  line-height: 1.5;
  color: #2b2b2b;
}

.about-features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

/* Feature card: the mockup's gold left edge, in the amber that reads on light. */
.about-feature {
  padding: 0.55rem 0.7rem;
  background: #e8e4d6;
  border: 2px solid #373737;
  border-inline-start: 5px solid #8a5a00;
}

.about-feature__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #8a5a00;
}

.about-feature__body {
  margin: 0;
  line-height: 1.45;
  color: #2b2b2b;
}

/* The olive highlight plate from the mockup, in this theme's proven greens. */
.about-note {
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.75rem;
  background: #dfe8cf;
  border: 2px solid #373737;
  border-inline-start: 5px solid #175c2c;
  font-weight: 700;
  color: #22301a;
}

.about-wa-hint {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #3d3d3d;
}

/* "or leave a request" — a labelled divider between the two ways in. */
.about-or {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.about-or::before,
.about-or::after {
  content: '';
  flex: 1;
  border-top: 2px solid rgba(0, 0, 0, 0.25);
}

.about-form {
  margin-bottom: 0.6rem;
}