@charset "UTF-8";
/* ==========================================================================
   WESTON CLICK — phase-pages.css
   Layout glue for foundation.html, automation.html and growth.html.
   The components themselves come from system.css (hero, cards, browser
   mock, speed cards, DM thread, funnel, CTA card) and base.css.
   ========================================================================== */

/* Section rhythm */
.ph-problem,
.ph-build,
.ph-outcome { padding-block: var(--section-y); }
.ph-build { background: linear-gradient(180deg, var(--accent-tint), var(--white)); }
.ph-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.ph-head + * { margin-top: 0; }

/* The problem: centred prose under the heading */
.ph-prose { max-width: 68ch; margin-inline: auto; text-align: center; }
.ph-prose p {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-600);
}
.ph-prose p + p { margin-top: var(--sp-4); }
.ph-prose p:last-child {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* What we build: hub cards, two per row for the four-card Foundation list */
.ph-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-build .alone__card { padding-top: clamp(24px, 2.8vw, 30px); }
@media (max-width: 860px) { .ph-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Outcome: one centred checklist card */
.outcomes--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 620px;
  margin-inline: auto;
}

/* Before and after (Foundation): two door cards beside the browser mock */
.ph-doors { padding-block: var(--section-y); }
.ph-door { padding: clamp(20px, 2.4vw, 26px); }
.ph-door + .ph-door { margin-top: var(--sp-4); }
.ph-doors .eyebrow + .visually-hidden + .ph-door { margin-top: var(--sp-5); }
.ph-door__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ph-door--new .ph-door__label { color: var(--accent-on-dark); }
.ph-door__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}
.ph-door--old .ph-door__text { color: rgba(255, 255, 255, .5); }
.ph-door--new { border-color: rgba(52, 216, 156, .35); }
.mock__cta:empty { min-width: 96px; min-height: 26px; }

/* Speed comparison (Automation) */
.ph-speed { padding-block: var(--section-y); }

/* Why ads come last (Growth) */
.ph-why { padding-block: var(--section-y); }
.ph-why .body-copy + .body-copy { margin-top: var(--sp-4); }