/* ================================= */
/* Building an MVP                   */
/* mvp- prefix for page-specific     */
/*                                   */
/* Shared layout and components      */
/* live in pillar.css — load first.  */
/* ================================= */

.mvp-page *,
.mvp-page *::before,
.mvp-page *::after {
  box-sizing: border-box;
}

.mvp-hypothesis .waa-topBlock {
	max-width: 48rem;
}

/* ================================= */
/* HERO                              */
/* ================================= */

.mvp-hero {
  padding: 8rem 2.5rem 6rem;
  background: var(--light);
  text-align: center;
}

.mvp-hero-inner {
  max-width: 920px;
  margin: 0 auto;
}

.mvp-hero .waa-kicker { display: inline-block; }

.mvp-hero h1 {
  max-width: 820px;
  margin: 0 auto 2rem;
}

.mvp-hero-lead {
  max-width: 700px;
  margin: 0 auto;
}

/* ================================= */
/* COST TABLE OVERRIDES              */
/* ================================= */

.mvp-ct-band {
  font-family: var(--heading-family);
  font-size: 1.0625rem;
  color: var(--heading-color);
  white-space: nowrap;
}

.mvp-ct-note {
  color: var(--muted);
  font-size: 0.875rem;
}

/* ================================= */
/* COST NOTE PROSE                   */
/* ================================= */

.mvp-cost-note {
  margin-top: 2.5rem;
//  max-width: 780px;
}

/* ================================= */
/* BUILD OPTIONS                     */
/* (native / web / no-code)          */
/* ================================= */

.mvp-build-opts {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mvp-build-opt {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.mvp-build-opt-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-accent);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.mvp-build-opt h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.mvp-build-opt p {
  font-size: 0.9375rem;
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 0;
}

.mvp-bo-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ================================= */
/* MISTAKES GRID                     */
/* ================================= */

.mvp-mistakes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.mvp-mistake {
  padding: 1.75rem 2rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.mvp-mistake:nth-child(even) {
  padding-right: 0;
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

.mvp-mistake-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mvp-mistake-title {
  font-family: var(--heading-family);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.mvp-mistake-body {
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ================================= */
/* RESPONSIVE                        */
/* ================================= */

@media (max-width: 968px) {
  .mvp-hero       { padding: 5rem 1.5rem 3rem; }
  .mvp-build-opts { grid-template-columns: 1fr; }
  .mvp-mistakes   { grid-template-columns: 1fr; }
  .mvp-mistake:nth-child(even) { padding-left: 0; border-left: none; }
}