/* ==========================================================================
   Kabine — Seções
   Ritmo de contraste: escuro > claro x4 > escuro > claro > escuro > claro x2
   > vermelho chapado > escuro.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO */

.hero {
  /* Quanto do mock o hero corta na borda inferior. O corte cai exatamente na
     troca de fundo escuro/claro, então lê como "a tela continua abaixo". */
  --hero-crop: clamp(60px, 9vw, 130px);
  padding-top: clamp(140px, 15vw, 200px);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Brilho vermelho da marca — única cor grande que não é ação nesta página. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 46% at 50% -4%, rgb(254 1 0 / .20), transparent 68%),
    radial-gradient(40% 32% at 88% 12%, rgb(254 1 0 / .07), transparent 70%);
  pointer-events: none;
  z-index: -2;
}

/* Malha fina, desaparecendo para baixo: dá textura sem competir com o texto. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}

.hero__inner .display-xl { max-width: 17ch; }

/* O lead do hero da referência anda em 1.20, bem mais apertado que os leads
   de seção — é ele que dá o ar de bloco de display, não de parágrafo. */
.hero__inner .lead { max-width: 58ch; text-align: center; line-height: 1.2; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* O print em plano inclinado.

   Duas camadas de propósito: .hero__shot guarda a perspectiva e a animação de
   entrada (anim.css zera o transform dela ao revelar), e .hero__plane guarda
   a inclinação. Se o 3D morasse no mesmo elemento, o transform: none da
   entrada apagaria a inclinação inteira.

   Sangra de container a container: o plano precisa ser cortado pelas bordas
   da tela, senão ele lê como um card torto em vez de uma tela que continua
   fora do quadro. Sem transform aqui, de novo por causa da entrada. */
.hero__shot {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-7);
  margin-bottom: calc(-1 * var(--hero-crop));

  /* Largura de container, não da tela inteira. Medido na referência: o palco
     deles ocupa 1232 de 1400px de viewport, ~88%, com respiro dos dois lados.
     Em 100vw o print virava o assunto da dobra; dentro do container ele volta
     a ser apoio do texto.

     E é o palco que decide quanto de tela o print ocupa: o plano é maior que
     ele e sai fora, quem corta é o overflow do .hero. Por isso dá para mexer
     no tamanho do print sem crescer o hero. */
  height: clamp(260px, 150px + 14vw, 400px);

  perspective: 2000px;
  perspective-origin: 50% 0%;
}

.hero__plane {
  --rx: 48deg;    /* tomba para trás: é o ângulo que faz a tela recuar */
  --ry: -16deg;   /* gira de lado, para a borda direita vir à frente */
  --rz: 5deg;     /* desalinha do eixo da página, senão parece só encolhida */
  --plane-w: 76%; /* do palco. Menor que ele: é o que deixa respiro dos lados */

  position: absolute;
  top: 0;
  left: 50%;
  width: var(--plane-w);
  /* translate é propriedade própria, separada de transform: centraliza a caixa
     sem disputar com a rotação, que precisa da origem no topo. */
  translate: -50% 0;
  transform-origin: 50% 0%;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz));
}

/* Ao passar o mouse, o plano endireita um pouco — o gesto de quem se inclina
   para ler a tela. Não é um lift genérico: o que muda é a legibilidade, que é
   justamente o motivo de alguém apontar o cursor para lá.

   Quem escuta o hover é o palco, não o plano. Medido: ao endireitar, a área
   projetada do plano ENCOLHE 26px à esquerda e 34px no topo. Se o gatilho
   estivesse no próprio plano, um cursor parado nessa faixa ficaria fora →
   dentro → fora dele, piscando em laço. O palco não se move nunca, então o
   estado é estável onde quer que o ponteiro esteja.

   Só onde existe cursor de verdade — em toque, :hover gruda depois do tap. O
   prefers-reduced-motion global do base.css já zera a duração. */
@media (hover: hover) {
  .hero__plane { transition: transform 600ms var(--ease-out); }

  .hero__shot:hover .hero__plane {
    --rx: 38deg;
    --ry: -11deg;
    --rz: 3deg;
  }
}

/* No celular a inclinação forte vira borrão: o plano é estreito, o mock
   escala pela largura dele e o texto chega a 7px torto. Aqui o print quase
   deita de frente e o plano fica mais largo, para o mock crescer junto. O
   corte embaixo continua fazendo o trabalho de ocupar menos tela. */
@media (max-width: 640px) {
  /* Aqui o problema se inverte. Na tela grande o print era largo demais e
     precisava caber no container; no celular ele já é pequeno, e prender no
     container derrubava o mock para 6px. Então o palco volta a sangrar de
     ponta a ponta e o plano fica maior que ele, para o mock crescer. */
  .hero__shot {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .hero__plane {
    --rx: 26deg;
    --ry: 0deg;
    --rz: 0deg;
    --plane-w: 150%;
  }
}



/* ----------------------------------------------------------------- MOSAICO
   Grade de 6 colunas. O gap é folgado de propósito: cada célula lê como um
   card próprio, com ar suficiente entre elas para o destaque no hover ter
   para onde crescer sem encostar na vizinha.
   Linha 1: dois cards de span 3. Linha 2: três de span 2. */

.mosaic-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-bottom: var(--sp-8);
}

.mosaic-head .display-l { max-width: 16ch; }
.mosaic-head .lead { margin-top: var(--sp-2); }

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}

.tile {
  grid-column: span 2;
  min-height: clamp(300px, 27vw, 386px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  /* .js-anim .is-in zera o transform e vem depois na cascata (anim.css carrega
     após este arquivo), então o hover precisa de .mosaic na frente para ganhar
     em especificidade. O mesmo vale para as regras de hover abaixo. */
  transition:
    transform    var(--dur-slow) var(--ease),
    box-shadow   var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease),
    filter       var(--dur) var(--ease);
}

/* Destaque do card sob o cursor: sobe um pouco, ganha sombra e borda mais
   firmes e o fundo do mock clareia. :focus-within entra junto para quem
   navega por teclado ver o mesmo destaque. */
.mosaic .tile:hover,
.mosaic .tile:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-pop);
}

.tile__visual { transition: background-color var(--dur-slow) var(--ease); }

.mosaic .tile:hover .tile__visual,
.mosaic .tile:focus-within .tile__visual { background: var(--paper); }

/* Com um card em destaque, os outros recuam de leve — sem sumir, só o
   suficiente para o olho saber onde está. O recuo é filter e não opacity de
   propósito: opacity é a propriedade que anim.css usa para a entrada ao rolar,
   e as duas brigariam se o cursor entrasse no mosaico antes de ele animar. */
.mosaic:hover .tile:not(:hover):not(:focus-within) { filter: opacity(.72); }

@media (hover: none) {
  .mosaic:hover .tile:not(:hover):not(:focus-within) { filter: none; }
}

.tile--wide {
  grid-column: span 3;
  min-height: clamp(320px, 32vw, 465px);
}

.tile__visual {
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--sp-5);
  background: var(--ink-50);
}

.tile__text { padding: 16px 20px; }

/* Título e descrição no mesmo parágrafo, como na referência: o título é a
   primeira frase em escuro e a descrição segue em cinza. Não vira heading
   porque não é um nível de documento, é a legenda da célula. */
.tile__text h3 {
  font-size: var(--fs-h4);
  font-weight: var(--w-card);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h4);
  color: var(--text);
}

/* A referência usa cinza a 50% de opacidade aqui, que rende ~1,8:1 sobre
   branco. Trocado pelo nosso --text-muted (5,40:1): mesma hierarquia, sem
   reprovar em AA. */
.tile__text span {
  color: var(--text-muted);
  font-weight: 400;
}

@media (max-width: 1024px) {
  .mosaic-head { grid-template-columns: 1fr; gap: var(--sp-5); }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .tile,
  .tile--wide { grid-column: auto; min-height: clamp(300px, 42vw, 380px); }
}

@media (max-width: 640px) {
  .mosaic { grid-template-columns: 1fr; }
  /* Empilhado, quem manda na altura é o mock: com min-height fixo o mock, que
     cresce junto com a largura do tile, era cortado em cima e embaixo. */
  .tile,
  .tile--wide { min-height: 0; }
}

/* ---------------------------------------------- FUNCIONALIDADES PRIMÁRIAS
   Linhas alternadas: texto de um lado, print do outro. Sem card — o print
   flutua sobre o fundo, só com sombra própria, como na referência Outline. */

/* Perto dos 112px que separam seções inteiras, cada linha lia como seção
   própria. Em 96px as cinco leem como um grupo só. */
.rows {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 96px);
}

.row {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

/* A alternância é feita por grid-column explícito, e não por `order`: assim a
   ordem do DOM continua sempre título → imagem, que é a ordem certa para
   leitor de tela e para o empilhamento no mobile. */
.row--flip { grid-template-columns: 3fr 2fr; }
.row--flip .row__text { grid-column: 2; grid-row: 1; }
.row--flip .row__shot { grid-column: 1; grid-row: 1; }

.row__text { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Sem ícone e sem pills, a coluna vive só de tipografia. O h3 não usa .h4
   porque pertence ao tier de display, não ao de título de card. */
.row__text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);        /* 28 > 36, o tier de título de
                                            funcionalidade da referência */
  font-weight: var(--w-display);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
}

.row__text p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 42ch;
}

/* Print solto: sem borda e sem fundo. A sombra é o único apoio visual, por
   isso ela precisa ser mais presente que a dos cards da página.

   A perspectiva de 1400px é alta de propósito: quanto menor o valor, mais
   violenta a distorção. Em 1400px os 5° inclinam sem borrar o texto do mock.
   O espelhamento sai de --tilt, então a regra de transform existe uma vez só. */
.row__shot {
  /* Sinal conferido no navegador pela profundidade projetada das bordas:
     rotateY positivo traz a borda ESQUERDA para a frente. */
  --tilt: 5deg;               /* imagem à direita: borda esquerda vem à frente */
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  box-shadow:
    0 1px 1px rgb(11 13 15 / .04),
    0 18px 40px -18px rgb(11 13 15 / .28);
  transform: perspective(1400px) rotateY(var(--tilt)) rotateX(1.5deg);
  transition:
    transform  400ms var(--ease-out),
    box-shadow 400ms var(--ease-out);
}

.row--flip .row__shot { --tilt: -5deg; }   /* imagem à esquerda: espelha */

/* Guardado por hover:hover — em touch o :hover gruda depois do toque e o mock
   ficaria reto e levantado até tocar em outro lugar. */
@media (hover: hover) and (pointer: fine) {
  .row__shot:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-8px);
    box-shadow:
      0 2px 3px rgb(11 13 15 / .05),
      0 32px 64px -24px rgb(11 13 15 / .34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .row__shot,
  .row__shot:hover {
    transform: none;
    transition: none;
  }
}

/* Enquanto o print não existe, sem o tracejado a linha ficaria vazia. */
.row__shot.is-empty {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
}

@media (max-width: 860px) {
  .row,
  .row--flip { grid-template-columns: 1fr; gap: var(--sp-6); }
  .row--flip .row__text,
  .row--flip .row__shot { grid-column: 1; grid-row: auto; }
}

/* -------------------------------------------- FUNCIONALIDADES SECUNDÁRIAS */

.minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg-alt);
  transition: background-color var(--dur) var(--ease);
}

.mini:hover { background: var(--surface); }
.mini h3 { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }
.mini p { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-muted); }
.mini svg { width: 22px; height: 22px; color: var(--accent); }

/* Com 7 itens numa grade de 4 colunas a última célula ficaria vazia e, como o
   fundo do container é a cor da borda, apareceria como um bloco cinza. O
   último item ocupa duas colunas e fecha a linha. */
.minis > .mini:last-child { grid-column: span 2; }

@media (max-width: 1024px) {
  .minis { grid-template-columns: repeat(2, 1fr); }
  .minis > .mini:last-child { grid-column: auto; }
}
@media (max-width: 560px)  { .minis { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- KOPILOTO */

.kopiloto__grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 400px);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.kopiloto__steps { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }

.kstep { display: flex; gap: var(--sp-4); align-items: flex-start; }

.kstep__n {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.kstep h3 { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; margin-bottom: 2px; }
.kstep p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 46ch; }

@media (max-width: 860px) {
  .kopiloto__grid { grid-template-columns: 1fr; }
  .kopiloto__grid .zap { max-width: 360px; margin-inline: auto; }
}

/* ------------------------------------------------------------- DEPOIMENTOS */

.quotes { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  justify-content: space-between;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  grid-column: span 3;
}

.quote--feature {
  grid-column: span 6;
  background: var(--tint-red);
  border-color: var(--brand-200);
}

.quote--half { grid-column: span 6; }

.quote blockquote { color: var(--text); }
.quote--feature blockquote { font-size: var(--fs-lead); line-height: 1.5; }

.quote__who { display: flex; align-items: center; gap: var(--sp-3); }

.quote__avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-950);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.quote--feature .quote__avatar { background: var(--brand-600); }

.quote__name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; }
.quote__role { font-size: var(--fs-caption); color: var(--text-muted); }

.stars { display: flex; gap: 2px; color: var(--brand-500); }
.stars svg { width: 15px; height: 15px; }

@media (max-width: 1024px) {
  .quote, .quote--half { grid-column: span 6; }
  .quote--feature { grid-column: span 12; }
}
@media (max-width: 640px) {
  .quote, .quote--half, .quote--feature { grid-column: span 12; }
}

/* ------------------------------------------------------------------ PLANOS */

/* Seção de decisão de compra: respiro maior que o resto, como na referência. */
.pricing { padding-block: var(--section-y-lg); }

.pricing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.pricing__switch { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;
}

.plan--featured {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 1px var(--brand-500), 0 24px 60px -30px rgb(254 1 0 / .45);
}

.plan__badge { position: absolute; top: var(--sp-5); right: var(--sp-5); }

.plan__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.plan__for { font-size: var(--fs-sm); color: var(--text-muted); min-height: 3em; }

.plan__price { display: flex; align-items: baseline; gap: var(--sp-2); }

.plan__price .amount {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: var(--tr-display-m);
  font-variant-numeric: tabular-nums;
}

.plan__price .cur { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; color: var(--text-muted); }
.plan__price .per { font-size: var(--fs-sm); color: var(--text-muted); }

/* Troca mensal/anual sem JS: o estado do checkbox rege a seção inteira.
   O padrão é o anual, então o preço anual é o que aparece no estado base —
   assim, em navegador sem :has(), o que se vê bate com o switch, que nasce
   ligado. A regra de exceção é a do mensal, e não a do anual. */
.price--mo { display: none; }
.pricing:has(#billing:not(:checked)) .price--yr { display: none; }
.pricing:has(#billing:not(:checked)) .price--mo { display: flex; }

.plan__list { display: flex; flex-direction: column; gap: var(--sp-3); }

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.plan__list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.plan__list .yes svg { color: var(--accent); }
.plan__list .no { color: var(--text-faint); }
.plan__list .no svg { color: var(--text-faint); }

.plan__rule { height: 1px; background: var(--border); }

@media (max-width: 1024px) {
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* Quando o cabeçalho dos planos quebra em duas linhas, o toggle alinhado à
   direita fica órfão — passa a acompanhar o título, à esquerda. */
@media (max-width: 720px) {
  .pricing__head { align-items: flex-start; }
  .pricing__switch { align-items: flex-start; }
}

/* -------------------------------------------------------------------- BLOG */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

.post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.post:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.post .shot { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.post__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.post__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); }
.post__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.post h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tr-h4); }
.post p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }

@media (max-width: 1024px) { .posts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- FAQ */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.faq__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--sp-5); }
.faq__list { border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
}

/* ----------------------------------------------------------------- CONTATO */

.contato__grid {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 480px);
  align-items: center;
  gap: var(--sp-7) clamp(40px, 6vw, 80px);
}

.contato__pitch .display-l { max-width: 16ch; }

/* 24px, e não os 18px do --fs-lead: em 24px o branco sobre o vermelho da
   marca conta como texto grande e passa em AA (3:1 exigido, 4,03:1 obtido). */
.contato__pitch .lead {
  margin-top: var(--sp-4);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--text);
  max-width: 30ch;
}

/* O cartão troca o tema para claro: campo de formulário sobre o vermelho
   chapado não tem contorno que passe em contraste, e placeholder esmaecido
   sobre #FE0100 cai para ~3:1. Dentro do cartão os tokens voltam ao normal. */
.contato__card {
  background: var(--bg);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-pop);
}

@media (max-width: 960px) {
  .contato { text-align: center; }
  .contato__grid { grid-template-columns: 1fr; justify-items: center; }
  .contato__pitch .display-l,
  .contato__pitch .lead { margin-inline: auto; }
  .contato__card { width: 100%; max-width: 480px; text-align: left; }
}

/* ------------------------------------------------------------------ FOOTER */

.footer { padding-block: var(--sp-9) var(--sp-7); }

.footer__grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(4, 1fr);
  gap: var(--sp-7) var(--sp-5);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 30ch; }
.footer__brand img { height: 30px; width: auto; }
.footer__brand p { font-size: var(--fs-sm); color: var(--text-muted); }

.footer__col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}

.footer__col li + li { margin-top: var(--sp-3); }
.footer__col a { font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.footer__social { display: flex; gap: var(--sp-2); }

.footer__social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.footer__social a:hover { color: var(--text); border-color: var(--border-strong); }
.footer__social svg { width: 17px; height: 17px; }

@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__grid { grid-template-columns: 1fr; } }