/*
 * Muslim.Blue network pages (PHASE-B8-DESIGN section 2): a masjid's page, the hubs, a city's prayer times, the report
 * form and the 404. Phone first: one column at 390 pixels with a 16-pixel gutter; wide tables scroll in their own box,
 * never the page. Body text is the system face; headings are Literata, served by this site and preloaded (LCP). The
 * tokens are the family's (contrast checked by tools/design_tokens.mjs: WCAG 2.2 AA in both themes), with a dark set;
 * a masjid's own color comes in as --mbn-band from its page.
 */

:root {
	/*
	 * Phase V (V1): the color roles, faces, corner and shadow are the family's (commons assets/design/family-blue.css,
	 * linked before this file by Network\Head; built by tools/design_tokens.mjs), which switch for dark themselves. Only
	 * the page's own band and map colors are written here.
	 */
	--mbn-bg: var(--mc-bg);
	--mbn-surface: var(--mc-surface);
	--mbn-surface-2: var(--mc-surface-2);
	--mbn-ink: var(--mc-ink);
	--mbn-ink-soft: var(--mc-ink-soft);
	--mbn-muted: var(--mc-muted);
	--mbn-line: var(--mc-line);
	--mbn-field: var(--mc-edge);
	--mbn-accent: var(--mc-accent);
	--mbn-accent-strong: var(--mc-accent-strong);
	--mbn-accent-soft: var(--mc-tint);
	--mbn-on-accent: var(--mc-on-accent);
	--mbn-focus: var(--mc-focus);
	--mbn-warn: var(--mc-warn);
	--mbn-warn-soft: var(--mc-warn-bg);
	--mbn-bad: var(--mc-bad);
	--mbn-bad-soft: var(--mc-bad-bg);
	--mbn-band: #1b4f9c;
	--mbn-band-strong: #0b2550;
	--mbn-on-band: #ffffff;
	--mbn-map-bg: #eef3f9;
	--mbn-map-line: #b9c6d8;
	--mbn-map-text: #4e5d76;

	--mbn-display: var(--mc-font-display);
	--mbn-text: var(--mc-font-text);

	/*
	 * Blue's shared type and touch scale (PHASE-U, the experience floor), the same numbers as the Office's --mb-* tokens
	 * (assets/office/office.css) and the app's (apps/apps/blue src/theme/palette.ts): body 17 px on a phone and 18 on a
	 * desktop, supporting text 15, nothing a person reads under 14; 44 px targets, 48 px primary buttons and fields.
	 */
	--mbn-text-xs: 0.875rem;
	--mbn-text-sm: 0.9375rem;
	--mbn-text-md: 1.0625rem;
	--mbn-text-lg: 1.25rem;
	/* About 72 characters a line of body text (a system font's "0" is wider than its average letter). */
	--mbn-measure: 52ch;

	--mbn-gutter: 16px;
	--mbn-page: 60rem;
	--mbn-radius: var(--mc-radius-card);
	--mbn-target: 44px;
	--mbn-target-primary: 48px;
	--mbn-field-h: 48px; /* field height; --mbn-field is the border color */
	--mbn-target-gap: 8px;
	--mbn-shadow: var(--mc-shadow-1);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--mbn-map-bg: #16253e;
		--mbn-map-line: #34496a;
		--mbn-map-text: #a9b6ca;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--mbn-map-bg: #16253e;
	--mbn-map-line: #34496a;
	--mbn-map-text: #a9b6ca;
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.mbn {
	margin: 0;
	background: var(--mbn-bg);
	color: var(--mbn-ink);
	font-family: var(--mbn-text);
	font-size: var(--mbn-text-md);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {
	:root {
		--mbn-text-md: 1.125rem;
	}
}

/* About 68 characters a line on a desktop, so a paragraph is read without losing the line. */
.mbn-main p,
.mbn-main li {
	max-inline-size: var(--mbn-measure);
}

.mbn-main .mbn-grid li,
.mbn-main .mbn-chips li,
.mbn-main .mbn-actions,
.mbn-main .mbn-places li {
	max-inline-size: none;
}

.mbn a {
	color: var(--mbn-accent);
	text-underline-offset: 0.18em;
}

.mbn a:hover {
	color: var(--mbn-accent-strong);
}

.mbn :focus-visible {
	outline: 3px solid var(--mbn-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.mbn img,
.mbn svg {
	max-width: 100%;
	height: auto;
}

.mbn-wrap {
	width: 100%;
	max-width: var(--mbn-page);
	margin-inline: auto;
	padding-inline: var(--mbn-gutter);
}

.mbn-skip {
	position: absolute;
	inset-inline-start: var(--mbn-gutter);
	inset-block-start: -100px;
	z-index: 10;
	padding: 0.6rem 1rem;
	background: var(--mbn-surface);
	color: var(--mbn-ink);
	border-radius: 8px;
}

.mbn-skip:focus {
	inset-block-start: 8px;
}

/* The header: the mark and two ways in. */
.mbn-top {
	background: var(--mbn-surface);
	border-block-end: 1px solid var(--mbn-line);
}

.mbn-top__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 56px;
}

.mbn .mbn-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mbn-target);
	color: var(--mbn-ink);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
}

/* The horizontal lockup (design/brand/blue/): the light one by default, the dark one on a dark theme. Its size is set
   here over ".mbn img" (height: auto), so it is 30 px tall from the first paint, never its file's own size first: the
   header keeps one row on a phone, and nothing moves when the image arrives (Phase U, BM-27). */
.mbn-brand__lockup {
	display: block;
}

.mbn .mbn-brand__lockup {
	width: auto;
	height: 30px;
	max-width: none;
}

.mbn-brand__lockup--dark {
	display: none;
}

/* On a narrow phone the mark is a little smaller, so the header stays one row: the mark, "Find a masjid", "Account". */
@media (max-width: 26rem) {
	.mbn .mbn-brand__lockup {
		height: 26px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mbn-brand__lockup--light {
		display: none;
	}

	:root:not([data-theme="light"]) .mbn-brand__lockup--dark {
		display: block;
	}
}

:root[data-theme="dark"] .mbn-brand__lockup--light {
	display: none;
}

:root[data-theme="dark"] .mbn-brand__lockup--dark {
	display: block;
}

.mbn-nav {
	display: flex;
	gap: var(--mbn-target-gap) 0.75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mbn-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mbn-target);
	font-weight: 600;
	text-decoration: none;
}

/* The family's icons beside the words (Phase V, V1), once the row has room for them; the words always show. */
.mbn-nav .mc-icon {
	display: none;
	margin-inline-end: 0.35rem;
}

@media (min-width: 30rem) {
	.mbn-nav .mc-icon {
		display: inline-block;
	}
}

/* Breadcrumbs. The list is the page's column (.mbn-wrap centers it), so only its block margins are cleared: a
   `margin: 0` here undid the centering and hung the trail at the window's edge on a desktop (Wave 1 review, N2). */
.mbn-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin-block: 0;
	padding-block: var(--mbn-target-gap) 0.25rem;
	list-style: none;
	font-size: var(--mbn-text-sm);
	color: var(--mbn-muted);
}

.mbn-crumbs li {
	display: inline-flex;
	align-items: center;
}

.mbn-crumbs li + li::before {
	content: "›";
	margin-inline-end: 0.25rem;
	color: var(--mbn-muted);
}

.mbn-crumbs a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	padding-inline: 0.25rem;
}

/* The first crumb's words start on the column's edge, under the logo and above the title; its target keeps its size. */
.mbn-crumbs li:first-child a {
	margin-inline-start: -0.25rem;
}

/* The hero band: the one H1. */
.mbn-hero {
	background: linear-gradient(160deg, var(--mbn-band), var(--mbn-band-strong));
	color: var(--mbn-on-band);
	padding-block: 1.75rem 2rem;
}

.mbn-hero .mbn-wrap > * {
	max-width: 44rem;
}

.mbn-eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.92;
}

.mbn-h1 {
	margin: 0;
	font-family: var(--mbn-display);
	font-size: var(--mc-display);
	line-height: var(--mc-display-leading);
	font-weight: var(--mc-heading-weight);
}

.mbn-lead {
	margin: 0.75rem 0 0;
	font-size: max(1.125rem, var(--mbn-text-md));
}

.mbn-hero .mbn-wrap > .mbn-lead {
	max-width: var(--mbn-measure);
}

/*
 * The hero's own rhythm (Wave 1 review, N1): `.mbn p` below outranks the single classes above, which set the title on
 * its lead with no gap and gave the eyebrow a paragraph's margin. Two classes win back what they meant: the eyebrow
 * close above its title, and the lead 12 px under the title on a phone and 20 px from 64rem, Red's rhythm.
 */
.mbn-hero .mbn-eyebrow {
	margin-block-end: 0.35rem;
}

.mbn-hero .mbn-lead {
	margin-block-start: var(--mc-space-3);
}

@media (min-width: 64rem) {
	.mbn-hero .mbn-lead {
		margin-block-start: var(--mc-space-5);
	}
}

.mbn-badge {
	display: inline-block;
	margin: 0.9rem 0 0;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 16%);
	font-size: 0.875rem;
	font-weight: 600;
}

.mbn-hero .mbn-button--quiet {
	background: rgb(255 255 255 / 14%);
	color: var(--mbn-on-band);
	border-color: rgb(255 255 255 / 55%);
	margin-block-start: 1rem;
}

.mbn-body {
	padding-block: 1.25rem 2.5rem;
}

.mbn-card,
.mbn-section {
	margin-block: 0 1.25rem;
}

.mbn-card {
	padding: 1.1rem var(--mbn-gutter);
	background: var(--mbn-surface);
	border: 1px solid var(--mbn-line);
	border-radius: var(--mbn-radius);
	box-shadow: var(--mbn-shadow);
}

.mbn-card--claim {
	border-color: var(--mbn-accent);
	background: var(--mbn-accent-soft);
}

.mbn-card--warn {
	border-color: var(--mbn-warn);
	background: var(--mbn-warn-soft);
}

.mbn h2 {
	margin: 0 0 0.6rem;
	font-family: var(--mbn-display);
	font-size: var(--mc-h2);
	line-height: var(--mc-h2-leading);
	font-weight: var(--mc-heading-weight);
}

.mbn h3 {
	margin: 1.1rem 0 0.4rem;
	font-family: var(--mc-font-h3);
	font-size: var(--mc-h3);
	line-height: var(--mc-h3-leading);
	font-weight: var(--mc-h3-weight);
}

/* A heading that is a link (a city on its state's page) is a whole 44 px target. */
.mbn h3 > a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	min-inline-size: var(--mbn-target);
}

.mbn p {
	margin: 0 0 0.75rem;
}

.mbn-muted {
	color: var(--mbn-muted);
}

.mbn-note {
	padding: 0.6rem 0.8rem;
	border-inline-start: 4px solid var(--mbn-accent);
	background: var(--mbn-surface-2);
	border-radius: 8px;
	font-weight: 600;
}

/* Times. */
.mbn-table {
	overflow-x: auto;
	margin-block-end: 0.75rem;
	-webkit-overflow-scrolling: touch;
}

.mbn-times {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.mbn-times caption {
	text-align: start;
	padding-block-end: 0.5rem;
	color: var(--mbn-ink-soft);
	font-weight: 600;
}

.mbn-times th,
.mbn-times td {
	padding: 0.6rem 0.5rem;
	border-block-end: 1px solid var(--mbn-line);
	text-align: start;
	white-space: nowrap;
}

.mbn-times thead th {
	font-size: var(--mbn-text-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mbn-muted);
}

.mbn-times tbody th {
	font-weight: 600;
}

.mbn-times--month th,
.mbn-times--month td {
	padding: 0.45rem 0.5rem;
	font-size: 0.9375rem;
}

.mbn-now th,
.mbn-now td {
	background: var(--mbn-accent-soft);
	font-weight: 700;
}

/* The next prayer on a masjid's page (Phase U, BM-19): said in words above the table, and tagged in its row, so color
   is never the only sign. */
.mbn-next {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--mbn-ink);
}

.mbn-now__tag {
	display: inline-block;
	margin-inline-start: 0.35rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--mbn-accent);
	color: var(--mbn-on-accent);
	font-size: var(--mbn-text-xs);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
	vertical-align: 0.1em;
}

/* On a Friday, Jumu'ah's row says what its first time is (Phase U, N1): "1:15 PM" over "khutbah", so the row stays as
   narrow as the others on a phone. */
.mbn-cell-note {
	display: block;
	font-size: var(--mbn-text-xs);
	font-weight: 400;
	color: var(--mbn-muted);
	white-space: normal;
}

/* A masjid's three ways in, under its times (Phase U, BM-08): Follow, Give, Programs and events, each a 48 px button
   that shares the row on a phone. */
.mbn-actions--masjid {
	margin: 0 0 1.25rem;
}

.mbn-actions--masjid .mbn-button {
	flex: 1 1 8.5rem;
}

/* A masjid's campaign taking gifts now. */
.mbn-card--campaign {
	border-inline-start: 4px solid var(--mbn-accent);
}

.mbn-eyebrow--card {
	color: var(--mbn-accent-strong);
	opacity: 1;
}

/* News and Coming up on a masjid's page. */
.mbn-feed {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--mbn-line);
}

.mbn-feed__item {
	display: grid;
	gap: 0.15rem;
	padding-block: 0.5rem 0.75rem;
	border-block-end: 1px solid var(--mbn-line);
}

.mbn-feed__item > a {
	display: flex;
	align-items: center;
	justify-self: start;
	min-block-size: var(--mbn-target);
	font-weight: 700;
}

.mbn-feed__when {
	color: var(--mbn-muted);
	font-size: var(--mbn-text-sm);
}

.mbn-feed__text {
	color: var(--mbn-ink-soft);
	font-size: var(--mbn-text-md);
	line-height: 1.55;
	max-inline-size: var(--mbn-measure);
}

/* The month: the date column stays put while the times scroll beside it on a phone. */
.mbn-times--month tbody th,
.mbn-times--month thead th:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background: var(--mbn-bg);
	white-space: normal;
	min-width: 6.5rem;
}

.mbn-times--month .mbn-now th {
	background: var(--mbn-accent-soft);
}

.mbn-hijri {
	display: block;
	color: var(--mbn-muted);
	font-size: var(--mbn-text-xs);
	font-weight: 500;
}

.mbn-ampm {
	font-size: var(--mbn-text-xs);
	color: var(--mbn-muted);
}

/* The print and "Use my location" buttons need script; their place is kept while they wait, so nothing moves when they
   appear (CLS). */
.mbn-print[hidden],
.mbn-locate[hidden] {
	display: inline-flex !important;
	visibility: hidden;
}

/* A link standing on its own line under a card's form ("Browse every state and city"): a whole 44 px target. */
.mbn .mbn-more {
	margin: 0.5rem 0 0;
}

.mbn-more a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	font-weight: 600;
}

.mbn .mbn-search__near {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin: 0.75rem 0 0;
}

.mbn-search__near .mbn-help {
	margin: 0;
}

.mbn-search__near .mbn-help:empty {
	display: none;
}

/* Lists and links. */
.mbn-list,
.mbn-links,
.mbn-near {
	margin: 0 0 0.75rem;
	padding-inline-start: 1.25rem;
}

.mbn-list li {
	margin-block: var(--mbn-target-gap);
}

.mbn-links li,
.mbn-near li {
	margin-block: var(--mbn-target-gap);
}

.mbn-links a,
.mbn-near a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	font-weight: 600;
}

/* A link in a list of facts (a phone number, a website) is a whole row to tap. */
.mbn-list a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
}

/* A long name keeps its number beside it: the number, then the name and its distance wrapping together. */
.mbn-near {
	padding-inline-start: 0;
	list-style: none;
	counter-reset: mbn-near;
}

.mbn-near li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	column-gap: 0.5rem;
	align-items: baseline;
	counter-increment: mbn-near;
}

.mbn-near li::before {
	content: counter(mbn-near) ".";
	color: var(--mbn-muted);
	font-weight: 600;
	text-align: end;
}

.mbn-near li > * {
	grid-column: 2;
}

.mbn-near li > a {
	grid-row: 1;
}

.mbn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mbn-target-primary);
	padding: 0.6rem 1.15rem;
	border: 2px solid var(--mbn-accent);
	border-radius: 10px;
	background: var(--mbn-accent);
	color: var(--mbn-on-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.mbn a.mbn-button {
	color: var(--mbn-on-accent);
}

.mbn a.mbn-button:hover {
	background: var(--mbn-accent-strong);
	border-color: var(--mbn-accent-strong);
	color: var(--mbn-on-accent);
}

.mbn-button--quiet,
.mbn a.mbn-button--quiet {
	background: transparent;
	color: var(--mbn-accent);
}

.mbn a.mbn-button--quiet:hover {
	background: var(--mbn-accent-soft);
	color: var(--mbn-accent-strong);
}

.mbn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mbn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.mbn-chip,
.mbn a.mbn-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--mbn-target);
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--mbn-line);
	border-radius: 999px;
	background: var(--mbn-surface);
	color: var(--mbn-ink);
	font-weight: 600;
	text-decoration: none;
}

.mbn a.mbn-chip:hover {
	border-color: var(--mbn-accent);
	color: var(--mbn-accent-strong);
}

.mbn-count {
	color: var(--mbn-muted);
	font-weight: 500;
	font-size: var(--mbn-text-xs);
}

.mbn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbn-grid a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mbn-target);
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--mbn-line);
	border-radius: 10px;
	background: var(--mbn-surface);
	color: var(--mbn-ink);
	font-weight: 600;
	text-decoration: none;
}

.mbn-grid a:hover {
	border-color: var(--mbn-accent);
}

.mbn-places {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--mbn-line);
}

.mbn-place {
	display: grid;
	gap: 0.15rem;
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--mbn-line);
}

.mbn-place a {
	display: flex;
	align-items: center;
	justify-self: start;
	min-block-size: var(--mbn-target);
	font-weight: 700;
	font-size: max(1.0625rem, var(--mbn-text-md));
}

.mbn-place__addr {
	color: var(--mbn-muted);
	font-size: var(--mbn-text-sm);
}

.mbn-place__tag {
	justify-self: start;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--mbn-surface-2);
	color: var(--mbn-ink-soft);
	font-size: var(--mbn-text-xs);
	font-weight: 600;
}

.mbn-place--own .mbn-place__tag {
	background: var(--mbn-accent-soft);
	color: var(--mbn-accent-strong);
}

.mbn-address {
	margin-block-end: 0.75rem;
	font-style: normal;
}

/* The map. */
.mbn-map {
	margin: 0 0 0.75rem;
}

.mbn-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.mbn-map__bg {
	fill: var(--mbn-map-bg);
	stroke: var(--mbn-line);
}

.mbn-map__ring {
	fill: none;
	stroke: var(--mbn-map-line);
	stroke-width: 1.5;
	stroke-dasharray: 4 5;
}

.mbn-map__ringtext,
.mbn-map__north text {
	fill: var(--mbn-map-text);
	font: 600 17px var(--mbn-text);
}

.mbn-map__axis {
	stroke: var(--mbn-map-line);
	stroke-width: 1;
}

.mbn-map__north path {
	fill: var(--mbn-map-text);
}

.mbn-map__near circle {
	fill: var(--mbn-surface);
	stroke: var(--mbn-accent);
	stroke-width: 2.5;
}

.mbn-map__near--approx circle {
	stroke-dasharray: 5 4;
}

.mbn-map__near text {
	fill: var(--mbn-ink);
	font: 700 17px var(--mbn-text);
}

.mbn-map__here circle {
	fill: var(--mbn-accent);
	stroke: var(--mbn-surface);
	stroke-width: 3;
}

.mbn-map__here path {
	fill: var(--mbn-on-accent);
}

/* Phase V Wave 2 (Maps): the masjid's map on its streets (commons maps.css draws the streets and the frame). The map
   keeps its own size (640 by 360), so the rings' words stay the size they were drawn at; halos keep them readable over
   the streets. */
.mbn-map--streets .mbn-map__svg {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
}

.mbn-map--streets .mbn-map__ring {
	stroke: var(--mbn-accent);
	stroke-opacity: 0.6;
}

.mbn-map--streets .mbn-map__ringtext,
.mbn-map--streets .mbn-map__north text,
.mbn-map--streets .mbn-map__north path {
	paint-order: stroke;
	stroke: var(--mc-map-earth);
	stroke-width: 4px;
	stroke-linejoin: round;
}

/* A list with its map beside it (MapList): the list's own rules, the number before each name. */
.mbn-maplist .mbn-place a .mc-map-n {
	margin-inline-end: 0.5rem;
}

/* Search and forms. */
.mbn-search {
	margin-block-end: 1.25rem;
}

.mbn-search label,
.mbn-form label,
.mbn-form legend {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.mbn-search__row {
	display: flex;
	gap: 0.5rem;
}

.mbn-search input,
.mbn-form input[type="text"],
.mbn-form input[type="email"],
.mbn-form textarea {
	width: 100%;
	min-height: var(--mbn-field-h);
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--mbn-field);
	border-radius: 10px;
	background: var(--mbn-surface);
	color: var(--mbn-ink);
	font: inherit;
}

.mbn-search input {
	flex: 1 1 auto;
	min-width: 0;
}

/* The button keeps its word whole however narrow the box (the home page's search sits in a card). */
.mbn-search__row .mbn-button {
	flex: none;
	white-space: nowrap;
}

.mbn-form fieldset {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.mbn-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--mbn-field-h);
}

.mbn-choice input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--mbn-accent);
}

.mbn-choice label {
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin: 0;
	font-weight: 500;
}

/* The whole row is the target, not only its words: a thumb between two choices still picks one. */
.mbn-choice label::before {
	content: "";
	position: absolute;
	inset: 0;
}

.mbn-help {
	display: block;
	margin-block-start: 0.3rem;
	color: var(--mbn-muted);
	font-size: var(--mbn-text-sm);
}

.mbn-trap {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mbn-alert {
	margin-block-end: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--mbn-bad);
	background: var(--mbn-bad-soft);
	color: var(--mbn-ink);
	font-weight: 600;
}

.mbn-monthnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block: 0.5rem 1.25rem;
}

[hidden]:not(.mbn-print):not(.mbn-locate) {
	display: none !important;
}

/* The footer: the family's one pattern (commons Design\Footer, .mc-foot, Phase V W-F), on Blue's own column. */
.mbn-foot {
	--mc-foot-max: var(--mbn-page);
	--mc-foot-gutter: var(--mbn-gutter);
}

.mbn-foot__credit {
	margin: 0;
	color: var(--mbn-muted);
	font-size: var(--mbn-text-xs);
}

@media (min-width: 48rem) {
	:root {
		--mbn-gutter: 24px;
	}

	.mbn-hero {
		padding-block: 2.5rem 2.75rem;
	}

	.mbn-card {
		padding: 1.4rem 1.6rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mbn a,
	.mbn-button,
	.mbn-chip {
		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	}
}

/* Printing a month: the table and its notes on one sheet, nothing else. */
@media print {
	@page {
		margin: 12mm;
	}

	body.mbn {
		background: #ffffff;
		color: #000000;
		font-size: 10pt;
	}

	.mbn-top,
	.mbn-crumbs,
	.mbn-foot .mc-foot__top,
	.mbn-foot .mc-foot__family,
	.mbn-skip,
	.mbn-noprint,
	.mbn-card,
	.mbn-badge {
		display: none !important;
	}

	/* The footer prints only its credit: a printed timetable owes its open data the same attribution as the page. */
	.mbn-foot {
		margin: 0;
		padding: 3mm 0 0;
		background: none;
		border: 0;
		color: #000000;
	}

	.mbn-foot .mc-foot__inner {
		padding: 0;
	}

	.mbn-foot__credit {
		display: block;
		margin: 0;
		color: #000000;
		font-size: 8pt;
	}

	.mbn-hero {
		background: none;
		color: #000000;
		padding: 0 0 4mm;
	}

	.mbn-h1 {
		font-size: 16pt;
	}

	.mbn-table {
		overflow: visible;
	}

	.mbn-times--month th,
	.mbn-times--month td {
		padding: 1mm 1.5mm;
		font-size: 9pt;
		border-color: #999999;
	}

	.mbn-now th,
	.mbn-now td,
	.mbn-times--month tbody th {
		background: none;
		position: static;
	}

	.mbn-hijri,
	.mbn-ampm {
		color: #000000;
	}

	.mbn a {
		color: #000000;
		text-decoration: none;
	}
}

/*
 * Phase V (V4): the pages a masjid's board reads (/for-masjids/, /pricing/, /about/ and the claim page), in a block of
 * their own after the rest: the hero's two buttons, the plan at a glance, the features, the steps, the plan and its price
 * tables, the questions and the ways to reach a person. Every size is the shared scale's; the dot before a feature's
 * heading is the kit's dot (Direction E).
 */
.mbn .mbn-actions--hero {
	margin-block-start: 1.25rem;
}

.mbn .mbn-hero a.mbn-button--light {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--mbn-band-strong);
}

.mbn .mbn-hero a.mbn-button--light:hover {
	background: #e2ecfa;
	border-color: #e2ecfa;
	color: var(--mbn-band-strong);
}

.mbn .mbn-hero a.mbn-button--quiet {
	margin-block-start: 0;
	background: rgb(255 255 255 / 14%);
	border-color: rgb(255 255 255 / 70%);
	color: #ffffff;
}

.mbn .mbn-hero a.mbn-button--quiet:hover {
	background: rgb(255 255 255 / 24%);
	color: #ffffff;
}

/* On the blue band the ring is white, so focus never blends into the band; the band's own color sits under its
   gradient, so a check that reads background colors sees the band too. */
.mbn-hero {
	background-color: var(--mbn-band);
}

.mbn-hero :focus-visible {
	outline-color: #ffffff;
}

.mbn-main .mbn-facts li,
.mbn-main .mbn-feature,
.mbn-main .mbn-steps > li,
.mbn-main .mbn-contact li {
	max-inline-size: none;
}

/* The plan at a glance: three numbers. */
.mbn-facts {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.mbn-facts li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: var(--mbn-accent-soft);
}

.mbn-fact__big {
	font-family: var(--mbn-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mbn-accent-strong);
}

.mbn-fact__small {
	color: var(--mbn-ink-soft);
}

.mbn .mbn-glance__more {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mbn-target-gap) 1.25rem;
	margin: 0.25rem 0 0;
	max-inline-size: none;
}

.mbn-glance__more a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	font-weight: 600;
}

/* What Blue does: a card each, two across on a wide screen. */
.mbn-features {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbn-feature {
	padding: 1.1rem var(--mbn-gutter) 0.5rem;
	background: var(--mbn-surface);
	border: 1px solid var(--mbn-line);
	border-radius: var(--mbn-radius);
	box-shadow: var(--mbn-shadow);
}

.mbn .mbn-feature h3 {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0 0 0.5rem;
	font-family: var(--mc-font-h3);
	font-size: 1.25rem;
	line-height: 1.25;
}

.mbn-feature h3::before {
	content: "";
	flex: none;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background: var(--mbn-accent);
}

.mbn-feature .mbn-list {
	list-style: disc;
}

.mbn-list--plain li::marker {
	color: var(--mbn-accent);
}

/* A list of what the plan includes, each with a drawn check. */
.mbn-list--checks {
	padding-inline-start: 0;
	list-style: none;
}

.mbn-list--checks li {
	position: relative;
	padding-inline-start: 1.9rem;
}

.mbn-list--checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2rem;
	inset-block-start: 0.4em;
	inline-size: 0.95rem;
	block-size: 0.5rem;
	border-inline-start: 3px solid var(--mbn-accent);
	border-block-end: 3px solid var(--mbn-accent);
	transform: rotate(-45deg);
}

/* Numbered steps. */
.mbn-steps {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mbn-step;
}

.mbn-steps > li {
	position: relative;
	padding: 1rem var(--mbn-gutter) 0.35rem calc(var(--mbn-gutter) + 2.75rem);
	background: var(--mbn-surface);
	border: 1px solid var(--mbn-line);
	border-radius: var(--mbn-radius);
	counter-increment: mbn-step;
}

.mbn-steps > li::before {
	content: counter(mbn-step);
	position: absolute;
	inset-inline-start: var(--mbn-gutter);
	inset-block-start: 0.95rem;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--mbn-accent);
	color: var(--mbn-on-accent);
	font-size: 1rem;
	font-weight: 700;
}

.mbn .mbn-steps h3 {
	margin: 0.2rem 0 0.35rem;
}

/* Questions and answers. */
.mbn-qa {
	border-block-start: 1px solid var(--mbn-line);
}

.mbn-qa:first-of-type {
	border-block-start: 0;
}

.mbn .mbn-qa h3 {
	margin-block: 0.9rem 0.35rem;
}

.mbn-cta .mbn-actions {
	margin-block: 0.5rem 0.25rem;
}

/* The plan and its prices. */
.mbn-card.mbn-plan {
	border: 2px solid var(--mbn-accent);
}

.mbn-plan__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.75rem;
	margin-block: 0.25rem 0.75rem;
}

.mbn .mbn-price {
	margin: 0;
	max-inline-size: none;
}

.mbn-price__amount {
	font-family: var(--mbn-display);
	font-size: clamp(2.5rem, 9vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--mbn-accent-strong);
}

.mbn-price--alt .mbn-price__amount {
	font-size: clamp(1.75rem, 6vw, 2rem);
	color: var(--mbn-ink);
}

.mbn-price__per {
	color: var(--mbn-ink-soft);
	font-weight: 600;
}

.mbn-prices {
	inline-size: auto;
	min-inline-size: 20rem;
}

/*
 * The comparison reads at 390 px without breaking a word (Wave 1 review, N3): fixed columns, half for what is
 * compared and a quarter for each answer, short one-word headers, and headers that wrap only between words (the
 * page's `overflow-wrap: anywhere` had split "Listed" into "Liste / d").
 */
.mbn-compare {
	table-layout: fixed;
}

.mbn-compare__what {
	width: 50%;
}

.mbn-compare__answer {
	width: 25%;
}

.mbn-compare th,
.mbn-compare td {
	white-space: normal;
}

.mbn-compare thead th {
	overflow-wrap: normal;
	hyphens: manual;
}

.mbn-compare td {
	font-weight: 600;
}

/* Ways to reach a person. */
.mbn-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbn-contact li {
	display: grid;
	gap: 0 1rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--mbn-line);
}

.mbn-contact li:last-child {
	border-block-end: 0;
}

.mbn-contact__what {
	font-weight: 700;
}

.mbn-contact a.mbn-contact__value {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-block-size: var(--mbn-target);
	font-weight: 600;
}

.mbn-contact__note {
	color: var(--mbn-muted);
}

@media (min-width: 40rem) {
	.mbn-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mbn-contact li {
		grid-template-columns: 11rem 1fr;
		align-items: baseline;
	}

	.mbn-contact__note {
		grid-column: 2;
	}
}

@media (min-width: 48rem) {
	.mbn-features,
	.mbn-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media print {
	.mbn .mbn-plan,
	.mbn .mbn-glance {
		display: block !important;
		border: 1px solid #999999;
		box-shadow: none;
	}

	.mbn-actions--hero,
	.mbn-cta {
		display: none !important;
	}

	.mbn-feature,
	.mbn-steps > li {
		box-shadow: none;
		break-inside: avoid;
	}
}

/*
 * Phase V Wave 2 (W-B; DESIGN-GAPS 2.4): a masjid's header. Its approved photo fills the band behind its words, or, with
 * no photo, the pattern (Network\Pattern: a trellis drawn tone on tone, a deeper shade of the band). The photo is
 * darkened by two layers: black at 58% at its lightest, which alone brings even a white photo down to a luminance of
 * 0.147 (white words read at 5.2:1), then the band's own color, itself dark enough for white words (Office\Brand), so
 * every pixel under the words stays at or below 0.183, the 4.5:1 line, whatever the photo. The pattern only ever
 * darkens. The masjid's logo, when it gave one, sits on a white tile above its name.
 */
.mbn-hero--masjid {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mbn-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* REVIEW-WAVE2 P2-19 (F-PR): the home page's band carries the family's sparse dot field at its right, in the band's own
   light ink, quiet behind the words (HomePage: hero_class and backdrop). */
.mbn-hero--field {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mbn-hero__field {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 62%;
	color: var(--mbn-on-band);
	opacity: 0.16;
}

.mbn-hero__backdrop .mbn-pattern,
.mbn-hero__photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mbn-hero__photo {
	max-inline-size: none;
	object-fit: cover;
	object-position: center 40%;
}

.mbn-hero--photo .mbn-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--mbn-band) 62%, transparent), color-mix(in srgb, var(--mbn-band) 18%, transparent) 75%),
		linear-gradient(180deg, rgb(0 0 0 / 58%), rgb(0 0 0 / 72%));
}

/* The photo shows above the words: a taller band, with the words at its foot. */
.mbn-hero--photo {
	padding-block-start: 5.5rem;
	background-color: #10151d;
}

.mbn-hero--photo .mbn-badge {
	background: rgb(0 0 0 / 35%);
}

.mbn-hero__logo {
	display: inline-block;
	margin: 0 0 var(--mc-space-3);
	padding: var(--mc-space-2);
	border-radius: var(--mc-radius-md, 12px);
	background: #ffffff;
	box-shadow: var(--mc-shadow-1);
	line-height: 0;
}

.mbn-hero__logo img {
	display: block;
	inline-size: auto;
	max-inline-size: 7rem;
	block-size: 2.75rem;
	object-fit: contain;
}

.mbn .mbn-hero__credit {
	margin: var(--mc-space-4) 0 0;
	color: #ffffff;
	font-size: var(--mbn-text-xs);
	text-align: end;
	max-inline-size: none;
}

@media (min-width: 48rem) {
	.mbn-hero--photo {
		padding-block-start: 8.5rem;
	}

	.mbn-hero__logo img {
		block-size: 3.5rem;
		max-inline-size: 9rem;
	}
}

@media print {
	.mbn-hero__backdrop,
	.mbn-hero__logo,
	.mbn-hero__credit {
		display: none !important;
	}

	.mbn-hero--photo {
		padding-block-start: 0;
		background: none;
	}
}

/*
 * Phase V Wave 2 (W-B; REVIEW-WAVE1 P2): the pages a board reads.
 *
 * /for-masjids/: the feature cards keep their own height (no card stretched to its row's tallest) and sit in balanced
 * columns, two from 48rem and three from 64rem, so the ninth card ("The Office") ends a column instead of standing alone
 * in a row. On a phone each card shows its heading and lead sentence, with the details behind "What it includes"; from
 * 48rem the details show open (ForMasjids::feature draws both, one shown at a time).
 */
.mbn-features {
	display: block;
	columns: 1;
	column-gap: 1rem;
}

.mbn-features > .mbn-feature {
	break-inside: avoid;
	margin-block-end: 1rem;
}

@media (min-width: 48rem) {
	.mbn-features {
		display: block;
		columns: 2;
	}
}

@media (min-width: 64rem) {
	.mbn-features {
		columns: 3;
	}
}

.mbn-feature__more {
	margin-block: 0 0.6rem;
}

.mbn-feature__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: var(--mbn-target);
	font-weight: 600;
	color: var(--mbn-accent-strong);
	cursor: pointer;
	list-style: none;
}

.mbn-feature__more > summary::-webkit-details-marker {
	display: none;
}

.mbn-feature__more > summary::after {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-inline-start: 0.2rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
}

.mbn-feature__more[open] > summary::after {
	transform: translateY(0.1rem) rotate(-135deg);
}

.mbn-feature__more > summary:hover {
	text-decoration: underline;
}

/* Once the cards sit in columns, the list shows open and the disclosure goes (one copy shows at a time). */
.mbn-feature__list {
	display: none;
}

@media (min-width: 48rem) {
	.mbn-feature__more {
		display: none;
	}

	.mbn-feature__list {
		display: block;
	}
}

/* The family's dot as the list marker (the motif, 1.4): the column's own list in place of the browser's disc. */
.mbn .mbn-list.mc-dot-list {
	padding-inline-start: 0;
	list-style: none;
}

.mbn .mbn-list.mc-dot-list > li::before {
	background: var(--mbn-accent);
}

/* The three-dot rule between a page's major parts. */
.mbn hr.mbn-rule {
	margin-block: var(--mc-space-6) var(--mc-space-8);
}

/*
 * /pricing/: the plan card in two columns inside the card from 48rem: the price, its words and the buttons at the start,
 * what the plan includes beside them, so the right of a wide card is never left blank.
 */
@media (min-width: 48rem) {
	.mbn-card.mbn-plan {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-areas:
			"head includes"
			"prices includes"
			"lead includes"
			"actions includes";
		grid-template-rows: auto auto auto 1fr;
		column-gap: 2.5rem;
	}

	.mbn-plan > h2 {
		grid-area: head;
	}

	.mbn-plan > .mbn-plan__prices {
		grid-area: prices;
	}

	.mbn-plan > .mbn-plan__lead {
		grid-area: lead;
	}

	.mbn-plan > .mbn-plan__includes {
		grid-area: includes;
		align-self: start;
		margin: 0;
		padding-inline-start: 2.5rem;
		border-inline-start: 1px solid var(--mbn-line);
	}

	.mbn-plan > .mbn-plan__actions {
		grid-area: actions;
		align-self: start;
	}
}

/* The masjid glyph stays beside "Find a masjid" on a phone (elders look for it); the account glyph joins from 30rem. */
.mbn-nav a:first-child .mc-icon {
	display: inline-block;
}

/* Phase V Wave 2 (4.7): the results' skeleton while "Use my location" works; the empty states' column. */
.mbn-near-wait {
	margin-block: var(--mc-space-3) 0;
}

.mbn-near-wait[hidden] {
	display: none;
}

.mbn .mbn-empty {
	max-inline-size: none;
	margin-block: var(--mc-space-2) var(--mc-space-4);
}

/* The 404's small drawing (Phase V Wave 2, 4.9): the family's "not found", in the accent, above the search. */
.mbn-404__art {
	margin-block: 0 var(--mc-space-4);
	color: var(--mbn-accent);
}

.mbn-404__drawing {
	display: block;
	inline-size: 6rem;
	block-size: 6rem;
}

/* /press/ (Phase V Wave 2, 3.5): the logos on their grounds, the colors as swatches, the two screenshots. */
.mbn-main .mbn-press__logos li,
.mbn-main .mbn-press__colors li {
	max-inline-size: none;
}

.mbn-press__logos {
	display: grid;
	gap: var(--mc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbn-press__logo {
	display: grid;
	gap: var(--mc-space-2);
	justify-items: start;
}

.mbn-press__logo a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mbn-target);
	font-weight: 600;
}

.mbn-press__tile {
	display: grid;
	place-items: center;
	inline-size: 100%;
	min-block-size: 8rem;
	padding: var(--mc-space-6);
	border: 1px solid var(--mbn-line);
	border-radius: var(--mbn-radius);
}

.mbn-press__tile--light {
	background: #ffffff;
}

.mbn-press__tile--dark {
	background: #0b2550;
}

.mbn-press__tile img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

.mbn-press__colors {
	display: grid;
	gap: var(--mc-space-3);
	margin: 0 0 var(--mc-space-3);
	padding: 0;
	list-style: none;
}

.mbn-press__color {
	display: flex;
	align-items: center;
	gap: var(--mc-space-3);
}

.mbn-press__swatch {
	flex: none;
	border-radius: 10px;
	outline: 1px solid var(--mbn-line);
}

.mbn-press__color code {
	color: var(--mbn-ink-soft);
}

.mbn-press__shots {
	display: grid;
	gap: var(--mc-space-6);
	align-items: start;
}

.mbn-press__shot {
	margin: 0;
}

.mbn-press__shot img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--mbn-line);
	border-radius: var(--mbn-radius);
}

.mbn-press__shot--tall img {
	max-inline-size: 20rem;
}

.mbn-press__shot figcaption {
	margin-block-start: var(--mc-space-2);
	color: var(--mbn-muted);
	font-size: var(--mbn-text-sm);
}

@media (min-width: 40rem) {
	.mbn-press__logos,
	.mbn-press__colors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.mbn-press__shots {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}
}

/*
 * The Wave 2 review (P2-4; DESIGN-GAPS 2.5 and 3.1): the product, shown. A masjid's page in the Muslim.Blue app in a
 * phone (a dark bezel drawn here around the real screen) on the home's "Run a masjid?" card and beside "Prayer times,
 * everywhere at once" on /for-masjids/, and the prayer-hall screen beside "Screens in your prayer hall". Each image has
 * its width and height, and loads lazily.
 */
.mbn-shot--phone {
	margin: var(--mc-space-4) auto 0;
	inline-size: 10rem;
	max-inline-size: 100%;
	text-align: center;
}

.mbn-shot--phone img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 0.375rem solid #10151d;
	border-radius: 1.5rem;
	background: #10151d;
	box-shadow: var(--mbn-shadow), 0 0 0 1px var(--mbn-line);
}

.mbn-shot--phone figcaption,
.mbn-shot--screen figcaption {
	margin-block-start: var(--mc-space-2);
	color: var(--mbn-muted);
	font-size: var(--mbn-text-sm);
}

.mbn-shot--screen {
	margin: var(--mc-space-4) 0 var(--mc-space-2);
}

.mbn-shot--screen img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 0.375rem solid #10151d;
	border-radius: var(--mc-radius-md, 12px);
	background: #10151d;
}

.mbn-feature__shot.mbn-shot--phone {
	margin-block-end: var(--mc-space-3);
	inline-size: 9rem;
}

@media (min-width: 48rem) {
	.mbn-card--shot {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 11rem;
		column-gap: var(--mc-space-6, 2rem);
		align-items: center;
	}

	.mbn-card--shot .mbn-card__shot {
		margin-block-start: 0;
		inline-size: 11rem;
	}
}