/*
 * Shopify app pages — landing (template-app-landing.php), privacy policy
 * (template-app-privacy.php) and support (template-app-support.php).
 *
 * Rebuilt 2026-07-30. Three things were wrong, and the first two were bugs
 * rather than taste:
 *
 *   1. mhg-bundle-demo.js rendered its rows with a `mhg-bundle-demo__*` block
 *      name while every rule here was written for `mhg-app-demo__*`. Nothing
 *      matched, so the page's one interactive component — its whole reason for
 *      existing — rendered as unstyled run-together text. The script now emits
 *      the block that owns the markup it enhances.
 *   2. The shared shell was an ENUMERATED selector list. Three sections added
 *      later (demo, how, limits) were never added to it, so they had no
 *      max-width and no gutter: full-bleed at every width, and text touching
 *      both screen edges at 375px. The enumeration is now a class,
 *      .mhg-app-section / .mhg-app-section__inner. A missing class is visible
 *      in the markup you are writing; a missing entry in a list 500 lines away
 *      in another file is not — and build-standards.md warns in terms that
 *      enumerated lists go stale fast.
 *   3. The composition was the "very plain, very generic" default that
 *      /ecommerce-services/ was already rebuilt to escape: everything centred,
 *      bordered white cards on a white ground, a pill badge, and Playfair at
 *      700 inherited silently. This file now follows that page — stop centring,
 *      hairline-ruled editorial rows instead of cards, Playfair at 400 above
 *      2rem, asymmetric section padding, and a 12-column grid at desktop with
 *      one column deliberately left empty.
 *
 * Mobile-first; every colour, size and space is a token from mhg-tokens.css.
 *
 * Gold budget: the hero rule, and the left mark on a formed bundle row. Gold is
 * used only as a rule or a border on light ground, never as text — #c9a84c is
 * 2.29:1 on white and 2.13:1 on the off-white, both far under the 4.5:1 AA
 * threshold. On charcoal it measures 6.02:1 and is safe, but this page has no
 * need of it there.
 */

/* ---------------------------------------------------------------
   Shared shell — a CLASS, not a list of section names
   --------------------------------------------------------------- */

.mhg-app-section {
	padding-inline: var(--mhg-space-sm);
}

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

/* ---------------------------------------------------------------
   Shared primitives
   --------------------------------------------------------------- */

/*
 * Micro-labels. Enumerated deliberately — the reference page does the same
 * (mhg-ecommerce-services.css) and the failure mode is benign: a section added
 * without its label here is visible the instant you look at it, unlike a
 * missing shell entry, which was invisible at desktop. EXTEND THIS LIST when a
 * new labelled element is added.
 *
 * line-height 1 is the cap-height block an uppercase micro-label wants, not an
 * accident of the body scale. Margin is applied separately below, because two
 * of these are flex or grid items where a block margin would be honoured and
 * would push the row out of alignment.
 */
.mhg-app-hero__eyebrow,
.mhg-app-doc__eyebrow,
.mhg-app-demo__legend,
.mhg-app-demo__panel-label,
.mhg-app-details__row dt,
.mhg-app-faq__contents-title {
	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-app-hero__eyebrow,
.mhg-app-doc__eyebrow,
.mhg-app-demo__legend,
.mhg-app-demo__panel-label,
.mhg-app-faq__contents-title {
	margin: 0 0 var(--mhg-space-sm);
}

/* The house gold rule, as on /about/ and /ecommerce-services/ — left-aligned,
   an element rather than a centred ::after, so it composes on a grid. */
.mhg-app-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);
}

/*
 * Headings. Playfair at 400 above 2rem: at 700 it is the loudest SaaS tell
 * there is, and the homepage H1 already ships 400 — so this is a return to the
 * house, not a departure from it.
 */
.mhg-app-hero__heading,
.mhg-app-doc__heading,
.mhg-app-demo__heading,
.mhg-app-how__heading,
.mhg-app-limits__heading,
.mhg-app-audience__heading,
.mhg-app-shots__heading,
.mhg-app-details__heading {
	margin: 0;
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: var(--mhg-line-height-tight);
	text-wrap: balance;
	color: var(--mhg-color-charcoal);
}

/*
 * 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.
 * The dark-ground rule is declared AFTER the light one at equal specificity, so
 * it wins inside .mhg-app-limits on source order.
 *
 * WCAG 1.4.11 Non-text Contrast is the floor here. Teal measures 7.70:1 on
 * white and 7.18:1 on the off-white; white on charcoal is 13.77:1. The theme's
 * sitewide gold ring is 2.29:1 on white and remains non-conformant everywhere
 * else — that is a separate, still-open item, not something this file fixes.
 */
.mhg-app-section a:focus-visible,
.mhg-app-section button:focus-visible,
.mhg-app-section input: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-app-limits a:focus-visible,
.mhg-app-limits 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);
}

/*
 * The link rule and its hover used to live here, and carried a long comment
 * about a specificity tie with mhg-style.css. Both are gone: the global `a`
 * now sets its rest strength through the --mhg-rule-rest custom property,
 * which has no specificity competitor, so a context selector can no longer
 * accidentally win and kill the hover. See the system block in mhg-style.css.
 */


/* ---------------------------------------------------------------
   Landing — hero
   --------------------------------------------------------------- */

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

.mhg-app-hero__heading {
	font-size: var(--mhg-font-size-display);
	line-height: 1.04;
}

.mhg-app-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-app-hero__sub {
	margin: var(--mhg-space-sm) 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);
}

/* Plain text, not a badge. The app has not shipped and the page must not dress
   that up — the same call the services page makes for its app statuses. */
.mhg-app-hero__note {
	margin: var(--mhg-space-lg) 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-dark-grey);
}

/* ---------------------------------------------------------------
   Landing — interactive explainer
   --------------------------------------------------------------- */

.mhg-app-demo {
	padding-block: var(--mhg-space-lg) var(--mhg-space-xl);
}

.mhg-app-demo__heading {
	font-size: var(--mhg-font-size-heading-lg);
}

.mhg-app-demo__intro {
	margin: var(--mhg-space-md) 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);
}

/* De-boxed. A bordered, rounded, white panel on a white ground was decoration
   standing in for composition; the hairlines below do the separating. */
.mhg-app-demo__widget {
	display: grid;
	gap: var(--mhg-space-lg);
	margin-top: var(--mhg-space-lg);
}

.mhg-app-demo__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.mhg-app-demo__legend {
	padding: 0;
}

.mhg-app-demo__item {
	display: flex;
	align-items: center;
	gap: var(--mhg-space-sm);
	padding-block: var(--mhg-space-sm);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
	font-size: var(--mhg-font-size-body);
	color: var(--mhg-color-dark-grey);
	cursor: pointer;
	transition: border-color var(--mhg-transition-fast),
		color var(--mhg-transition-fast);
}

/* NOT a background fill: off-white on white is 1.071:1, fainter than the
   teal -> teal-dark shift this system deletes as imperceptible, and the row has
   padding-block only, so a fill would butt against the checkbox and the price.
   Promote the row's OWN hairline instead — rule -> teal is 7.69:1 across the
   full width of the row, which is what a list row can actually carry.
   :focus-within is genuine here: the row is a <label> wrapping a real
   checkbox. */
@media (hover: hover) {
	.mhg-app-demo__item:hover {
		border-block-end-color: var(--mhg-color-teal);
		color: var(--mhg-color-charcoal);
	}
}

.mhg-app-demo__item:focus-within {
	border-block-end-color: var(--mhg-color-teal);
	color: var(--mhg-color-charcoal);
}

.mhg-app-demo__item:first-of-type {
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-demo__checkbox {
	accent-color: var(--mhg-color-teal);
}

.mhg-app-demo__item-name {
	flex: 1;
}

.mhg-app-demo__item-price,
.mhg-app-demo__line-price,
.mhg-app-demo__line-was {
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mhg-color-charcoal);
}

.mhg-app-demo__status {
	margin: var(--mhg-space-md) 0 0;
	max-width: var(--mhg-measure-body);
	font-size: var(--mhg-font-size-footer-meta);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

/* Tabs are an enhancement. Without JS both panels are shown with their own
   labels, which reads correctly as a before/after comparison; the tab strip
   would be inert, so it stays hidden until the script claims the component. */
.mhg-app-demo__tabs {
	display: none;
	gap: var(--mhg-space-xs);
	margin-bottom: var(--mhg-space-md);
}

[data-enhanced="true"] .mhg-app-demo__tabs {
	display: flex;
	flex-wrap: wrap;
}

/*
 * The resting state has to read as a control. A border at
 * --mhg-color-border-light is 1.25:1 against white, which is not an
 * identifiable boundary; teal is 7.70:1. Selection is then carried by FILL
 * rather than by hue, so the two states are still distinguishable in
 * greyscale — teal against dark grey is only 1.27:1.
 */
.mhg-app-demo__tab {
	padding: var(--mhg-space-sm) var(--mhg-space-md);
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-button);
	letter-spacing: var(--mhg-letter-spacing-button);
	color: var(--mhg-color-teal);
	background-color: transparent;
	border: var(--mhg-hairline) solid var(--mhg-color-teal);
	border-radius: var(--mhg-radius-sm);
	cursor: pointer;
	transition: color var(--mhg-transition-fast),
		background-color var(--mhg-transition-fast),
		transform var(--mhg-transition-fast);
}

/* The site's only genuine UI control had a transition declared and no :hover to
   drive it. The hover deliberately does NOT mimic selection (a teal fill) — an
   unselected tab that looks selected is worse than one that looks inert. The
   fill is a supporting channel at 1.07:1; the Lift is the signal, and the press
   reaches touch, which matters here because the strip only exists once JS has
   claimed the component. */
@media (hover: hover) {
	.mhg-app-demo__tab[aria-selected="false"]:hover {
		background-color: var(--mhg-color-off-white);
		transform: translateY(calc(var(--mhg-hairline) * -2));
	}
}

/* The selected tab gets no Lift — it is the current state, not a target. */
.mhg-app-demo__tab:active {
	transform: translateY(var(--mhg-hairline));
	transition: none;
}

.mhg-app-demo__tab[aria-selected="true"] {
	color: var(--mhg-color-white);
	background-color: var(--mhg-color-teal);
}

.mhg-app-demo__panel + .mhg-app-demo__panel {
	margin-top: var(--mhg-space-lg);
}

[data-enhanced="true"] .mhg-app-demo__panel + .mhg-app-demo__panel {
	margin-top: 0;
}

/* The enhanced view drives the label from the tab, so hide the duplicate. */
[data-enhanced="true"] .mhg-app-demo__panel-label {
	display: none;
}

/* No box and no min-height. The placeholder row is always present — the script
   restores it whenever nothing is chosen — so there is nothing to reserve
   space for, and an empty bordered rectangle was what shipped when it wasn't. */
.mhg-app-demo__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-demo__line {
	display: flex;
	align-items: baseline;
	gap: var(--mhg-space-sm);
	padding-block: var(--mhg-space-sm);
	padding-inline-start: var(--mhg-space-sm);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
	border-inline-start: var(--mhg-rule-height) solid transparent;
	font-size: var(--mhg-font-size-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-app-demo__line--placeholder {
	font-style: italic;
}

/* The one gold mark on the page besides the hero rule: it marks the single
   line the shopper sees, which is the whole point being demonstrated. The
   transparent border is declared on the base rule above so the row does not
   shift when the bundle forms. */
.mhg-app-demo__line--bundle {
	border-inline-start-color: var(--mhg-color-gold);
}

.mhg-app-demo__line-name {
	flex: 1;
}

.mhg-app-demo__line-was {
	text-decoration: line-through;
	color: var(--mhg-color-dark-grey);
}

/* An uppercase micro-label, not a pill. A bordered badge is the SaaS register
   this page is being taken out of. */
.mhg-app-demo__line-tag {
	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-app-demo__caveat {
	margin: var(--mhg-space-md) 0 0;
	font-size: var(--mhg-font-size-footer-meta);
	color: var(--mhg-color-dark-grey);
}

/* ---------------------------------------------------------------
   Landing — how the rules work
   --------------------------------------------------------------- */

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

.mhg-app-how__heading,
.mhg-app-limits__heading,
.mhg-app-audience__heading,
.mhg-app-shots__heading,
.mhg-app-details__heading {
	font-size: var(--mhg-font-size-heading-lg);
}

.mhg-app-how__steps {
	counter-reset: mhg-step;
	list-style: none;
	margin: var(--mhg-space-lg) 0 0;
	padding: 0;
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-how__step {
	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);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
	counter-increment: mhg-step;
}

/* Playfair ships proportional figures by default, so 1 and 4 would be
   different widths and the left edge would wobble. */
.mhg-app-how__step::before {
	content: counter( mhg-step, decimal-leading-zero );
	grid-column: 1;
	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-app-how__step-title {
	grid-column: 2;
	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-app-how__step p {
	grid-column: 2;
	margin: var(--mhg-space-xs) 0 0;
	max-width: var(--mhg-measure-body);
}

/* ---------------------------------------------------------------
   Landing — what it does not do
   --------------------------------------------------------------- */

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

.mhg-app-limits__heading {
	color: var(--mhg-color-white);
}

.mhg-app-limits__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-app-limits__list {
	margin: var(--mhg-space-lg) 0 0;
}

/* --mhg-color-white-12 is the house editorial hairline on charcoal, as used on
   /ecommerce-services/. It is decorative — dt and dd already differ
   typographically — so the 3:1 non-text floor does not apply to it. */
.mhg-app-limits__row {
	padding-block: var(--mhg-space-md);
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-white-12);
}

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

.mhg-app-limits__row dt {
	margin-bottom: var(--mhg-space-xs);
	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);
}

.mhg-app-limits__row dd {
	margin: 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);
}

/* ---------------------------------------------------------------
   Landing — who it is for
   --------------------------------------------------------------- */

.mhg-app-audience {
	padding-block: var(--mhg-space-xl) var(--mhg-space-lg);
}

/* Three bordered white cards on a white ground were the generic default. A
   ruled index reads as a document, which is the register a holding company
   wants, and it has no orphan state at any width. */
.mhg-app-audience__list {
	list-style: none;
	margin: var(--mhg-space-lg) 0 0;
	padding: 0;
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-audience__item {
	padding-block: var(--mhg-space-md);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-audience__item-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-app-audience__item-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);
}

/* ---------------------------------------------------------------
   Landing — screenshots
   --------------------------------------------------------------- */

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

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

.mhg-app-shots__item {
	margin: 0;
}

.mhg-app-shots__image {
	display: block;
	width: 100%;
	height: auto;
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
}

/* ---------------------------------------------------------------
   Landing — privacy / support / company
   --------------------------------------------------------------- */

.mhg-app-details {
	padding-block: var(--mhg-space-lg) var(--mhg-space-xl);
}

.mhg-app-details__list {
	margin: var(--mhg-space-lg) 0 0;
	border-block-start: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-details__row {
	padding-block: var(--mhg-space-md);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
}

.mhg-app-details__row dd {
	margin: var(--mhg-space-xs) 0 0;
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

.mhg-app-details__hint {
	display: block;
	margin-top: var(--mhg-space-xs);
	max-width: var(--mhg-measure-body);
	font-size: var(--mhg-font-size-footer-meta);
	color: var(--mhg-color-dark-grey);
}

.mhg-app-details__address {
	font-style: normal;
}

/* ---------------------------------------------------------------
   Document pages — privacy policy and support
   --------------------------------------------------------------- */

.mhg-app-doc {
	padding-block: var(--mhg-space-xl);
}

/*
 * The document column, narrower than the site container. The header's rule runs
 * the full width of this column while the text below it is capped narrower
 * still — a masthead device, not residue.
 */
.mhg-app-doc__inner {
	max-width: var(--mhg-measure-doc);
}

.mhg-app-doc__header {
	padding-bottom: var(--mhg-space-md);
	border-block-end: var(--mhg-hairline) solid var(--mhg-color-rule);
}

/*
 * Sized against the site's own policy pages, which run 2rem rising to 2.5rem —
 * not against the homepage. A vendor policy page must not own a louder H1 than
 * the front page; see the note on the display tokens in mhg-tokens.css.
 */
.mhg-app-doc__heading {
	font-size: var(--mhg-font-size-heading-lg);
}

.mhg-app-doc__meta {
	margin: var(--mhg-space-sm) 0 0;
	font-size: var(--mhg-font-size-footer-meta);
	color: var(--mhg-color-dark-grey);
}

.mhg-app-doc__content {
	margin-top: var(--mhg-space-lg);
	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);
}

.mhg-app-doc__lede {
	max-width: var(--mhg-measure-lede);
	font-size: var(--mhg-font-size-body-lg);
	color: var(--mhg-color-charcoal);
}

.mhg-app-doc__content h2 {
	margin: var(--mhg-space-lg) 0 var(--mhg-space-sm);
	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-app-doc__content h3 {
	margin: var(--mhg-space-md) 0 var(--mhg-space-xs);
	font-family: var(--mhg-font-heading);
	font-weight: 400;
	font-size: var(--mhg-font-size-body-lg);
	line-height: var(--mhg-line-height-tight);
	color: var(--mhg-color-charcoal);
}

.mhg-app-doc__content p {
	margin: 0 0 var(--mhg-space-sm);
}

.mhg-app-doc__content ul {
	margin: 0 0 var(--mhg-space-sm);
	padding-left: var(--mhg-space-md);
}

.mhg-app-doc__content li {
	margin-bottom: var(--mhg-space-xs);
}

.mhg-app-doc__address {
	padding-left: var(--mhg-space-sm);
	border-left: var(--mhg-rule-height) solid var(--mhg-color-gold);
	font-style: normal;
}

/* ---------------------------------------------------------------
   Support page — FAQ list
   --------------------------------------------------------------- */

/*
 * Every question is individually linkable so a support reply can point at one
 * answer instead of retyping it. The site header is position:sticky, so without
 * scroll-margin every one of those jumps lands the question underneath it —
 * which would quietly break the whole point of the anchors.
 *
 * The border is declared transparent on the base rule so arriving at a question
 * changes only its colour. Reserving the space means the page does not jolt
 * sideways at the moment you land on it.
 */
.mhg-app-faq__item {
	scroll-margin-top: calc(var(--mhg-header-height) + var(--mhg-space-md));
	padding-inline-start: var(--mhg-space-sm);
	border-inline-start: var(--mhg-rule-height) solid transparent;
}

/* Teal at 7.70:1, plus a tint — not gold. Gold at 2.29:1 as the sole signal
   across fifteen identical blocks is exactly what this file's header forbids. */
.mhg-app-faq__item:target {
	border-inline-start-color: var(--mhg-color-teal);
	background-color: var(--mhg-color-off-white);
}

.mhg-app-faq__contents {
	margin: 0 0 var(--mhg-space-lg);
	padding: var(--mhg-space-md);
	border: var(--mhg-hairline) solid var(--mhg-color-rule);
	background-color: var(--mhg-color-off-white);
}

/* A table of contents is a discrete object and keeps its box — the one carve-out
   from de-boxing on these pages, because it genuinely is a separate thing from
   the document flowing around it. */
.mhg-app-faq__contents ol {
	margin: 0;
	padding-left: var(--mhg-space-md);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
}

/* ---------------------------------------------------------------
   Tablet and up
   --------------------------------------------------------------- */

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

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

	.mhg-app-demo {
		padding-block: var(--mhg-space-xl) var(--mhg-space-section);
	}

	.mhg-app-how {
		padding-block: var(--mhg-space-section) var(--mhg-space-xl);
	}

	.mhg-app-limits {
		padding-block: var(--mhg-space-section);
	}

	.mhg-app-audience {
		padding-block: var(--mhg-space-section) var(--mhg-space-xl);
	}

	.mhg-app-shots {
		padding-block: var(--mhg-space-xl) var(--mhg-space-section);
	}

	.mhg-app-details {
		padding-block: var(--mhg-space-xl) var(--mhg-space-section);
	}

	/* A standalone document between the header and the footer is not a band in
	   a rhythm sequence — it stays symmetric. */
	.mhg-app-doc {
		padding-block: var(--mhg-space-section);
	}

	.mhg-app-how__step {
		column-gap: var(--mhg-space-md);
	}

	.mhg-app-shots__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * max-content sizes the label column to the widest label — no magic number,
	 * and it cannot clip the way a guessed width can.
	 *
	 * The track must live on the LIST, not on the row. It was on the row until
	 * 2026-07-30, which made every row its own independent grid: max-content then
	 * sized each row to ITS OWN label, so the description column started at a
	 * different x on every line and the comment above was describing an intent the
	 * code did not deliver. It went unseen because this component had only ever
	 * held three near-identical labels (PRIVACY / SUPPORT / COMPANY); the Matrix
	 * Rewards page puts six of very different lengths through it and the ragged
	 * edge is immediate. subgrid is what lets the rows keep their own borders and
	 * padding while sharing one measured column.
	 *
	 * Fallback is safe: a browser without subgrid drops that one declaration and
	 * the row falls back to a single column, which is exactly the mobile layout —
	 * label above description, still correct, just not aligned.
	 */
	.mhg-app-details__list {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: var(--mhg-space-md);
	}

	.mhg-app-details__row {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}

	.mhg-app-details__row dd {
		margin-top: 0;
	}

	/* Picker beside the views, so the cause and the effect are visible at once —
	   the whole point of the component is watching one change the other. */
	.mhg-app-demo__widget {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.mhg-app-faq__contents {
		padding: var(--mhg-space-md) var(--mhg-space-lg);
	}
}

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

@media (min-width: 1024px) {
	.mhg-app-hero__inner,
	.mhg-app-demo__inner,
	.mhg-app-how__inner,
	.mhg-app-limits__inner,
	.mhg-app-audience__inner,
	.mhg-app-shots__inner,
	.mhg-app-details__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--mhg-space-md);
		row-gap: var(--mhg-space-md);
	}

	/*
	 * Safety net, declared BEFORE the specific placements so they still win.
	 * Any child that has not been given a column would otherwise auto-place into
	 * a single track — about 50px at 1024 — and be crushed. Failing to full
	 * width is the recoverable failure; this is the same class-beats-enumeration
	 * argument as the shell, applied to the composition.
	 */
	.mhg-app-hero__inner > *,
	.mhg-app-demo__inner > *,
	.mhg-app-how__inner > *,
	.mhg-app-limits__inner > *,
	.mhg-app-audience__inner > *,
	.mhg-app-shots__inner > *,
	.mhg-app-details__inner > * {
		grid-column: 1 / -1;
	}

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

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

	/*
	 * Demo. The widget spans the full width: it is the one section whose body is
	 * a working two-pane component rather than prose, and indenting it would have
	 * made it NARROWER at 1024 than it already is at 768.
	 *
	 * That means the head has to span the full width too, and split internally.
	 * A six-column head above a twelve-column component left a 616x253px void
	 * sitting directly on top of the views pane, so the tab strip read as
	 * floating in space with nothing above it. Heading left, standfirst right,
	 * column six empty — the void becomes the gap between two things rather than
	 * a hole beside one.
	 */
	.mhg-app-demo__head {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--mhg-space-md);
		align-items: start;
	}

	.mhg-app-demo__heading {
		grid-column: 1 / span 5;
	}

	.mhg-app-demo__intro {
		grid-column: 7 / -1;
		margin-top: 0;
	}

	.mhg-app-demo__widget,
	.mhg-app-demo__caveat {
		grid-column: 1 / -1;
	}

	.mhg-app-demo__widget {
		margin-top: 0;
	}

	/* How: head left, steps right, column 5 empty. */
	.mhg-app-how__head {
		grid-column: 1 / span 4;
	}

	.mhg-app-how__steps {
		grid-column: 6 / -1;
		margin-top: 0;
	}

	/* Limits: head left, list right, column 6 empty. */
	.mhg-app-limits__head {
		grid-column: 1 / span 5;
	}

	.mhg-app-limits__list {
		grid-column: 7 / -1;
		margin-top: 0;
	}

	/* Audience and details: same skeleton as How. */
	.mhg-app-audience__head,
	.mhg-app-shots__head,
	.mhg-app-details__head {
		grid-column: 1 / span 4;
	}

	.mhg-app-audience__list,
	.mhg-app-shots__grid,
	.mhg-app-details__list {
		grid-column: 6 / -1;
		margin-top: 0;
	}
}