/* KeepWards — o lugar de comprar: faixa de compra das páginas de produto e cartões de plano da home.
   Só tokens de site.css; nenhuma cor nova. O botão de compra é o primário da marca (teal com texto
   navy, 6,95:1), maior que os outros: é a única ação desta faixa. */

.btn--comprar{padding:16px 28px;font-size:1rem;font-weight:600;min-height:52px}
.btn--comprar svg{width:16px;height:16px}
.plan .btn--comprar{justify-self:stretch;justify-content:center}
.plan__detalhes{justify-self:center;font-size:.82rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.plan__detalhes:hover{color:var(--ink-2)}

/* Faixa de compra — logo abaixo do topo da página do produto. */
.buybar{padding-block:0 clamp(28px,4vh,44px)}
.buybar__card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,40px);
  background:var(--surface);border:1px solid var(--teal);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(11,31,53,.06),0 18px 44px -20px rgba(25,195,177,.45);
  padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px)}
.buybar__info{display:grid;gap:6px;min-width:0}
.buybar__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.buybar__linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.buybar__nome{font:500 clamp(1.15rem,1rem + .5vw,1.45rem)/1.15 var(--display);letter-spacing:-.02em;margin:0;color:var(--ink)}
.buybar__preco{font:500 clamp(2.1rem,1.5rem + 1.8vw,3rem)/1 var(--display);letter-spacing:-.035em;color:var(--ink);margin:0}
.buybar__periodo{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.buybar__nota{font-size:.84rem;line-height:1.5;color:var(--ink-2);margin:4px 0 0;max-width:62ch}
.buybar__acoes{display:grid;gap:8px;justify-items:stretch;min-width:240px}
.buybar__acoes .btn--comprar{justify-content:center}
.buybar__mini{font-size:.78rem;color:var(--ink-3);text-align:center;margin:0}
.buybar__mini a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

/* Seção de compra da home. */
.compra__nota{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:14px;display:block}

@media (max-width:900px){
  .plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .buybar__card{grid-template-columns:minmax(0,1fr)}
  .buybar__acoes{min-width:0}
  .btn--comprar{width:100%}
}