/* ============================================================
   99creatix legal pages (Privacy, Terms)
   One layer serving both: the two pages share a layout and differ
   only in hero copy and numbered body content.
   Selectors are doubled (.c99.c99-legal) so they outrank the
   homepage's .c99 rules, which print later in the site custom CSS.
   ============================================================ */

/* ---- values that differ from the homepage build ---- */
.c99.c99-legal .display { font-size: clamp(2.2rem, 6.5vw, 4.6rem); line-height: 0.9; }
.c99.c99-legal .opening .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.2rem, 5vw, 3.5rem); }
.c99.c99-legal .hero__eyebrow { padding-bottom: 1.4rem; }
.c99.c99-legal .band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.c99.c99-legal .nav__mark { text-decoration: none; color: inherit; }

/* The hero lede is a bare <p> here rather than the .hero__sub used elsewhere. */
.c99.c99-legal .hero p {
  max-width: 56ch; color: var(--panel-mute);
  margin: 1.4rem 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* These pages have no animated canvas by design: legal copy should be calm,
   and the field would be decoration without purpose. No markup for it exists,
   so the shared .opening__field rule simply never applies. */

/* ---- the numbered legal column ---- */
.c99.c99-legal .legal { max-width: 720px; }
.c99.c99-legal .legal .k {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--blue);
  display: block; margin: 2.6rem 0 0.6rem;
}
.c99.c99-legal .legal .k:first-child { margin-top: 0; }
.c99.c99-legal .legal h2 { font-size: 1.3rem; letter-spacing: -0.025em; text-transform: uppercase; margin-bottom: 0.7rem; }
.c99.c99-legal .legal p { color: var(--ink-mute); font-size: 0.98rem; line-height: 1.7; margin: 0 0 0.9rem; }
.c99.c99-legal .legal ul { margin: 0 0 0.9rem; padding-left: 1.15rem; }
.c99.c99-legal .legal li { color: var(--ink-mute); font-size: 0.98rem; line-height: 1.7; margin-bottom: 0.35rem; }
.c99.c99-legal .legal a { color: var(--blue); text-decoration: none; }
.c99.c99-legal .legal a:hover { text-decoration: underline; }

/* ---- footer ----
   The footer is the only thing in its dark band here, rather than trailing a
   closer, so it drops the shared rule and top gap that separate it from a CTA. */
.c99.c99-legal .bigfoot { border-top: 0; margin-top: 0; padding-top: clamp(2.2rem, 5vw, 3.5rem); }