/* ==========================================================================
   Hyper — Seção "Como a Hyper entrega o que promete"
   Tratamento de objeção: explica o mecanismo por trás das promessas.
   Paleta do sistema (hyper-tokens.css). Inserida antes do quiz.
   ========================================================================== */
.hh-section {
  background: var(--hy-bg);
  padding: 92px 24px 88px;
  font-family: "Oakes Grotesk", sans-serif;
  border-top: 1px solid var(--hy-border);
}
.hh-inner { max-width: 1120px; margin: 0 auto; }

.hh-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.hh-eyebrow {
  display: inline-block;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600; color: var(--hy-green); margin-bottom: 18px;
}
.hh-title {
  font-size: 40px; line-height: 1.12; font-weight: 600;
  color: var(--hy-text); letter-spacing: -0.5px; margin: 0 0 16px;
}
.hh-title em { font-style: normal; color: var(--hy-green); }
.hh-lead {
  font-size: 26px; line-height: 1.3; font-weight: 600;
  color: var(--hy-text); margin: 0 0 18px; letter-spacing: -0.3px;
}
.hh-lead strong { color: var(--hy-text-muted); font-weight: 600; }
.hh-lead .hh-hl { color: var(--hy-green); }
.hh-sub {
  font-size: 18px; line-height: 1.55; color: var(--hy-text-muted); margin: 0;
}

.hh-outro {
  max-width: 820px; margin: 44px auto 0; text-align: center;
  font-size: 20px; line-height: 1.5; color: var(--hy-text); font-weight: 500;
}
.hh-outro .hh-hl { color: var(--hy-green); font-weight: 600; }

.hh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.hh-card {
  background: var(--hy-surface);
  border: 1px solid var(--hy-border);
  border-radius: 20px;
  padding: 32px 28px 34px;
  display: flex; flex-direction: column;
}
.hh-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--hy-green-soft);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.hh-card__icon svg { width: 26px; height: 26px; stroke: var(--hy-green); fill: none; }
.hh-card__title {
  font-size: 22px; line-height: 1.2; font-weight: 600;
  color: var(--hy-text); margin: 0 0 18px;
  min-height: 53px;
}

/* comparativo: outras plataformas (vermelho) × Hyper (verde) */
.hh-compare { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.hh-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px; border-radius: 13px;
}
.hh-row--bad  { background: rgba(216,58,58,.07); border: 1px solid rgba(216,58,58,.22); }
.hh-row--good { background: var(--hy-green-soft);   border: 1px solid rgba(10,122,48,.28); }
.hh-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px;
}
.hh-row--bad  .hh-mark { background: rgba(216,58,58,.18); color: #d83a3a; }
.hh-row--good .hh-mark { background: rgba(10,122,48,.20);  color: #097a31; }
.hh-row__txt { font-size: 14px; line-height: 1.45; color: var(--hy-text-muted); }
.hh-row__txt b {
  display: block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px;
}
.hh-row--bad  .hh-row__txt b { color: #d83a3a; }
.hh-row--good .hh-row__txt b { color: #097a31; }

@media (max-width: 900px) {
  .hh-grid { grid-template-columns: 1fr; gap: 18px; }
  .hh-section { padding: 64px 22px 60px; }
  .hh-title { font-size: 30px; }
  .hh-lead { font-size: 21px; }
  .hh-sub { font-size: 16px; }
  .hh-outro { font-size: 17px; margin-top: 34px; }
  .hh-card { padding: 26px 24px 28px; }
  .hh-card__title { min-height: 0; }
}