/* Componentes compartilhados pelas LPs (Família e Imigrantes).
   Motivo visual: o arco (porta, casa, lugar seguro), em filetes dourados e molduras.
   --wa / --wa-hover só em .btn--wa e .wa-float. Dourado só em filetes e detalhes. */

:root {
  --arch: 999px 999px var(--radius) var(--radius);
  --hairline: color-mix(in srgb, var(--gold-500) 55%, transparent);
  --weave:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--bone-200) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bone-200) 4%, transparent) 0 1px, transparent 1px 7px);
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.btn--wa {
  background: var(--wa);
  color: var(--paper);
}

.btn--wa:hover {
  background: var(--wa-hover);
  color: var(--paper);
}

.btn--wa:active {
  transform: translateY(1px);
}

.btn--sm {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.btn--lg {
  min-height: 56px;
  padding: var(--space-4) var(--space-8);
  font-size: 1.0625rem;
}

/* ---------- Topo ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) max(var(--space-4), calc((100% - var(--container)) / 2));
  color: var(--paper);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
}

.brand:hover {
  color: var(--paper);
}

.brand__mark {
  display: block;
  width: auto;
  height: 3.25rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* No celular o CTA principal está logo abaixo, no hero, e o botão flutuante está sempre visível. */
.topbar__cta {
  display: none;
}

@media (min-width: 40rem) {
  .topbar__cta {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(44rem, 92svh);
  display: flex;
  align-items: flex-end;
  padding: 7.5rem max(var(--space-4), calc((100% - var(--container)) / 2)) var(--space-16);
  background-color: var(--moss-950);
  background:
    var(--weave),
    radial-gradient(120% 80% at 100% 0%, var(--moss-700) 0%, transparent 60%),
    var(--moss-950);
  color: var(--paper);
}

/* Dois arcos concêntricos em filete dourado: o "lugar seguro" da marca. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border: 1px solid var(--gold-500);
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

.hero::before {
  right: -6rem;
  bottom: 0;
  width: 19rem;
  height: 30rem;
  opacity: 0.55;
}

.hero::after {
  right: -3.5rem;
  bottom: 0;
  width: 14rem;
  height: 25rem;
  opacity: 0.35;
}

.hero__body {
  max-width: 38rem;
}

.hero h1 {
  margin-bottom: var(--space-6);
  color: var(--paper);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--space-8);
  font-size: 1.125rem;
  color: var(--aloe-100);
}

.hero .btn {
  width: 100%;
}

@media (min-width: 40rem) {
  .hero .btn {
    width: auto;
  }
}

@media (min-width: 56rem) {
  .hero {
    align-items: center;
    padding-top: 9rem;
    padding-bottom: 6rem;
  }

  .hero__body {
    max-width: 46rem;
  }

  .hero::before {
    right: max(var(--space-8), calc((100% - var(--container)) / 2));
    width: 22rem;
    height: 34rem;
    opacity: 0.7;
  }

  .hero::after {
    right: calc(max(var(--space-8), calc((100% - var(--container)) / 2)) + 3rem);
    width: 16rem;
    height: 28rem;
    opacity: 0.45;
  }
}

/* ---------- Títulos de seção ---------- */

.section-title {
  max-width: 22ch;
  margin-bottom: var(--space-8);
  color: var(--moss-950);
}

@media (min-width: 56rem) {
  .section {
    padding-block: 6rem;
  }

  .section-title {
    margin-bottom: var(--space-12);
  }
}

/* ---------- Serviços ---------- */

.services {
  display: grid;
  gap: var(--space-12);
}

.services .section-title {
  margin-bottom: 0;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--gold-500);
  border-top: 1px solid var(--hairline);
}

.service h3 {
  margin-bottom: var(--space-4);
  color: var(--moss-950);
}

.service p {
  max-width: 60ch;
}

.service .btn {
  width: 100%;
  margin-top: var(--space-6);
}

/* Divórcio: o serviço que o anúncio promete, num painel próprio com topo em arco. */
.service--featured {
  padding: var(--space-12) var(--space-6) var(--space-8);
  border-top: 0;
  border-radius: 10rem 10rem var(--radius) var(--radius);
  background: var(--bone-200);
}

.service--featured h3 {
  font-size: clamp(2.25rem, 8vw, 3rem);
}

.service__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 40rem) {
  .service .btn {
    width: auto;
    margin-top: auto;
  }

  .service p:last-of-type {
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 56rem) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-16);
    row-gap: var(--space-12);
  }

  .services .section-title,
  .service--featured {
    grid-column: 1 / -1;
  }

  .service--featured {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius);
    border-start-start-radius: 14rem;
  }

  .service--featured h3 {
    margin-bottom: 0;
    font-size: 5rem;
    line-height: 1;
  }
}

/* ---------- Como funciona ---------- */

.steps {
  background: var(--aloe-100);
}

.steps__list {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-8);
}

.steps__list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--space-4);
}

.steps__list li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 0.85;
  color: var(--moss-700);
}

.steps__list h3 {
  margin-bottom: var(--space-2);
  font-size: 1.625rem;
  color: var(--moss-950);
}

.steps__list p {
  color: var(--moss-900);
}

@media (min-width: 56rem) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .steps__list li {
    grid-template-columns: 1fr;
    padding-top: var(--space-6);
    border-top: 1px solid var(--moss-500);
  }

  .steps__list li::before {
    grid-row: auto;
    margin-bottom: var(--space-4);
    font-size: 4rem;
  }
}

/* ---------- Advogadas ---------- */

.about {
  display: grid;
  gap: var(--space-16);
}

.about .section-title {
  margin-bottom: 0;
}

.lawyer {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.lawyer__photo,
.avatar {
  width: min(100%, 17rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--gold-500);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--hairline);
}

.lawyer__photo {
  object-fit: cover;
  object-position: 47% 30%;
  background: var(--aloe-100);
}

.avatar--monogram {
  display: grid;
  place-items: center;
  padding-top: 2.5rem;
  background-color: var(--moss-800);
  background: var(--weave), var(--moss-800);
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-300);
}

.lawyer h3 {
  color: var(--moss-950);
}

.lawyer__oab {
  margin: var(--space-1) 0 var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--moss-700);
}

.lawyer__more {
  margin-top: var(--space-4);
  border-top: 1px solid var(--gold-500);
  border-top: 1px solid var(--hairline);
  font-size: 0.96875rem;
  color: var(--moss-900);
}

.lawyer__more summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-8) var(--space-2) 0;
  font-weight: 600;
  color: var(--moss-800);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
  list-style: none;
}

.lawyer__more summary::-webkit-details-marker {
  display: none;
}

.lawyer__more summary:hover {
  color: var(--moss-950);
}

/* Sinal de + que vira − ao abrir (mesmo tratamento do FAQ, menor). */
.lawyer__more summary::before,
.lawyer__more summary::after {
  content: '';
  position: absolute;
  right: var(--space-1);
  top: 50%;
  width: 0.875rem;
  height: 2px;
  margin-top: -1px;
  background: var(--moss-700);
  transition: transform 200ms ease;
}

.lawyer__more summary::after {
  transform: rotate(90deg);
}

.lawyer__more[open] summary::after {
  transform: rotate(0deg);
}

.lawyer__more[open] summary {
  margin-bottom: var(--space-2);
}

@media (min-width: 56rem) {
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-16);
    row-gap: var(--space-12);
  }

  .about .section-title {
    grid-column: 1 / -1;
  }
}

/* ---------- Perguntas frequentes ---------- */

.faq {
  background: var(--aloe-100);
}

.faq > * {
  max-width: 48rem;
}

.faq details {
  border-top: 1px solid var(--moss-500);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--moss-500);
}

.faq summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: var(--space-6) var(--space-12) var(--space-6) 0;
  font-family: var(--font-display);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--moss-950);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Sinal de + que vira − ao abrir. */
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 1.125rem;
  height: 2px;
  margin-top: -1px;
  background: var(--moss-700);
  transition: transform 200ms ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--moss-800);
}

.faq details p {
  max-width: 62ch;
  padding: 0 var(--space-8) var(--space-6) 0;
  color: var(--moss-900);
}

/* Desktop: título à esquerda, perguntas na coluna da direita, na largura do container como as demais seções. */
@media (min-width: 56rem) {
  .faq {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-16);
    align-items: start;
  }

  .faq > * {
    max-width: none;
  }

  .faq .section-title {
    grid-column: 1;
    grid-row: 1 / span 12;
    position: sticky;
    top: var(--space-12);
    margin-bottom: 0;
  }

  .faq > details {
    grid-column: 2;
  }
}

/* ---------- CTA final ---------- */

.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background-color: var(--moss-950);
  background: var(--weave), var(--moss-950);
  color: var(--paper);
}

.final-cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(30rem, 86%);
  height: 88%;
  transform: translateX(-50%);
  border: 1px solid var(--gold-500);
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: 0.5;
  pointer-events: none;
}

.final-cta h2 {
  max-width: 18ch;
  margin: 0 auto var(--space-4);
  color: var(--paper);
}

.final-cta p {
  max-width: 34rem;
  margin: 0 auto var(--space-8);
  color: var(--aloe-100);
}

/* ---------- Rodapé ---------- */

.footer {
  padding: var(--space-12) max(var(--space-4), calc((100% - var(--container)) / 2)) calc(var(--space-16) + var(--space-8));
  background: var(--moss-900);
  color: var(--aloe-100);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer p {
  max-width: 60ch;
  margin-bottom: var(--space-3);
}

.footer a {
  display: inline-block;
  padding-block: var(--space-3);
  color: var(--paper);
}

.footer a:hover {
  color: var(--gold-300);
}

/* ---------- Botão flutuante de WhatsApp ---------- */

.wa-float {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--wa);
  color: var(--paper);
  box-shadow: 0 0 0 3px var(--paper);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--paper) 70%, transparent),
    0 10px 24px -8px color-mix(in srgb, var(--moss-950) 70%, transparent);
  transition: background-color 160ms ease, transform 160ms ease;
}

.wa-float:hover {
  background: var(--wa-hover);
  color: var(--paper);
  transform: translateY(-2px);
}

.wa-float:focus-visible {
  outline: 3px solid var(--moss-950);
  outline-offset: 4px;
  border-radius: 50%;
}

@media (min-width: 56rem) {
  .wa-float {
    right: var(--space-8);
    bottom: var(--space-8);
    width: 4rem;
    height: 4rem;
  }
}

/* Celular deitado (ex.: 844x390): sem folga grande no topo, o CTA do hero fica na primeira tela. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding-top: 5rem; /* a topbar é absoluta (~76px): reserva só o necessário */
    padding-bottom: var(--space-6);
  }

  .hero h1 {
    margin-bottom: var(--space-3);
    font-size: 2.25rem;
  }

  .hero__lead {
    margin-bottom: var(--space-4);
  }
}

/* =====================================================================
   LP Imigrantes: componentes novos. Nada acima foi alterado; a Família não usa estas classes.
   ===================================================================== */

/* ---------- Seletor de idioma (PT | EN | ES) ---------- */

.topbar--lang {
  gap: var(--space-2);
}

.lang {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lang a {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--aloe-100);
  text-decoration: none;
}

.lang a + a {
  border-left: 1px solid var(--gold-500);
  border-left: 1px solid var(--hairline);
}

.lang a:hover {
  color: var(--paper);
}

/* Idioma ativo: texto dourado claro, mais peso e um filete sob o código. */
.lang a[aria-current='page'] {
  font-weight: 600;
  color: var(--gold-300);
}

.lang a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  width: 1.25rem;
  height: 2px;
  margin-left: -0.625rem;
  background: var(--gold-300);
}

/* Celular estreito: o nome da marca encolhe e, em 320 px, fica só o monograma (o link mantém o aria-label). */
@media (max-width: 25rem) {
  .topbar--lang .brand {
    gap: var(--space-2);
  }

  .topbar--lang .brand__name {
    font-size: 1.125rem;
  }
}

@media (max-width: 22.4rem) {
  .topbar--lang .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Hero com texto longo e saudação multilíngue ---------- */

.hero--dense {
  padding-top: 6rem;
  padding-bottom: var(--space-8);
}

/* A saudação não quebra linha: sem isto ela alargaria o corpo do hero além da tela. */
.hero--dense .hero__body {
  width: 100%;
  min-width: 0;
}

.hero--dense h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(2.125rem, 8.6vw, 4.25rem);
}

.hero--dense .hero__lead {
  margin-bottom: var(--space-6);
  font-size: 1rem;
  line-height: 1.6;
}

/* 320 px: um pouco menos de folga no topo para o CTA caber na primeira tela. */
@media (max-width: 22.4rem) {
  .hero--dense {
    padding-top: 5.25rem;
  }

  .hero--dense .hero__lead {
    font-size: 0.9375rem;
  }

  /* Deixa espaço à direita para o botão flutuante do WhatsApp não cobrir o CTA do hero. */
  .hero .btn {
    width: calc(100% - 4.5rem);
  }
}

@media (min-width: 40rem) {
  .hero--dense .hero__lead {
    font-size: 1.125rem;
    line-height: 1.65;
  }
}

@media (min-width: 56rem) {
  .hero--dense {
    padding-top: 9rem;
    padding-bottom: 6rem;
  }

  .hero--dense h1 {
    margin-bottom: var(--space-6);
  }

  .hero--dense .hero__lead {
    max-width: 40rem;
    margin-bottom: var(--space-8);
  }

}

@media (max-height: 30rem) and (orientation: landscape) {
  .hero--dense {
    padding-top: 5rem;
    padding-bottom: var(--space-6);
  }

  .hero--dense h1 {
    font-size: 2.25rem;
  }
}

/* ---------- Situações de irregularidade ---------- */

.pain {
  display: grid;
  gap: var(--space-8);
  background: var(--aloe-100);
}

.pain .section-title {
  margin-bottom: var(--space-4);
}

.pain__intro {
  max-width: 34rem;
  color: var(--moss-900);
}

/* Cada situação com um pequeno arco (a "porta" da marca): uma lista de casos, não de alertas. */
.pain__list {
  list-style: none;
  display: grid;
  border-top: 1px solid var(--moss-500);
}

.pain__list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-3) 0 var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--moss-500);
  font-weight: 500;
  line-height: 1.4;
  color: var(--moss-950);
}

.pain__list li::before {
  content: '';
  position: absolute;
  left: 0.125rem;
  top: 50%;
  width: 0.75rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 1.5px solid var(--moss-700);
  border-bottom-width: 0;
  border-radius: 999px 999px 0 0;
}

.pain__answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.pain__outro {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--moss-950);
}

.pain__answer .btn {
  width: 100%;
}

@media (min-width: 40rem) {
  .pain__answer .btn {
    width: auto;
  }

  .pain__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
    border-top: 0;
  }

  .pain__list li:nth-child(-n + 2) {
    border-top: 1px solid var(--moss-500);
  }
}

@media (min-width: 56rem) {
  .pain {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-16);
    row-gap: var(--space-12);
    align-items: start;
  }

  .pain .section-title {
    margin-bottom: var(--space-6);
  }

  .pain__answer {
    grid-column: 2;
  }
}

/* ---------- Advogada em destaque (Direito Migratório é da Tálita) ---------- */

.lawyer--lead {
  padding: var(--space-8) var(--space-6);
  border-radius: 10rem 10rem var(--radius) var(--radius);
  background: var(--bone-200);
}

.lawyer--lead .lawyer__photo {
  box-shadow: 0 0 0 1px var(--bone-200), 0 0 0 2px var(--gold-500);
}

.lawyer--lead .lawyer__oab {
  color: var(--moss-800);
}

/* A outra advogada fica numa linha mais discreta, com retrato menor. */
.lawyer--lead ~ .lawyer:not(.lawyer--lead) {
  grid-template-columns: 7rem minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}

.lawyer--lead ~ .lawyer .avatar {
  width: 7rem;
  padding-top: 1.25rem;
  font-size: 2.5rem;
}

@media (max-width: 30rem) {
  .lawyer--lead ~ .lawyer:not(.lawyer--lead) {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 56rem) {
  .lawyer--lead,
  .lawyer--lead ~ .lawyer {
    grid-column: 1 / -1;
  }

  .lawyer--lead {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-12);
    border-radius: var(--radius);
    border-start-start-radius: 12rem;
  }

  .lawyer--lead .lawyer__photo {
    width: 18rem;
  }

  .lawyer--lead h3 {
    font-size: 2.5rem;
  }

  .lawyer--lead .lawyer__text p:last-child {
    max-width: 60ch;
  }

  .lawyer--lead ~ .lawyer:not(.lawyer--lead) {
    grid-template-columns: 18rem minmax(0, 1fr);
    column-gap: var(--space-12);
    padding-inline: var(--space-12);
  }

  .lawyer--lead ~ .lawyer .avatar {
    justify-self: end;
    width: 9rem;
    font-size: 3rem;
  }

  .lawyer--lead ~ .lawyer .lawyer__text p:last-child {
    max-width: 60ch;
  }
}

/* =====================================================================
   Texto corrido (política de privacidade). Só acrescenta; nada acima foi alterado.
   ===================================================================== */

/* Topo sobre fundo liso: a .topbar padrão é absoluta e foi pensada para ficar sobre o hero escuro. */
.topbar--solid {
  position: relative;
  background-color: var(--moss-950);
}

.prose {
  max-width: 65ch;
  margin-inline: auto;
  padding-block: var(--space-12) var(--space-16);
  padding-inline: var(--space-4);
  background-color: var(--paper);
  color: var(--ink);
}

.prose h1,
.prose h2 {
  font-family: var(--font-display);
  color: var(--moss-950);
  text-wrap: balance;
}

.prose h1 {
  margin-bottom: var(--space-6);
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose a {
  color: var(--moss-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  color: var(--moss-950);
}