/* POPHIES OEM / ODM page — page-specific rules only.
   Source: 网站规划.md §6.4 (lines 172–187), §12.8 (lines 735–742).
   Shared classes and tokens live in assets/css/tokens.css and style.css. */

/* ---------- Scope statement ---------- */

.oem-scope {
  max-width: var(--read);
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.oem-scope__note {
  max-width: var(--read);
  margin: 0 0 3.5rem;
  font-size: var(--fs-small);
  color: var(--graphite);
}

/* ---------- The four levels ---------- */

.oem-levels { display: grid; gap: 2.5rem; }

.oem-level {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--stone);
}

@media (min-width: 900px) {
  .oem-level {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 3rem;
  }
}

.oem-level__head { min-width: 0; }

.oem-level__number {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass);
}

.oem-level__title { margin: 0 0 0.35em; font-size: var(--fs-h3); }

.oem-level__tagline {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--graphite);
}

.oem-level__facts { display: grid; gap: 1.1rem; margin: 0; min-width: 0; }

.oem-level__fact { min-width: 0; }

.oem-level__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--graphite);
}

.oem-level__value {
  margin: 0.3rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* ---------- Which level: the four self-locating cards ---------- */

/* Cards stretch, so .card__link's margin-top:auto puts the level links on one line. */
.oem-choices { gap: 2rem; }

.oem-choice { min-width: 0; }

.oem-choice__questions {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--graphite);
}

/* ---------- Process steps ---------- */

.oem-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .oem-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 3rem;
  }
}

.oem-process__more {
  max-width: var(--read);
  margin: 2.5rem 0 0;
  color: var(--graphite);
}

/* ---------- Standard terms ---------- */

.oem-terms {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--stone);
}

.oem-terms__title { margin: 0 0 0.6em; font-size: 1.15rem; }

.oem-terms__lead {
  max-width: var(--read);
  margin: 0 0 2rem;
  color: var(--graphite);
}

.oem-terms__response {
  max-width: var(--read);
  margin: 2rem 0 0;
  padding-left: 1.15rem;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
}

/* ---------- What a customization involves ---------- */

.oem-involves { margin: 0; color: var(--graphite); }

.oem-involves__note {
  max-width: var(--read);
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stone);
  font-size: var(--fs-small);
  color: var(--graphite);
}

/* ---------- Questions ---------- */

.oem-faq {
  display: grid;
  max-width: var(--read);
}

.oem-faq__item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--stone);
}

.oem-faq__item:last-child {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--stone);
}

.oem-faq__q { margin: 0 0 0.5em; font-size: 1.1rem; }

.oem-faq__a { margin: 0; color: var(--graphite); }

@media (max-width: 659px) {
  .oem-levels { gap: 2rem; }
  .oem-steps { gap: 1.25rem; }
  .oem-levels, .oem-choices, .oem-faq, .oem-involves { overflow-wrap: break-word; }
}