.wrap { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }

main.wrap { padding: 1.2rem 0 2.2rem; }

/* Hero section */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.hero-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
}

.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Grid layouts */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  justify-items: center;
}

.section-title {
  margin: 2rem 0 1rem;
  font-size: 1.8rem;
  text-align: center;
}

/* Docs page layout */
.docs-main { padding: 2rem 0 3rem; }

.docs-content {
  max-width: 820px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 2rem 2.2rem;
}

.docs-content h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* Responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .hero-card { min-height: unset; }
}

/* Force 3-column grid to stack vertically on mobile/Android */
@media (max-width: 768px) {
  .grid-3 { 
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}

/* Mobile: keep fixed button width and center it */
@media (max-width: 768px) {
  .cta-row {
    justify-content: center;
  }

  .btn-ps2 {
    width: 14rem;
    max-width: 90vw;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .card { padding: .9rem; }
  .list, .steps { padding-left: 1rem; font-size: .95rem; }
  code { font-size: .85em; word-break: break-all; }
}