/* White wrapper under header */
.wrapper {
  background: rgba(58, 57, 57, 0.95);
  border-radius: 0.75em;
  padding: 2rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  text-align: center;
  margin: 0.5rem auto 0;
}

/* Page background + typography */
body {
  margin: 0;
  padding: 2rem;
  background: linear-gradient(180deg, #1c1c1c 0%, #111 50%, #000 100%);
  color: #e6e6e6;
  font-family: 'Montserrat', sans-serif;
}

/* Page title */
h1 {
  text-align: center;
  color: #e6e6e6;
}

/* Cascading card grid — centered, smaller cards */
.tier-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); /* was 11rem */
  gap: 0;
  justify-items: center;
  padding: 1rem 0;
  margin-top: 1rem;

}

/* Tier card — smaller, centered, left-aligned content */
.tier-card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.1);
  padding: 1rem;
  border-left: 0.625rem solid;
  color: #222;
  max-width: 18rem; /* smaller card width */
  width: 100%;
  text-align: left;
}

/* Tier color accents */
.demo  { border-color: #999; }
.tier1 { border-color: #0078D4; }
.tier2 { border-color: #28A745; }
.tier3 { border-color: #FFC107; }
.tier4 { border-color: #6F42C1; }

/* Header inside card */
.tier-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #000;
}

/* Price text */
.price {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}

/* List styling */
ul {
  padding-left: 1.2rem;
  margin: 0;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Centered button row */
.center-btn {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Force left alignment inside cards */
.tier-card,
.tier-card * {
  text-align: left !important;
}

/* Override global container spacing */
.wrapper,
.container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Tighten header spacing */
.wrapper h3,
.container h3,
.wrapper h1,
.container h1 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* Force anchor buttons to use the global app_core button look */
a.btn {
  display: inline-block;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  background: #000000;
  border: 0.125rem solid #666666; /* thin gray border */
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover state */
a.btn:hover {
  background: #111111;
  border-color: #58a6ff; /* blue hover outline */
}