/* Sistema de composição, comum aos dois temas.
   Só estrutura e ritmo: cor e tipografia vêm de tokens.css e do tema.

   O site é uma brochura de imóvel, e brochura alterna página-imagem e
   página-dado. Sem essa alternância todas as seções saem com a mesma forma
   (título, parágrafo, lista) e a página lê como documento, não como peça. */

/* ---------- ritmo vertical ---------- */

/* Toda seção tem respiro simétrico. O filete que separa duas seções fica
   posicionado no topo, FORA do fluxo: como pseudo-elemento do container ele
   virava item de grid e embaralhava as colunas das seções em duas colunas. */
.section {
  position: relative;
  padding-block: var(--space-section);
}

/* Hero e faixa de foto trazem o próprio respiro: a imagem já é a pausa. */
.hero,
.section--band {
  padding-block: 0;
}

.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2rem, var(--container));
  height: 1px;
  background: linear-gradient(to right, hsl(var(--primary) / 0.4), hsl(var(--primary) / 0));
}

/* Depois de uma fotografia a pausa já existe; o filete só duplicaria. */
/* `.section + .section::before` tem duas classes; o cancelamento precisa de
   peso igual ou maior, senão a faixa de foto continua ganhando um filete. */
.hero + .section::before,
.section--band + .section::before,
.section + .section.section--band::before {
  content: none;
}

/* ---------- medida de leitura ---------- */

/* Texto corrido nunca passa de ~66 caracteres. Sem isso a linha vai a 1136px
   e o olho perde o retorno. */
.measure {
  max-width: 66ch;
}
.measure--wide {
  max-width: 78ch;
}

/* ---------- seção em duas colunas ---------- */

/* Título e resumo ficam num trilho à esquerda que acompanha a rolagem; o
   conteúdo denso corre à direita. Dá hierarquia sem inventar ornamento. */
.section--split > .container {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .section--split > .container {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  }
  .section__rail {
    position: sticky;
    top: 6rem;
  }
}
.section__rail > :first-child { margin-top: 0; }
.section__rail > :last-child { margin-bottom: 0; }
.section__body > :first-child { margin-top: 0; }
.section__body > :last-child { margin-bottom: 0; }

/* ---------- faixa de imagem sangrando ---------- */

.section--band {
  position: relative;
  padding-block: 0;
}
.band {
  position: relative;
  min-height: min(70svh, 34rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band__body {
  position: relative;
  padding-block: clamp(2rem, 6vw, 4rem);
}

/* ---------- hero ---------- */

.hero {
  padding-block: 0;
}
.hero__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 64rem) {
  .hero__inner {
    /* A coluna de texto precisa caber os dois botões lado a lado; em 1.05fr
       eles quebravam por 13px. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__media {
  margin: 0;
  align-self: stretch;
  display: grid;
}
.hero__media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- formulário em duas colunas ---------- */

/* O formulário tinha 640px encostados à esquerda de um container de 1200px.
   A coluna de apoio ocupa o vão e diz o que a pessoa recebe ao enviar. */
.form-section > .container {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .form-section > .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}
.form-aside > :first-child { margin-top: 0; }
.form-aside ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.875rem;
}
.form-aside li {
  padding-left: 1.5rem;
  position: relative;
}
.form-aside li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
}

/* ---------- utilitários ---------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

/* ---------- faixa: texto sobre foto ---------- */

/* Único lugar do site onde o texto não usa as cores do tema: ele fica sobre
   uma fotografia, então precisa do próprio scrim para garantir contraste nos
   dois temas. */
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, hsl(30 12% 4% / 0.9) 0%, hsl(30 12% 4% / 0.7) 45%, hsl(30 12% 4% / 0.3) 100%),
    hsl(30 12% 4% / 0.4);
}
.band__body {
  z-index: 1;
  color: hsl(0 0% 100%);
}
.band__body h2,
.band__body h3 { color: hsl(0 0% 100%); }
.band__body p { color: hsl(0 0% 100% / 0.88); }
.band__body .amenities li { color: hsl(0 0% 100% / 0.88); }

/* ---------- estatística fora de cartão ---------- */

/* Três números não precisam de três caixas iguais. Uma régua vertical separa
   e o número carrega o peso. */
.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-block: 2.5rem;
}
.stat {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.25rem;
  border-left: 2px solid hsl(var(--primary) / 0.45);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: hsl(var(--gold-ink));
}
.stat__label { line-height: 1.35; }
.stat .disclaimer { margin: 0.25rem 0 0; }

/* ---------- etapas ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.steps li {
  counter-increment: step;
  padding-left: 3rem;
  position: relative;
  max-width: 62ch;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid hsl(var(--primary) / 0.5);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: hsl(var(--primary));
}

/* ---------- retrato no trilho ---------- */

.rail-figure {
  margin: 1.75rem 0 0;
  max-width: 15rem;
}
.rail-figure img {
  width: 100%;
  border-radius: var(--radius);
}

/* ---------- cartão ---------- */

/* Os três cartões têm textos de tamanhos diferentes. Sem isto, a imagem sai
   com altura variável e o botão de cada um para numa linha diferente. */
.card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.card > img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.card__body > * { margin: 0; }
.card__body h3 { margin: 0; }
/* Empurra a chamada para a base, alinhando os três botões. */
.card__cta { margin-top: auto; padding-top: 0.75rem; }

/* A fonte do dado é uma nota de rodapé do número, não um segundo rótulo:
   sem borda própria (a régua da .stat já separa) e sem caixa alta. */
.stat .disclaimer {
  border-left: 0;
  padding-left: 0;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* O parágrafo de fecho colava na última etapa. */
.steps + p { margin-top: 2rem; }

/* ---------- escala tipográfica ---------- */

/* Instrument Serif tem contraste alto e foi desenhada para corpo grande: em
   display ela precisa de line-height curto e tracking negativo, senão parece
   frouxa. */
h1, .h1 {
  font-size: var(--step-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
body {
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.7;
}
.lead {
  font-size: var(--step-lead);
  line-height: 1.6;
}
small, .small { font-size: var(--step-small); }

/* O itálico da Instrument Serif é o detalhe mais bonito da família; fica
   reservado para o nome dos empreendimentos. */
.serif-italic {
  font-family: var(--font-heading);
  font-style: italic;
}

/* ---------- filete ---------- */

/* Filete avulso, para usar dentro de uma seção. */
.rule {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, hsl(var(--primary) / 0.45), hsl(var(--primary) / 0));
  margin-bottom: var(--space-section);
}
/* Depois de uma imagem sangrada a própria foto já separou; o filete só
   duplicaria a pausa. */


/* ---------- hero sangrado ---------- */

/* Abertura de hotel: a fotografia ocupa a tela e o texto assenta sobre ela.
   É o que o produto tem de mais característico. */
.hero--full {
  padding: 0;
  position: relative;
  min-height: min(92svh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero--full .hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero--full .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A marca do empreendimento está no topo da foto; enquadrar mais abaixo
     tira ela de trás do título. */
  object-position: center 72%;
  border-radius: 0;
  min-height: 0;
}
.hero--full::after {
  content: '';
  position: absolute;
  inset: 0;
  /* O texto assenta na metade de baixo, então o scrim precisa ser sólido ali
     e só desaparecer perto do topo. */
  /* Duas camadas: um véu uniforme que rebaixa a foto inteira, e por cima um
     gradiente que adensa onde o texto assenta. Só o gradiente deixava o topo
     claro demais. */
  background:
    linear-gradient(to top,
      hsl(30 12% 4% / 0.9) 0%,
      hsl(30 12% 4% / 0.82) 32%,
      hsl(30 12% 4% / 0.55) 58%,
      hsl(30 12% 4% / 0.2) 82%,
      hsl(30 12% 4% / 0.4) 100%),
    hsl(30 12% 4% / 0.42);
}
.hero--full .hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  color: hsl(40 20% 96%);
}
.hero--full h1 { max-width: 18ch; }
.hero--full .lead { max-width: 52ch; color: hsl(40 18% 92% / 0.9); }

/* ---------- fotografia ---------- */

/* Brochura não arredonda fotografia. O raio fica só nos controles. */
.card > img,
.band__media,
.hero__media img,
.rail-figure img {
  border-radius: 0;
}

/* A marca do empreendimento está gravada no alto dos renders; num recorte
   pequeno ela vira um quadrado branco que parece imagem quebrada. */
.card > img { object-position: center 68%; }

/* ---------- controles sobre fotografia ---------- */

/* Hero e faixa assentam sobre foto escura nos dois temas. Os botões do tema
   editorial são desenhados para fundo marfim e sumiriam aqui, então sobre
   fotografia eles usam sempre o par claro. */
.hero--full .btn--primary,
.band__body .btn--primary {
  background: hsl(var(--primary));
  color: hsl(30 12% 7%);
  border-color: transparent;
}
.hero--full .btn--primary:hover,
.band__body .btn--primary:hover {
  background: hsl(var(--gold-light, var(--primary)));
}
.hero--full .btn--ghost,
.band__body .btn--ghost {
  background: hsl(0 0% 100% / 0.08);
  color: hsl(0 0% 100%);
  border-color: hsl(0 0% 100% / 0.55);
  backdrop-filter: blur(4px);
}
.hero--full .btn--ghost:hover,
.band__body .btn--ghost:hover {
  background: hsl(0 0% 100% / 0.18);
  border-color: hsl(0 0% 100%);
}
.hero--full .eyebrow,
.band__body .eyebrow { color: hsl(43 74% 72%); }

/* ---------- formulário de qualificação ---------- */

/* Compartilhado pelos dois temas: só tokens, nenhuma cor literal. As regras
   ficam escopadas em .lead-form / .lead-form__result porque dark.css e
   editorial.css carregam depois e definem .option e legend na raiz. */

.icon {
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.btn .icon { width: 1.05rem; height: 1.05rem; }

/* cabeçalho de progresso */

.lead-progress { margin-bottom: 1.75rem; }
.lead-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.lead-progress__steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lead-progress__step { display: flex; align-items: center; gap: 0.5rem; }
/* o traço que liga um marcador ao próximo acende junto com a etapa concluída */
.lead-progress__step:not(:last-child)::after {
  content: '';
  width: 2rem;
  height: 2px;
  background: hsl(var(--border));
  transition: var(--transition-luxury);
}
.lead-progress__step.is-done::after { background: hsl(var(--primary)); }
.lead-progress__dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 700;
  transition: var(--transition-luxury);
}
.lead-progress__step.is-current .lead-progress__dot,
.lead-progress__step.is-done .lead-progress__dot {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.lead-progress__step.is-current .lead-progress__dot {
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
}
.lead-progress__check { display: none; width: 1rem; height: 1rem; }
.lead-progress__step.is-done .lead-progress__num { display: none; }
.lead-progress__step.is-done .lead-progress__check { display: block; }
.lead-progress__label {
  margin: 0;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.lead-progress__bar {
  height: 0.25rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}
.lead-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: hsl(var(--primary));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* passos e grupos */

.lead-form__step > h3 { margin-top: 0; }
.lead-form .lead-group { gap: 0.625rem; }
.lead-form legend {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: hsl(var(--foreground));
}
.lead-form .lead-form__actions {
  justify-content: space-between;
  align-items: center;
}

/* auto-fit resolve o estreito sozinho: quando duas colunas não cabem na
   largura do painel, a grade cai para uma só. */
.lead-form .lead-options { display: grid; gap: 0.625rem; }
.lead-form .lead-options--2 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.lead-form .lead-options--3 { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

/* cartões de opção */

.lead-form .option {
  position: relative;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-width: 2px;
  min-width: 0;
}
/* o rádio continua real e focável: some só do desenho, e o cartão inteiro
   vira a área de clique. */
.lead-form .option > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}
.lead-form .option__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: calc(var(--radius) - 0.25rem);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  transition: var(--transition-luxury);
}
.lead-form .option__text { display: grid; gap: 0.15rem; min-width: 0; }
.lead-form .option__label { font-weight: 600; }
.lead-form .option__hint {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
.lead-form .option--goal { align-items: flex-start; }
.lead-form .option--compact { font-size: 0.9375rem; }
.lead-form .option--compact .option__label { font-weight: 500; }
.lead-form .option--compact .option__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}
.lead-form .option--compact .option__icon .icon { width: 1.05rem; height: 1.05rem; }
/* entrada e canal preferido: rótulo curto, centralizado como no site principal */
.lead-form .lead-options--3 .option { justify-content: center; text-align: center; }

.lead-form .option:has(input:checked) .option__icon {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.lead-form .option:has(input:checked) .option__label { color: hsl(var(--gold-ink)); }
.lead-form .option--compact:has(input:checked) .option__icon {
  background: none;
  color: hsl(var(--gold-ink));
}

/* confirmação e erro */

.lead-success { display: grid; gap: 1.25rem; justify-items: start; }
.lead-success__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--gold-ink));
}
.lead-success__mark .icon { width: 1.75rem; height: 1.75rem; }
.lead-form__result .lead-success h3 { margin: 0; }
.lead-success__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  width: 100%;
}
.lead-success__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  line-height: 1.5;
}
.lead-success__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  font-weight: 700;
}
.lead-success__ctas { display: grid; gap: 0.75rem; width: 100%; }
.lead-success__ctas .btn { width: 100%; }
.lead-success__guide {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.lead-success__guide a { color: hsl(var(--gold-ink)); }
.lead-success__guide .icon { width: 1rem; height: 1rem; color: hsl(var(--gold-ink)); }

.lead-error { display: grid; gap: 1rem; justify-items: start; }
.lead-error p { margin: 0; }

/* ==========================================================================
   Telas pequenas

   O projeto nasceu desktop-first: havia `min-width` para as colunas e nada
   afinado para celular. O cabeçalho fixo ocupava 245px de uma tela de 844.
   ========================================================================== */

@media (max-width: 48rem) {
  /* ---------- cabeçalho ---------- */

  .site-header__inner {
    gap: 0.5rem 0.875rem;
    padding-block: 0.625rem;
  }
  .site-header__logo img {
    width: 118px;
    height: auto;
  }
  .site-header__lang { order: 2; }
  .site-header__cta {
    order: 3;
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
  }
  /* A navegação vira uma faixa de uma linha só, que rola no dedo: some a
     quebra em três linhas sem esconder link nenhum atrás de um menu. */
  .site-nav {
    order: 4;
    flex-basis: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    margin-inline: calc(clamp(1rem, 4vw, 2rem) * -1);
    padding-inline: clamp(1rem, 4vw, 2rem);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul {
    flex-wrap: nowrap;
    gap: 1.125rem;
  }
  .site-nav li { flex: none; }
  .site-nav a { white-space: nowrap; }

  /* ---------- hero ---------- */

  .hero--full {
    min-height: min(82svh, 34rem);
  }
  .hero--full .hero__inner {
    padding-block: clamp(2rem, 8vw, 3rem);
  }
  .hero--full h1 { max-width: none; }
  .hero__actions {
    margin-top: 1.5rem;
    gap: 0.625rem;
  }
  /* Dois botões lado a lado não cabem em 358px sem apertar o texto. */
  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* ---------- faixa de foto ---------- */

  .band {
    min-height: 0;
  }
  .band__body {
    padding-block: clamp(2.5rem, 10vw, 3.5rem);
  }

  /* ---------- ritmo e medida ---------- */

  .section { padding-block: clamp(2.5rem, 9vw, 3.5rem); }
  .measure, .measure--wide { max-width: none; }
  .section--split > .container { gap: 1.5rem; }
  .steps li { padding-left: 2.5rem; }
  .steps { gap: 1.25rem; }

  /* ---------- formulário ---------- */

  .form-section > .container { gap: 2rem; }
  .lead-form { padding: 1.125rem; }
  /* Alvo de toque confortável e o rótulo sem quebrar em duas linhas curtas. */
  .lead-form .option { min-height: 3rem; }
  .lead-form__actions { gap: 0.625rem; }
  .lead-form__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* ---------- rodapé ---------- */

  .site-footer__grid { gap: 2rem; }
}

/* Telas bem estreitas: o hero perde o excesso de altura e o título encolhe. */
@media (max-width: 26rem) {
  .hero--full { min-height: min(78svh, 30rem); }
  h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .site-header__logo img { width: 104px; }
}

/* ---------- sinal de rolagem na tabela ---------- */

/* A tabela de retorno tem 5 colunas e rola no celular, mas nada avisava que
   havia mais coluna à direita. Estas quatro camadas são a técnica clássica de
   sombra de rolagem: as duas "capas" acompanham o conteúdo (`local`) e escondem
   as sombras quando o scroll chega ao fim, então o aviso some sozinho. */
.table-wrap {
  background:
    linear-gradient(to right, hsl(var(--card)) 30%, hsl(var(--card) / 0)),
    linear-gradient(to left, hsl(var(--card)) 30%, hsl(var(--card) / 0)) 100% 0,
    linear-gradient(to right, hsl(var(--foreground) / 0.16), hsl(var(--foreground) / 0)),
    linear-gradient(to left, hsl(var(--foreground) / 0.16), hsl(var(--foreground) / 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 48rem) {
  .table-wrap table { font-size: 0.875rem; }
  .table-wrap th,
  .table-wrap td { padding-inline: 0.75rem; }
}