/* v2 */
*, *::before, *::after { box-sizing: border-box; }

.kwe-page {
  background-color: #09090b;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  padding-top: 80px;
}

/* ── Step Cards ── */
.step-card {
  background: rgba(24,24,27,0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 1rem; padding: 2rem;
  position: relative; overflow: hidden;
}
@media (min-width: 768px) { .step-card { padding: 2.5rem; } }

.step-badge {
  position: absolute; top: -1px; left: -1px;
  width: 3.5rem; height: 3.5rem;
  background-color: #CC0000;
  border-bottom-right-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.step-badge span {
  font-family: 'Space Grotesk', serif;
  font-size: 1.5rem; font-weight: 700; color: #fff;
}
.step-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem; margin-left: 3rem;
}
.step-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(220,38,38,0.8);
}
.step-title {
  font-family: 'Space Grotesk', serif;
  font-size: 1.25rem; font-weight: 600;
  color: #fff; letter-spacing: -0.02em;
}
@media (min-width: 768px) { .step-title { font-size: 1.5rem; } }
.step-body { display: flex; flex-direction: column; gap: 1rem; }

/* ── Boxes ── */
.warning-box {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 0.5rem; padding: 1rem;
  display: flex; gap: 0.75rem;
}
.warning-text { color: rgb(253,230,138); font-size: 0.875rem; line-height: 1.65; }
.info-box {
  background: rgba(220,38,38,0.1);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 0.5rem; padding: 1rem;
  display: flex; gap: 0.75rem;
}
.info-text { color: rgba(255,255,255,0.8); font-size: 0.875rem; line-height: 1.65; }

/* ── External Link Buttons ── */
.btn-ext-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  background: linear-gradient(to right, #b91c1c, #ef4444);
  color: #fff; transition: all 0.3s;
}
.btn-ext-primary:hover {
  background: linear-gradient(to right, #ef4444, #f87171);
  box-shadow: 0 0 20px -3px rgba(220,38,38,0.4);
}
.btn-ext-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  background: rgba(39,39,42,0.5); border: 1px solid rgba(220,38,38,0.3);
  color: #fff; transition: all 0.3s;
}
.btn-ext-secondary:hover {
  border-color: rgba(220,38,38,0.5); background: rgba(39,39,42,0.8);
}

/* ── Bullet List ── */
.bullet-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bullet-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.bullet-icon { color: rgba(220,38,38,0.8); flex-shrink: 0; margin-top: 0.125rem; }
.bullet-text { color: rgba(255,255,255,0.7); line-height: 1.6; }

/* ── Freeze Grid ── */
.freeze-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0.75rem; margin-top: 1.5rem;
}
@media (min-width: 640px) { .freeze-grid { grid-template-columns: 1fr 1fr; } }