/* Subscription Terms & Conditions — the page header carries the (decorative) Lottie beside the title;
   the four-part accordion sits in one reading column on a light band (like the FAQ page). Inside a part,
   the clause headings (bold lines on the live page) are small numbered headings divided by hairlines,
   in the same type as the Privacy Policy's clause titles. */

/* ---------- Page header ---------- */
/* "EchoTranscript" is one long word in the display face: on phones the title steps down so it never splits mid-word. */
@media (max-width: 480px) {
  .subhero__title:has(> .terms-hero__title) { font-size: clamp(24px, 8.2vw, 34px); }
}
/* The Lottie sits to the right of the title where there is room, and small under the sentence on narrower screens. */
.subhero__actions:has(> .terms-hero__lottie) { margin-top: 24px; }
.terms-hero__lottie { width: 120px; max-width: 120px; margin: 0; }
@media (min-width: 1000px) {
  .subhero__actions:has(> .terms-hero__lottie) { margin-top: 0; }
  .terms-hero__lottie { position: absolute; right: 0; top: 50%; width: 180px; max-width: 180px; transform: translateY(-50%); }
}
@media (min-width: 1280px) {
  .terms-hero__lottie { width: 220px; max-width: 220px; }
}
@media (min-width: 1440px) {
  .terms-hero__lottie { width: 260px; max-width: 260px; }
}
/* When the animation file fails to load, drop its slot (no lone warning glyph, no empty gap under the sentence). */
.subhero__actions:has(> .terms-hero__lottie--failed) { display: none; }
/* The sentence is just too long for the shared 680px lead: give it room for one line on desktop, balanced lines below. */
.subhero__inner:has(.terms-hero__title) .subhero__lead { max-width: 760px; text-wrap: balance; }

/* ---------- The accordion ---------- */
.terms-page .terms-page__column { max-width: 980px; }
.terms-page .faq__q { line-height: 1.4; }
.terms-page .faq__item[open] > .faq__q { color: var(--black); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.terms-page .faq__item[open] > .faq__q:hover { color: var(--orange); }
.terms-page .faq__a { padding: 28px 0 52px; }

.terms-page .terms__body { max-width: 800px; font-size: 16px; line-height: 1.75; color: #2e2e2e; }
.terms-page .terms__body p { margin: 0; max-width: none; font-size: 16px; line-height: 1.75; color: #333; overflow-wrap: break-word; }
.terms-page .terms__body > * + p { margin-top: 1em; }
.terms-page .terms__body a { overflow-wrap: anywhere; }

.terms-page .terms__clause {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 2.6em 0 0;
  padding-top: 1.7em;
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
}
.terms-page .terms__body > .terms__clause:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms-page .terms__body > .terms__clause + p { margin-top: .85em; }
.terms-page .terms__num { flex: 0 0 auto; min-width: 1.4em; color: var(--orange); }

@media (max-width: 640px) {
  .terms-page .faq__q { padding: 22px 0; }
  .terms-page .faq__a { padding: 22px 0 40px; }
  .terms-page .terms__body p { font-size: 15.5px; line-height: 1.7; }
  .terms-page .terms__clause { font-size: 15px; margin-top: 2.2em; padding-top: 1.5em; }
}