/* =====================================================================
   Terms and policies page — loaded after styles.css.
   A quiet reading page in the site's language: Bebas Neue display,
   Barlow Condensed body, a black hero band, one green accent, 120rem
   margins, 1rem == 1 artboard px (1366 desktop, 430 phones).
   Layout: sticky contents list on the left, the documents on the right.
   ===================================================================== */

.page--terms p, .page--terms li { font-family: var(--font-body); font-weight: 500; }
.page--terms h2, .page--terms h3 { text-transform: uppercase; }
.page--terms .kicker { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }

/* ---------- hero: typographic black band, no media ---------- */
.hero--terms { height: auto; background: var(--black); }
.hero--terms .in { position: relative; z-index: 2; height: auto; display: flex; flex-direction: column; }
.hero__kicker--terms { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.hero__title--terms { position: static; text-shadow: none; }
.hero__sub--terms { color: #d8d8d8; }
.hero__date { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #8d8d8d; }

/* ---------- contents (sticky on desktop) ---------- */
.toc__title { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #777; }
.toc ul { list-style: none; border-top: 2rem solid var(--black); }
.toc li + li { border-top: 1px solid #e3e3e3; }
.toc a { display: block; font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--black); transition: color .2s ease, padding-left .2s ease; }
.toc a:hover, .toc a:focus-visible { color: var(--green-dark); outline: none; }

/* ---------- documents ---------- */
.doc + .doc { border-top: 2rem solid var(--black); }
.doc__h2 { letter-spacing: .04em; line-height: 1.01; }
.doc__intro { color: #444; }
.clause h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; line-height: 1.05; }
.clause h3 .clause__num { display: inline-block; color: var(--green-dark); }
.clause p, .clause li { color: #333; }
.clause ul { list-style: disc; }
.clause li::marker { color: var(--green-dark); }
.clause a { color: var(--green-dark); text-decoration: underline; text-underline-offset: .12em; }
.clause strong { font-weight: 700; }
.contact-card { background: var(--gray); }
.contact-card p { color: #333; }
.contact-card strong { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.contact-card a { color: var(--black); }
.contact-card a:hover, .contact-card a:focus-visible { color: var(--green-dark); }

/* =====================================================================
   DESKTOP (1366 artboard)
   ===================================================================== */
@media (min-width: 761px) {
  .hero--terms .in { min-height: 0; padding: 150rem 120rem 70rem; }
  .hero__kicker--terms { font-size: 20rem; }
  .hero__title--terms { margin-top: 18rem; font-size: 84rem; }
  .hero__sub--terms { margin-top: 24rem; max-width: 700rem; font-size: 22rem; line-height: 30rem; }
  .hero__date { margin-top: 28rem; font-size: 16rem; }

  .legal .in { display: grid; grid-template-columns: 300rem 1fr; column-gap: 90rem; align-items: start; padding: 90rem 120rem 110rem; }
  .toc { position: sticky; top: calc(var(--topbar-h) + 30rem); }
  .toc__title { font-size: 16rem; }
  .toc ul { margin-top: 12rem; }
  .toc a { padding: 13rem 0; font-size: 19rem; }
  .toc a:hover, .toc a:focus-visible { padding-left: 6rem; }
  .toc li.toc__sub a { padding-left: 18rem; font-family: var(--font-body); font-size: 16rem; text-transform: none; letter-spacing: 0; color: #555; }
  .toc li.toc__sub a:hover { padding-left: 24rem; color: var(--green-dark); }

  .doc + .doc { margin-top: 70rem; padding-top: 60rem; }
  .doc .kicker { font-size: 18rem; }
  .doc__h2 { margin-top: 10rem; font-size: 54rem; }
  .doc__intro { margin-top: 22rem; max-width: 720rem; font-size: 21rem; line-height: 29rem; }
  .clause { margin-top: 40rem; }
  .clause h3 { font-size: 28rem; }
  .clause h3 .clause__num { width: 44rem; }
  .clause p { margin-top: 14rem; max-width: 720rem; font-size: 19rem; line-height: 27rem; }
  .clause ul { margin-top: 12rem; padding-left: 24rem; max-width: 700rem; }
  .clause li { font-size: 19rem; line-height: 27rem; }
  .clause li + li { margin-top: 6rem; }
  .contact-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; margin-top: 28rem; padding: 34rem 36rem; border-radius: 18rem; max-width: 760rem; }
  .contact-card strong { font-size: 15rem; }
  .contact-card p { margin-top: 8rem; font-size: 19rem; line-height: 26rem; }
}

/* =====================================================================
   PHONES (430 artboard)
   ===================================================================== */
@media (max-width: 760px) {
  .hero--terms { height: auto; min-height: 0; }
  .hero--terms .in { min-height: 0; justify-content: flex-start; padding: 100rem 24rem 48rem; }
  .hero__kicker--terms { font-size: 15rem; }
  .hero__title--terms { margin-top: 12rem; font-size: 50rem; }
  .hero__sub--terms { margin-top: 16rem; font-size: 17rem; line-height: 23rem; }
  .hero__date { margin-top: 20rem; font-size: 13rem; }

  .legal .in { padding: 48rem 24rem 60rem; }
  .toc__title { font-size: 14rem; }
  .toc ul { margin-top: 10rem; }
  .toc a { padding: 11rem 0; font-size: 17rem; }
  .toc li.toc__sub { display: none; }   /* clause links only on desktop; the phone list is the four documents */

  .doc { margin-top: 48rem; padding-top: 0; }
  .doc + .doc { margin-top: 52rem; padding-top: 44rem; }
  .doc .kicker { font-size: 15rem; }
  .doc__h2 { margin-top: 8rem; font-size: 40rem; }
  .doc__intro { margin-top: 16rem; font-size: 18rem; line-height: 24rem; }
  .clause { margin-top: 30rem; }
  .clause h3 { font-size: 24rem; }
  .clause h3 .clause__num { width: 36rem; }
  .clause p { margin-top: 12rem; font-size: 16.5rem; line-height: 22rem; }
  .clause ul { margin-top: 10rem; padding-left: 20rem; }
  .clause li { font-size: 16.5rem; line-height: 22rem; }
  .clause li + li { margin-top: 5rem; }
  .contact-card { display: grid; gap: 18rem; margin-top: 22rem; padding: 24rem 22rem; border-radius: 16rem; }
  .contact-card strong { font-size: 13rem; }
  .contact-card p { margin-top: 6rem; font-size: 16.5rem; line-height: 22rem; }
}