/*
 * Ecommerce services page.
 *
 * Rebuilt after the first version was judged "very plain, very generic" — and
 * it was. The content was right; the composition was default: four identical
 * bands, everything centred, five white boxes on a white ground, and Playfair
 * at weight 700 inherited silently from mhg-style.css.
 *
 * The four changes that do the work:
 *   1. Stop centring. Each section is a 12-column grid at desktop with content
 *      spanning UNEQUAL amounts and one column deliberately left empty. That
 *      empty column is the largest "designed" signal available and costs nothing.
 *   2. Cards become a numbered editorial index separated by hairlines. Five
 *      items in a 3-column grid leaves an orphan and a hole at every width — a
 *      vertical index has no orphan state, so the problem disappears rather
 *      than being decorated over. A ruled index also reads as a document, which
 *      is the register a holding company wants; a 3-up card grid is the
 *      agency-template register.
 *   3. Playfair drops to 400 at display sizes. Playfair at 700 above 2rem is
 *      the loudest SaaS tell there is, and the homepage H1 already ships 400 —
 *      so this brings the page back into line with the house rather than away.
 *   4. Asymmetric section padding, so a heading sits closer to its own content
 *      than to the section above it.
 *
 * Gold budget: the hero rule and the apps rule. Two uses, plus the two app
 * icons on charcoal where gold measures 6.03:1. Gold is never text on light —
 * 2.29:1 on white, 2.13:1 on off-white, both far under AA.
 */

/* ---------------------------------------------------------------
   Shared shell
   --------------------------------------------------------------- */

.mhg-svc-hero,
.mhg-svc-list,
.mhg-svc-proof,
.mhg-svc-cta {
	padding-inline: var(--mhg-space-sm);
}

.mhg-svc-hero__inner,
.mhg-svc-list__inner,
.mhg-svc-proof__inner,
.mhg-svc-cta__inner {
	max-width: var(--mhg-container-max);
	margin-inline: auto;
}

.mhg-svc-hero__eyebrow,
.mhg-svc-list__eyebrow,
.mhg-svc-proof__eyebrow {
	margin: 0 0 var(--mhg-space-sm);
	font-family: var(--mhg-font-body);
	font-weight: 600;
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	line-height: 1;
	text-transform: uppercase;
	color: var(--mhg-color-teal);
}

/* The house gold rule, as on /about/ — left-aligned, not centred. */
.mhg-svc-rule {
	display: block;
	width: var(--mhg-rule-width);
	height: var(--mhg-rule-height);
	margin: var(--mhg-space-md) 0 0;
	background-color: var(--mhg-color-gold);
}

.mhg-svc-hero__heading,
.mhg-svc-list__heading,
.mhg-svc-proof__heading,
.mhg-svc-cta__heading {
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Focus. Specificity (0,2,1) so it wins on merit rather than on enqueue order —
   .mhg-btn:focus-visible in mhg-buttons.css is (0,2,0) and would otherwise tie. */
.mhg-svc-hero a:focus-visible,
.mhg-svc-hero button:focus-visible,
.mhg-svc-list a:focus-visible,
.mhg-svc-cta a:focus-visible,
.mhg-svc-cta button:focus-visible {
	outline: var(--mhg-focus-ring-width) solid var(--mhg-color-teal);
	outline-offset: var(--mhg-focus-ring-offset);
	border-radius: var(--mhg-radius-sm);
}

.mhg-svc-proof a:focus-visible,
.mhg-svc-proof button:focus-visible {
	outline: var(--mhg-focus-ring-width) solid var(--mhg-color-white);
	outline-offset: var(--mhg-focus-ring-offset);
	border-radius: var(--mhg-radius-sm);
}

/* ---------------------------------------------------------------
   Hero — typographic, left-aligned
   --------------------------------------------------------------- */

.mhg-svc-hero {
	background-color: var(--mhg-color-off-white);
	padding-block: var(--mhg-space-xl) var(--mhg-space-lg);
}

.mhg-svc-hero__heading {
	margin: 0;
	font-size: var(--mhg-font-size-display);
	line-height: 1.04;
	color: var(--mhg-color-charcoal);
}

.mhg-svc-hero__lede {
	margin: var(--mhg-space-md) 0 0;
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body-lg);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-svc-hero__cta {
	margin-top: var(--mhg-space-lg);
}

/* ---------------------------------------------------------------
   Services — numbered editorial index
   --------------------------------------------------------------- */

.mhg-svc-list {
	padding-block: var(--mhg-space-lg) var(--mhg-space-xl);
}

.mhg-svc-list__heading,
.mhg-svc-proof__heading {
	margin: 0;
	font-size: var(--mhg-font-size-heading-lg);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-list__standfirst {
	margin: var(--mhg-space-md) 0 0;
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-svc-index {
	list-style: none;
	margin: var(--mhg-space-lg) 0 0;
	padding: 0;
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-svc-index__item {
	display: grid;
	grid-template-columns: var(--mhg-index-num-col) minmax(0, 1fr);
	column-gap: var(--mhg-space-sm);
	padding-block: var(--mhg-space-md);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
}

/* Playfair ships proportional figures by default, so 01 and 05 would be
   different widths without this and the left edge would wobble. */
.mhg-svc-index__num {
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	font-size: var(--mhg-font-size-index-num);
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.1;
	color: var(--mhg-color-teal);
}

.mhg-svc-index__title {
	margin: 0;
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	font-size: var(--mhg-font-size-row-title);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-index__text {
	margin: var(--mhg-space-xs) 0 0;
	max-width: var(--mhg-measure-body);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   Apps — same skeleton, mark instead of numeral
   --------------------------------------------------------------- */

.mhg-svc-proof {
	background-color: var(--mhg-color-charcoal);
	padding-block: var(--mhg-space-xl);
}

.mhg-svc-proof__eyebrow {
	color: var(--mhg-color-gold);
}

.mhg-svc-proof__heading {
	color: var(--mhg-color-white);
}

.mhg-svc-proof__intro {
	margin: var(--mhg-space-md) 0 0;
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-white-65);
}

.mhg-svc-proof__apps {
	list-style: none;
	margin: var(--mhg-space-lg) 0 0;
	padding: 0;
}

/* The mark column is sized to the box real App Store artwork will occupy, so
   dropping a 1200x1200 icon in later needs no CSS change. */
.mhg-svc-proof__app {
	display: grid;
	grid-template-columns: var(--mhg-app-plate-size) minmax(0, 1fr);
	column-gap: var(--mhg-space-sm);
	padding-block: var(--mhg-space-md);
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-white-12);
}

.mhg-svc-proof__app:last-child {
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-white-12);
}

/* Wraps the mark so the column is occupied even if an icon slug is missing —
   otherwise the content wrapper auto-places into the mark track and is crushed. */
.mhg-svc-proof__app-mark {
	grid-column: 1;
	color: var(--mhg-color-gold);
}

.mhg-svc-proof__app-body {
	grid-column: 2;
}

.mhg-svc-proof__app-name {
	margin: 0;
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	font-size: var(--mhg-font-size-row-title);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-white);
}

/* The worst case on the site before the hover system: white text on charcoal,
   visually identical to the <h3> around it, no rest signal and no hover in
   either direction — this sheet loads after mhg-style.css at an equal (0,1,1)
   specificity and won both states. It also set text-underline-offset on an
   underline the old global `a { text-decoration: none }` had already removed: a
   dead property. The dark-ground rest tier in mhg-style.css fixes all of it. */
.mhg-svc-proof__app-name a {
	color: var(--mhg-color-white);
	transition: text-decoration-color var(--mhg-transition-fast);
}

.mhg-svc-proof__app-text {
	margin: var(--mhg-space-xs) 0 0;
	max-width: var(--mhg-measure-body);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-white-65);
}

/* Plain text, not a badge. Neither app has shipped and the page must not
   dress that up. */
.mhg-svc-proof__app-status {
	margin: var(--mhg-space-sm) 0 0;
	font-family: var(--mhg-font-body);
	font-weight: 600;
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	line-height: 1;
	text-transform: uppercase;
	color: var(--mhg-color-white-65);
}

/* ---------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------- */

.mhg-svc-cta {
	background-color: var(--mhg-color-off-white);
	padding-block: var(--mhg-space-xl);
}

/* Rule inset to the container measure — full-bleed reads as a default <hr>,
   inset reads as a grid decision. Padding kept tight so the rule groups with
   the heading it belongs to. */
.mhg-svc-cta__inner {
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
	padding-block-start: var(--mhg-space-md);
}

.mhg-svc-cta__heading {
	margin: 0;
	font-size: var(--mhg-font-size-heading-lg);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-cta__text {
	margin: var(--mhg-space-md) 0 var(--mhg-space-lg);
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body-lg);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   Tablet
   --------------------------------------------------------------- */

@media (min-width: 768px) {
	.mhg-svc-hero,
	.mhg-svc-list,
	.mhg-svc-proof,
	.mhg-svc-cta {
		padding-inline: var(--mhg-space-md);
	}

	.mhg-svc-hero {
		padding-block: var(--mhg-space-section) var(--mhg-space-xl);
	}

	.mhg-svc-list {
		padding-block: var(--mhg-space-xl) var(--mhg-space-section);
	}

	.mhg-svc-proof {
		padding-block: var(--mhg-space-section) var(--mhg-space-xl);
	}

	.mhg-svc-cta {
		padding-block: var(--mhg-space-section);
	}

	.mhg-svc-cta__inner {
		padding-block-start: var(--mhg-space-lg);
	}

	.mhg-svc-index__item {
		grid-template-columns: var(--mhg-index-num-col) minmax(0, 1fr);
		column-gap: var(--mhg-space-md);
	}

	.mhg-svc-proof__app {
		column-gap: var(--mhg-space-md);
	}
}

/* ---------------------------------------------------------------
   Desktop — the 12-column composition
   --------------------------------------------------------------- */

@media (min-width: 1024px) {
	.mhg-svc-hero__inner,
	.mhg-svc-list__inner,
	.mhg-svc-proof__inner,
	.mhg-svc-cta__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--mhg-space-md);
		row-gap: var(--mhg-space-md);
	}

	/* Hero: headline spans 8, lede indents under its tail. Columns 1-5 of
	   row 2 stay empty — that void is the composition. */
	.mhg-svc-hero__head {
		grid-column: 1 / span 8;
	}

	.mhg-svc-hero__body {
		grid-column: 6 / -1;
	}

	/* Services: head left, index right, column 5 empty. */
	.mhg-svc-list__head {
		grid-column: 1 / span 4;
	}

	.mhg-svc-list__body {
		grid-column: 6 / -1;
	}

	/* Apps: head left, apps right, column 6 empty. */
	.mhg-svc-proof__head {
		grid-column: 1 / span 5;
	}

	.mhg-svc-proof__body {
		grid-column: 7 / -1;
	}

	/* CTA: text left, button parked bottom-right, column 8 empty. */
	.mhg-svc-cta__body {
		grid-column: 1 / span 7;
	}

	.mhg-svc-cta__action {
		grid-column: 9 / -1;
		align-self: end;
		justify-self: end;
	}

	.mhg-svc-cta__text {
		margin-block-end: 0;
	}
}

/* Three-column index rows only once the container is genuinely full. Gating
   this at 1024 collapses the text column to about 33 characters between 1024
   and 1263px, because the container is not at its 1200px max until 1264. */
@media (min-width: 1280px) {
	.mhg-svc-index__item {
		grid-template-columns: var(--mhg-index-num-col) minmax(9rem, 12rem) minmax(0, 1fr);
	}
}

/* The per-component prefers-reduced-motion block that used to sit here was
   removed on 2026-07-30. It was redundant with the global block in
   mhg-style.css, which already zeroes transition-duration and transition-delay
   with !important. Redundant, not harmful — removed because per-component
   reduced-motion blocks are banned on this project. */

/* ============================================================
 * SERVICE TIERS — template-parts/svc-tiers.php
 * Shared by /ios-android-apps/ and /ecommerce-analytics/. Not used by
 * /ecommerce-services/, which is a hub rather than a single service.
 *
 * There is no price row styled here on purpose. "Price on application" is
 * ordinary text at body weight — styling it like a number would give it the
 * visual weight of a price the operator has not set.
 * ============================================================ */
.mhg-svc-tiers {
	padding-inline: var(--mhg-space-sm);
	padding-block: var(--mhg-space-lg) var(--mhg-space-xl);
	background-color: var(--mhg-color-off-white);
}

.mhg-svc-tiers__inner {
	max-width: var(--mhg-container-max);
	margin-inline: auto;
}

.mhg-svc-tiers__eyebrow {
	margin: 0 0 var(--mhg-space-sm);
	font-family: var(--mhg-font-body);
	font-weight: 600;
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	line-height: 1;
	text-transform: uppercase;
	color: var(--mhg-color-teal);
}

.mhg-svc-tiers__heading {
	margin: 0;
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	letter-spacing: -0.015em;
	text-wrap: balance;
	font-size: var(--mhg-font-size-heading-lg);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-tiers__standfirst {
	margin: var(--mhg-space-md) 0 0;
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-svc-tier-list {
	list-style: none;
	margin: var(--mhg-space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: var(--mhg-space-md);
}

/* A hairline card, not a shadowed one. The rest of this sheet builds structure
   from rules rather than elevation, and a floating pricing card is the single
   most SaaS-looking thing that could land on this site. */
.mhg-svc-tier {
	padding: var(--mhg-space-md);
	background-color: var(--mhg-color-white);
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
	border-radius: var(--mhg-radius-sm);
}

.mhg-svc-tier__for {
	margin: 0 0 var(--mhg-space-xs);
	font-family: var(--mhg-font-body);
	font-weight: 600;
	font-size: var(--mhg-font-size-eyebrow);
	letter-spacing: var(--mhg-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--mhg-color-teal);
}

.mhg-svc-tier__name {
	margin: 0;
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	font-size: var(--mhg-font-size-row-title);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-tier__text {
	margin: var(--mhg-space-sm) 0 0;
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-svc-tier__price {
	margin: var(--mhg-space-md) 0 0;
	padding-block-start: var(--mhg-space-sm);
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-charcoal);
}

.mhg-svc-tiers__action {
	margin-block-start: var(--mhg-space-lg);
}

@media (min-width: 768px) {
	.mhg-svc-tiers {
		padding-inline: var(--mhg-space-md);
		padding-block: var(--mhg-space-xl) var(--mhg-space-section);
	}

	/* Equal columns, and the cards stretch so three unequal texts still bottom
	   out on the same line — the price row is the alignment anchor. */
	.mhg-svc-tier-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}

	.mhg-svc-tier {
		display: flex;
		flex-direction: column;
	}

	/* Pushes the price to the bottom of every card regardless of text length. */
	.mhg-svc-tier__price {
		margin-block-start: auto;
	}
}