/* Collaboration terms viewer — page styles.
 * Cascade: ../../_assets/css/nextory.css (brand, never edited) -> ../../_css/ambassadors.css
 * (public-page supplement) -> this file. The shell (tokens, header, hero band, card, footer) mirrors
 * ../../forms/_material-flow.css so the terms read as the same product as the form that links here;
 * the typography below is for the fragments' own h3 / h4 / p / ul / li. */

:root {
  --ink-on-dark: var(--color-sand-200);
  --deep: var(--color-purple-900);
  --radius: 12px;
  --wrap: 40rem;
}

main { max-width: none; padding: 0; flex: 1 0 auto; }
section { margin-block: 0; }
body { min-height: 100svh; display: flex; flex-direction: column; background: var(--color-sand-100); color: var(--content-primary); overflow-x: hidden; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--color-pink-400); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.dark { background: var(--deep); color: #fff; }
.light { background: var(--color-sand-100); }
.muted { color: var(--color-sand-600); }

.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; padding: 20px 1.25rem 0; }
.site-header__logo img { height: 1.75rem; width: auto; }

.hero { position: relative; overflow: hidden; height: 128px; }
.hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__blob--pink { right: -90px; top: -60px; width: 260px; height: 260px; background: var(--color-pink-500); opacity: .55; }
.hero__blob--lilac { right: -30px; top: 110px; width: 180px; height: 180px; background: var(--color-purple-500); opacity: .6; }
.hero__copy { position: relative; }

.sheet { padding: 2rem 0 3.5rem; }
.card { padding: 24px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--color-sand-300); }
.card[hidden] { display: none; }

/* The fragments' typography: one h3 title, numbered h4 sections, paragraphs and lists. */
.terms { color: var(--color-sand-700); font-size: 16px; line-height: 26px; }
.terms h3 { font-family: var(--font-headline); font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -.24px; color: var(--content-primary); text-wrap: balance; }
.terms h4 { margin-top: 28px; font-family: var(--font-headline); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--content-primary); }
.terms p { margin-top: 10px; }
.terms ul { margin-top: 10px; padding-left: 22px; }
.terms li + li { margin-top: 6px; }
.terms ul ul { margin-top: 6px; }
.terms strong { color: var(--content-primary); }
.terms a { color: var(--color-pink-500); }

.foot { margin-top: auto; padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); }
.foot__inner { display: flex; justify-content: space-between; align-items: center; }
.foot__logo { height: 1.5rem; width: auto; }

@media (min-width: 30rem) {
  .wrap { padding: 0 1.5rem; }
  .site-header { padding: 20px 1.5rem 0; }
  .card { padding: 32px 28px; }
}

@media (min-width: 48rem) {
  .hero { height: 144px; }
  .sheet { padding: 2.5rem 0 5rem; }
  .card { padding: 40px; }
  .terms h3 { font-size: 30px; line-height: 36px; letter-spacing: -.3px; }
}

@media (min-width: 64rem) {
  .site-header { position: sticky; top: 0; height: 64px; padding: 0 4rem; background: var(--color-purple-700); }
  .hero { height: 96px; }
  .foot { padding: 2.5rem 0; }
}