@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Righteous';
  src: url('/fonts/righteous.ttf') format('truetype');
  font-display: swap;
}

:root {
  --sys-color-white: #ffffff;
  --sys-color-black: #000000;
  --pink: #f9a8d4;
  --green: #86efac;
  --purple: #d8b4fe;
  --blue: #93c5fd;
  --slate: #475569;
  --stone: #57534e;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--sys-color-black);
  background: var(--sys-color-white);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

a {
  color: inherit;
}

main,
header,
footer,
section,
article,
aside,
nav {
  width: 100%;
}

.site-header {
  border-bottom: 4px solid var(--sys-color-black);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
}

.brand-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: max-content;
}

.brand-name {
  font-size: clamp(1.72rem, 7.2vw, 1.78rem);
  font-weight: 700;
  line-height: 1;
}

.brand-name > span,
.hero-title > span {
  display: block;
}

.brand-tagline {
  margin-top: 0.32rem;
  font-size: clamp(0.92rem, 3.35vw, 0.96rem);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.site-nav {
  flex: 0 0 auto;
  width: max-content;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.site-nav a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.site-nav a:hover {
  color: #166534;
  text-decoration: underline;
}

.page {
  padding: clamp(1rem, 3vw, 2rem);
}

.page > * {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.page-pink {
  background: var(--pink);
}

.page-interactive-bg {
  --spotlight-x: 70%;
  --spotlight-y: 18%;
  --spotlight-one: 34 211 238;
  --spotlight-two: 134 239 172;
  --page-bg-start: #fbfdf8;
  --page-bg-mid: #f4fbf9;
  --page-bg-end: #eefaf8;
  background-color: var(--page-bg-mid);
  background-image:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      rgb(var(--spotlight-one) / 0.42) 0,
      rgb(var(--spotlight-one) / 0.18) 18rem,
      rgb(var(--spotlight-one) / 0) 34rem
    ),
    radial-gradient(
      circle at calc(var(--spotlight-x) + 12%) calc(var(--spotlight-y) + 16%),
      rgb(var(--spotlight-two) / 0.34) 0,
      rgb(var(--spotlight-two) / 0.14) 14rem,
      rgb(var(--spotlight-two) / 0) 30rem
    ),
    linear-gradient(135deg, var(--page-bg-start) 0%, var(--page-bg-mid) 48%, var(--page-bg-end) 100%),
    linear-gradient(rgb(15 23 42 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(15 23 42 / 0.045) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
  transition: background-position 0.12s ease-out;
}

.page-home {
  --spotlight-one: 34 211 238;
  --spotlight-two: 134 239 172;
  --page-bg-start: #fbfdf8;
  --page-bg-mid: #f4fbf9;
  --page-bg-end: #eefaf8;
  min-height: 100vh;
}

.page-about {
  --spotlight-one: 134 239 172;
  --spotlight-two: 56 189 248;
  --page-bg-start: #fbfff8;
  --page-bg-mid: #f5fbf7;
  --page-bg-end: #eefaf6;
}

.page-contact {
  --spotlight-one: 125 211 252;
  --spotlight-two: 251 207 232;
  --page-bg-start: #fbfdff;
  --page-bg-mid: #f4fbff;
  --page-bg-end: #f9f0f7;
}

.page-partners {
  --spotlight-one: 196 181 253;
  --spotlight-two: 74 222 128;
  --page-bg-start: #fdfbff;
  --page-bg-mid: #f7f4ff;
  --page-bg-end: #effaf3;
}

.page-whitepaper {
  --spotlight-one: 250 204 21;
  --spotlight-two: 45 212 191;
  --page-bg-start: #fffdf4;
  --page-bg-mid: #f8fbef;
  --page-bg-end: #effaf8;
}

.page-green {
  background: var(--green);
}

.page-purple {
  background: var(--purple);
}

.page-blue {
  background: var(--blue);
}

.page-white {
  background: var(--sys-color-white);
}

.home-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.home-grid > * {
  min-width: 0;
}

.single-grid {
  display: grid;
  gap: 2rem;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 0.95;
}

.hero-subtitle {
  margin: 0;
  font-size: clamp(1.35rem, 3.9vw, 2.65rem);
  line-height: 1.1;
}

.trademark-mark {
  display: inline-block;
  margin-left: 0.08em;
  font-size: 0.42em;
  line-height: 1;
  vertical-align: super;
  transform-origin: 48% 100%;
}

.brand-tagline .trademark-mark {
  font-size: 0.7em;
}

.slogan-lockup {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: var(--slogan-font-size, 1.08em);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.slogan-lockup .trademark-mark {
  font-size: 0.7em;
  vertical-align: super;
}

.home-brand-name {
  width: fit-content;
  max-width: 100%;
}

.wave-text {
  display: inline-block;
  white-space: nowrap;
}

.wave-char {
  display: inline-block;
  transform: translateY(0) rotate(0deg);
  transform-origin: 50% 70%;
  will-change: transform;
}

.is-waving .wave-char {
  animation: text-wave 0.72s ease-in-out both;
  animation-delay: calc(var(--wave-index) * 34ms);
}

.is-waving .trademark-mark {
  animation: trademark-hammer 0.64s cubic-bezier(0.2, 0.88, 0.32, 1.22) forwards;
  animation-delay: var(--hammer-delay, 1.32s);
}

@keyframes text-wave {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  28% {
    transform: translateY(-0.14em) rotate(-2deg);
  }

  58% {
    transform: translateY(0.06em) rotate(1.5deg);
  }
}

@keyframes trademark-hammer {
  0% {
    transform: translateY(-0.48em) rotate(-34deg);
  }

  42% {
    transform: translateY(0.08em) rotate(13deg) scaleY(0.9);
  }

  62% {
    transform: translateY(-0.08em) rotate(-7deg) scaleY(1.04);
  }

  82%,
  100% {
    transform: translateY(0) rotate(0deg) scaleY(1);
  }
}

.hero-copy {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
}

.card {
  background: var(--sys-color-white);
  border: 3px solid var(--sys-color-black);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 7px 7px 0 rgb(0 0 0 / 1);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 5px 5px 0 rgb(0 0 0 / 1);
}

.home-grid .card {
  height: 100%;
}

.home-card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.home-section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-card-content .section-title,
.home-section-heading .section-title,
.home-section-heading .section-subtitle,
.home-card-content p,
.home-copy p {
  margin: 0;
}

.home-card-content p,
.home-copy {
  color: #334155;
}

.home-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 68ch;
}

.home-why-copy {
  max-width: none;
}

.home-why-heading .section-subtitle {
  font-size: clamp(1.05rem, 2.7vw, 1.55rem);
}

.home-why-copy .text-xl {
  color: var(--sys-color-black);
}

.about-letter-grid {
  justify-items: center;
}

.about-letter-grid .card {
  width: min(100%, 58rem);
}

.letter-card-content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.founder-letter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 76ch;
  color: #334155;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
}

.founder-letter p {
  margin: 0;
}

.founder-letter .section-subtitle {
  color: var(--sys-color-black);
}

.founder-letter strong {
  color: var(--sys-color-black);
}

.founder-letter .slogan-lockup,
.contact-intro .slogan-lockup {
  color: var(--sys-color-black);
}

.founder-signature {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  color: var(--sys-color-black);
}

.contact-card-content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

.contact-card-content .section-title {
  margin-bottom: 0;
}

.contact-intro {
  max-width: 100%;
  margin: -0.15rem 0 clamp(0.4rem, 1.2vw, 0.8rem);
  color: #0f172a;
  font-size: clamp(1rem, 4.8vw, 2.15rem);
  font-weight: 500;
  line-height: 1.14;
  white-space: nowrap;
}

.contact-intro .slogan-lockup {
  --slogan-font-size: 1em;
}

.contact-list {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  font-style: normal;
}

.contact-item {
  display: grid;
  gap: 0.25rem;
}

.contact-label {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  line-height: 1.2;
}

.contact-email {
  width: max-content;
  max-width: 100%;
  color: #334155;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  overflow-wrap: anywhere;
}

.section-title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 5vw, 3.75rem);
  line-height: 1.15;
}

.section-subtitle {
  margin: 0;
  font-size: clamp(1.35rem, 3.8vw, 2.1rem);
  line-height: 1.2;
}

.muted {
  color: #3f3f46;
}

.text-lg {
  font-size: 1.05rem;
}

.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.9rem;
}

.text-xl {
  font-size: 1.2rem;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-vision-actions {
  margin-top: auto;
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.btn {
  background: var(--sys-color-white);
  border: 2px solid var(--sys-color-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  box-shadow: 5px 5px 0 rgb(0 0 0 / 1);
  transform: translate(0, 0);
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    outline-color 0.18s ease,
    transform 0.18s ease;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  background:
    linear-gradient(135deg, #dcfce7 0%, #cffafe 100%);
  box-shadow:
    4px 4px 0 rgb(0 0 0 / 1),
    0 0 0 3px rgb(103 232 249 / 0.16);
  transform: translate(1px, 1px);
}

.btn:focus-visible {
  outline: 3px solid rgb(14 165 233 / 0.28);
  outline-offset: 3px;
}

.btn:active {
  box-shadow: 2px 2px 0 rgb(0 0 0 / 1);
  transform: translate(3px, 3px);
}

.whitepaper-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.whitepaper-grid > li {
  min-width: 0;
  height: 100%;
}

.whitepaper-grid > li > .card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.card-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.4;
}

.summary-image-wrap {
  border-radius: 0.5rem;
  border: 3px solid var(--sys-color-black);
  margin: 0;
  height: 14rem;
  overflow: hidden;
}

.summary-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.summary-actions {
  margin: 0;
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.whitepaper-grid > li > .card p {
  margin: 0;
}

.tags-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tags-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill-link {
  text-decoration: none;
}

.pill {
  display: inline-block;
  box-shadow: 3px 3px 0 rgb(0 0 0 / 1);
  user-select: none;
  background: var(--sys-color-white);
  border-radius: 9999px;
  border: 2px solid var(--sys-color-black);
  padding: 0.25rem 0.75rem;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
  font-size: 0.8rem;
}

.pill:hover {
  box-shadow: 5px 5px 0 rgb(0 0 0 / 1);
  background: var(--accent, #f9a8d4);
}

.draft-badge {
  border-radius: 9999px;
  border: 2px solid var(--sys-color-black);
  background: #86efac;
  padding: 0.2rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.whitepaper-post-page {
  padding-block: clamp(1.25rem, 4vw, 3rem);
}

.whitepaper-post-page > * {
  width: min(100%, 1120px);
}

.whitepaper-post-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  justify-content: center;
}

.toc-wrap {
  display: none;
}

.toc-wrap ul {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 3px solid var(--sys-color-black);
}

.toc-link {
  color: #1f2937;
  text-decoration: none;
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.3;
  font-size: 0.9rem;
}

.toc-link:hover {
  color: #14532d;
  text-decoration: underline;
}

.prose {
  width: min(100%, 760px);
  min-width: 0;
  font-size: 1.04rem;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-family: 'Outfit', sans-serif;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.prose h1 {
  font-size: clamp(2.1rem, 6vw, 3.5rem);
  line-height: 1.05;
}

.prose h2 {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
}

.prose h3 {
  font-size: clamp(1.25rem, 3vw, 1.55rem);
}

.prose p,
.prose li,
.prose blockquote {
  color: #334155;
}

.prose a {
  color: #14532d;
}

.prose blockquote {
  margin-left: 0;
  border-left: 4px solid #94a3b8;
  padding-left: 1rem;
}

.prose hr {
  border: none;
  border-top: 2px solid #94a3b8;
  margin: 1.5rem 0;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
}

.prose pre {
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding: 1rem;
}

.prose pre,
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.meta {
  color: var(--slate);
  font-size: 0.95rem;
}

.link-inline {
  text-decoration: underline;
}

.recent-section {
  margin-top: 2rem;
}

.recent-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.desktop-only {
  display: none;
}

.mobile-only {
  display: inline-block;
}

.partners-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.partner-field-grid {
  margin: clamp(1.4rem, 3vw, 2rem) 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.partner-field {
  min-width: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--sys-color-black);
  scroll-margin-top: 1rem;
}

.partner-field-number {
  margin: 0 0 0.25rem;
  color: var(--stone);
  font-size: 0.9rem;
  font-weight: 700;
}

.partner-field-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  line-height: 1.05;
}

.partner-field-description {
  margin: 0;
  color: #0f172a;
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  line-height: 1.45;
}

.partner-field-points {
  margin: 0.85rem 0 0;
  padding-left: 1.15rem;
  color: #0f172a;
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.45;
}

.partner-field-points li + li {
  margin-top: 0.35rem;
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.partner-logo-wrap {
  height: 3rem;
  display: flex;
  align-items: center;
}

.partner-logo {
  display: block;
  max-height: 100%;
  max-width: 120px;
  object-fit: contain;
}

.partner-name {
  margin: 0;
  font-size: 1.1rem;
}

.partner-role {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.partner-description {
  margin: 0;
  font-size: 0.9rem;
}

.link-underline {
  text-decoration: underline;
}

.not-found-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.not-found-code {
  margin: 0;
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
}

.not-found-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
}

.not-found-copy {
  margin: 0;
  font-size: clamp(1.1rem, 4vw, 1.8rem);
}

.home-link {
  width: fit-content;
  padding: 0.5rem 1rem;
  border: 2px solid var(--sys-color-black);
  text-decoration: none;
}

.home-link:hover {
  background: #f87171;
}

.site-footer {
  background: var(--sys-color-black);
  color: var(--sys-color-white);
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.2rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  gap: clamp(0.6rem, 2.5vw, 1.5rem);
  font-size: clamp(0.78rem, 3.2vw, 1rem);
}

.footer-line {
  margin: 0;
  white-space: nowrap;
}

.slogan-lockup-standalone {
  --slogan-font-size: 1em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.outfit {
  font-family: 'Outfit', sans-serif;
}

.poppins {
  font-family: 'Poppins', sans-serif;
}

.righteous {
  font-family: 'Righteous', sans-serif;
}

.sanchez {
  font-family: 'Outfit', sans-serif;
}

.dm-serif {
  font-family: 'Outfit', sans-serif;
}

@media (min-width: 768px) {
  .site-header {
    align-items: center;
  }

  .brand-name {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
  }

  .brand-tagline {
    margin-top: 0;
    font-size: clamp(0.95rem, 2vw, 1rem);
  }

  .site-nav a {
    font-size: 1.1rem;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .grid-span-4 {
    grid-column: span 1;
  }

  .grid-span-8 {
    grid-column: 1 / -1;
  }

  .desktop-only {
    display: inline-block;
  }

  .mobile-only {
    display: none;
  }

  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .whitepaper-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hero-copy {
    font-size: clamp(0.9rem, 1.35vw, 1.25rem);
    white-space: nowrap;
  }

  .home-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid-span-4 {
    grid-column: span 4;
  }

  .grid-span-8 {
    grid-column: span 8;
  }

  .home-why-content {
    display: grid;
    grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
  }

  .home-why-heading {
    gap: 1rem;
    max-width: 24rem;
    padding-top: 0.15rem;
  }

  .home-why-heading .section-subtitle {
    white-space: nowrap;
  }

  .home-why-copy {
    max-width: none;
    padding-top: 0.25rem;
  }

  .partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .whitepaper-post-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 760px);
    align-items: start;
  }

  .toc-wrap {
    display: block;
    position: sticky;
    top: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .whitepaper-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-waving .wave-char,
  .is-waving .trademark-mark {
    animation: none;
  }
}