/* Section rework: #terms. Every selector is scoped under #terms.
   Built on the shared frame (v3-shared.css): .terms / .terms-3 for the three terms.
   The old .fine, .plain, .question, .ask and .split-head rules in styles.css no longer
   apply to this section: the markup uses .terms, .terms-list and .pay-q*. */

/* A short section: less air than the long ones around it. Screen only, print keeps its own rhythm. */
@media screen {
  #terms.sheet {
    padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
  }
}

/* The three terms: one hairline above, label over a short answer. */
#terms .terms {
  margin-top: var(--stack-4);
  padding-top: var(--stack-3);
  border-top: 1px solid var(--rule-on-light);
}
#terms .terms > div {
  break-inside: avoid;
}
#terms .terms-list li + li {
  margin-top: 0.125rem;
}

/* The one question: the only tinted panel on the page. */
#terms .pay-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stack-3) clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: var(--block-gap-above);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--r-control);
  background: var(--tint);
  break-inside: avoid;
}
#terms .pay-q-text,
#terms .pay-q-ask {
  min-width: 0;
}
#terms .pay-q-text > p {
  max-width: 26rem;
  margin-top: var(--stack-2);
  color: var(--deep-soft);
}
#terms .pay-q-text > .pay-q-scope {
  margin-top: var(--stack-1);
  font-weight: 500;
  color: var(--ink);
}
#terms .pay-q-q {
  max-width: 28ch;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--sun-text);
  text-wrap: balance;
}
#terms .pay-q-reply {
  margin-top: var(--stack-2);
  font-size: 0.9375rem;
  color: var(--deep-soft);
}

/* Stacked: the question sits under its explanation, split by a faint hairline. */
@media (max-width: 899px) {
  #terms .pay-q-ask {
    padding-top: var(--stack-3);
    border-top: 1px solid color-mix(in srgb, var(--sun) 22%, transparent);
  }
}
/* On a phone it reads as a question, not a headline. */
@media (max-width: 767px) {
  #terms .pay-q-q {
    max-width: none;
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: pretty;
  }
}
@media (min-width: 900px) {
  #terms .pay-q {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Print: every term stays, nothing splits across a page. */
@media print {
  #terms .terms {
    margin-top: 7mm;
    padding-top: 4mm;
  }
  #terms .pay-q {
    margin-top: 8mm;
  }
  #terms .pay-q-q {
    font-size: 1.9rem;
  }
}