/* About (book p17): hero with real counts, then plain two-column rows (heading left, text right), blue CTA band.
   Royal Original tokens only. */

.about__hero {
	display: grid; gap: var(--space-7); align-items: center;
	padding-block: var(--section-padding);
}
@media (min-width: 1024px) { .about__hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--grid-gap); } }
.about__copy { display: grid; gap: var(--space-4); justify-items: start; }
.about__lead { max-width: 60ch; font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); }
.about__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 479px) { .about__actions .btn { flex: 1 1 100%; } }

/* Counts: one tinted panel, numbers in light h1 type. */
.about__facts {
	display: grid; gap: var(--space-5);
	padding: var(--panel-padding); background: var(--color-surface-tint); border-radius: var(--radius-panel);
}
.about__fact { display: grid; gap: var(--space-1); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.about__fact:last-child { padding-bottom: 0; border-bottom: 0; }
.about__fact dt { color: var(--color-text-muted); }
.about__fact dd { margin: 0; order: -1; font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); color: var(--color-primary); }
@media (min-width: 768px) and (max-width: 1023px) {
	.about__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.about__fact { padding-bottom: 0; border-bottom: 0; }
}

/* Rows */
.about__row {
	display: grid; gap: var(--space-5);
	padding-block: var(--section-padding); border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .about__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--grid-gap); } }
.about__text { display: grid; gap: var(--space-4); max-width: var(--measure-body); font-size: var(--font-size-lead); line-height: var(--line-height-lead); }

.about__steps { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .about__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); } }
.about__steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
@media (min-width: 768px) { .about__steps li { flex-direction: column; } }
.about__num {
	display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-primary); color: var(--color-on-primary);
	font-size: 18px; font-weight: var(--font-weight-label); line-height: 1;
}
.about__steps h3 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.about__steps p { margin-top: var(--space-2); color: var(--color-text-muted); }

/* Blue CTA band, full width */
.about__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
	padding-block: var(--section-padding);
}