/* Base Styles
--------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

:root {
  --font-headings: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
}
/* ============================================================================= */

/* TEST AREA: uncomment lines below to test different font pairings  */

/* @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400&display=swap"); */
/* @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"); */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); */

:root {
  --placeholder: 0;
  /* --font-headings: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; */
  /* --font-headings: "Inter", ui-sans-serif, system-ui, sans-serif; */

  /* --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; */
  /* --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; */
}

/* ============================================================================= */
body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
}


/* Headings
--------------------------------------------*/
.hero-head h1,
.section-head h2 {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.hero-head h1 {
  font-size: clamp(2.4rem, 5vw, 4.75rem);
  font-size: 3.5rem;
  line-height: 0.98;
  letter-spacing: -2.0px;
  margin-bottom: 1.0rem;
}
.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-size: 2.0rem;
  line-height: 1.30;
  letter-spacing: -0.75px;
  margin-bottom: 0.75rem;
}
.hero-head p,
.section-head p {
  max-width: 41.25rem;
  color: var(--muted-foreground);
  font-size: var(--text-lg);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 35rem) {
  .hero-head h1 {
    font-size: 2.5rem;
  }
}


/* Elements
--------------------------------------------*/
strong {
  font-weight: var(--font-weight-bold);
}
a {
  color: inherit;
  text-decoration: none;
}
code {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  width: fit-content;
  min-width: calc(var(--spacing) * 5);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  border-radius: var(--radius-sm);
  background-color: var(--color-muted);
  padding-inline: calc(var(--spacing) * 1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-foreground);
}
.soft code {
  background-color: white;
}


/* Misc
--------------------------------------------*/
.btn,
.btn-lg {
  font-weight: var(--font-weight-bold);
}
.footnote {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}
.footnote::before {
  content: "✳ ";
}