/* About page — builds on styles.css + pricing.css + how-it-works.css */

.a-hero .lead { max-width: 46ch; }
.a-hero-photo { aspect-ratio: 1.28 / 1; }

/* Mission */
.mission { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.mission-photo { aspect-ratio: 1.18 / 1; }
.mission .section-title { max-width: 16ch; margin-bottom: 24px; }

/* Values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; padding: 36px 0; border-bottom: 1px solid var(--border); }
.values > div { padding: 0 24px; border-left: 1px solid var(--border); }
.values > div:first-child { border-left: 0; }
.v-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.v-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.values h3 { margin: 0 0 6px; font-size: 16px; }
.values p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* Awsm */
.awsm { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; margin-top: 0; border-top: 0; }
.awsm-photo { aspect-ratio: 858 / 906; }

/* Difference */
.difference {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  margin-top: 40px; padding: 36px 44px; background: #ebe8e1; border-radius: 20px;
}
.difference > div { padding-right: 40px; border-right: 1px solid #d8d4ca; }
.difference h2 { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.035em; }
.difference > div p:last-child { margin: 0; color: var(--ink-2); font-size: 16px; }
.difference .vlist { font-size: 15px; gap: 18px; }

@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .values > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 860px) {
  .mission, .awsm, .difference { grid-template-columns: 1fr; gap: 28px; }
  .difference { padding: 32px 24px; }
  .difference > div { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid #d8d4ca; }
}
@media (max-width: 640px) {
  .values { grid-template-columns: 1fr; }
  .values > div { padding: 0; border-left: 0; }
}