/* =========================================================
   Marby Master Styles
   Shared foundation for Marby plugins.
   Last Edit July 29, 2026
   ========================================================= */

/* =========================================================
   1) Design Tokens
   ========================================================= */

:root {
	--marby-color-black: #000000;
	--marby-color-white: #ffffff;
	--marby-color-ink: #111827;
	--marby-color-text: #333333;
	--marby-color-muted: #6b7280;
	--marby-color-soft: #f8fafc;
	--marby-color-panel: #ffffff;
	--marby-color-border: #dddddd;
	--marby-color-border-light: #e5e7eb;
	--marby-color-border-strong: #c9c9c9;
	--marby-color-disabled-border: #666666;
	--marby-color-disabled-text: #9ca3af;
	--marby-color-marby-blue: #70aadd;
	--marby-color-marby-blue-dark: #4b7ea8;
	--marby-color-marby-blue-hover: #95badb;
	--marby-color-tan: #ab9f8f;
	--marby-color-brown: #6f5d4f;
	--marby-color-light-tan: #f5f3f0;
	--marby-color-soft-blue: #eef6fc;
	--marby-color-soft-tan: #faf9f7;
	--marby-color-success: #047858;
	--marby-color-warning: #b45309;
	--marby-color-danger: #8a1f11;
	--marby-radius-xs: 4px;
	--marby-radius-sm: 6px;
	--marby-radius-md: 8px;
	--marby-radius-lg: 10px;
	--marby-radius-xl: 15px;
	--marby-radius-pill: 999px;
	--marby-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
	--marby-shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.18);
	--marby-font-body: "Roboto", Arial, Helvetica, sans-serif;
	--marby-font-heading: var(--marby-font-body);
	--marby-font-weight-light: 300;
	--marby-font-weight-regular: 400;
	--marby-font-weight-medium: 500;
	--marby-font-weight-semi-bold: 500;
	--marby-font-weight-bold: 700;
	--marby-letter-spacing-tight: -0.72px; /* about -0.045em) */
	--marby-letter-spacing-narrow: -0.56px; /* about -0.035em) */
	--marby-letter-spacing-none: 0px;
	--marby-letter-spacing-small: 0.5px; /* about 0.05em) */
	--marby-letter-spacing-medium: 1.2px; /* about 0.12em) */
	--marby-letter-spacing-large: 2px; /* about 0.20em) */
	--marby-padding-left-none: 0px;
	--marby-padding-left-small: 5px;
	--marby-padding-left-medium: 10px;
	--marby-padding-left-large: 20px;
	--marby-public-h1-size: clamp(36px, 5.5vw, 74px);
	--marby-public-h1-line-height: 1.03;
	--marby-public-h2-size: clamp(30px, 3.5vw, 52px);
	--marby-public-h2-line-height: 1.06;
	--marby-public-h3-size: clamp(22px, 2.4vw, 32px);
	--marby-public-h3-line-height: 1.2;
	--marby-public-h4-size: clamp(18px, 1.4vw, 24px);
	--marby-public-h4-font-weight: var(--marby-font-weight-bold);
	--marby-public-h4-line-height: 1.3;
	--marby-public-h5-size: 14px;
	--marby-public-h5-line-height: 1.4;
	--marby-public-h6-size: 14px;
	--marby-public-h6-line-height: 1.4;
	--marby-public-p-story-size: clamp(22px, 2.1vw, 28px);
	--marby-public-p-story-line-height: 1.35;
	--marby-public-p-body-large-size: 19px;
	--marby-public-p-body-large-line-height: 1.55;
	--marby-public-p-size: 16px;
	--marby-public-p-line-height: 1.9;
	--marby-public-p-small-size: 14px;
	--marby-public-p-small-line-height: 1.45;
	--marby-public-p-tiny-size: 11px;
	--marby-public-p-tiny-line-height: 1.1;
	--marby-transition-fast: 0.15s ease;
	--marby-page-width: 1280px;
	--marby-wide-page-width: 1400px;
	--marby-public-page-width: 1480px;
	--marby-reading-width: 760px;
	--marby-page-gutter: 100px;
	--marby-page-top-space: 0px;
	--marby-page-bottom-space-lg: 40px;
	--marby-page-bottom-space-sm: 20px;
	--marby-paragraph-spacing: 24px;
	--marby-heading-spacing-small: 24px;
	--marby-heading-spacing: 32px;
	--marby-heading-spacing-large: 42px;
}

/* Shared public and member page primitives. */
.marby-page-shell {
	box-sizing: border-box;
	left: 50%;
	width: calc(100vw - (2 * var(--marby-page-gutter)));
	max-width: none;
	margin: 0;
	padding: var(--marby-page-top-space) 0 var(--marby-page-bottom-space);
	position: relative;
	transform: translateX(-50%);
	color: var(--marby-color-black);
	font-family: var(--marby-font-body);
	font-weight: var(--marby-font-weight-light);
	line-height: 1.65;
}

.marby-full-bleed {
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	position: relative;
	transform: translateX(-50%);
}

/* A full-bleed stage may contain the shared page reading column without
 * applying the viewport-centering transform a second time. */
.marby-full-bleed > .marby-page-shell {
	left: auto;
	width: min(
		var(--marby-public-page-width),
		calc(100% - (2 * var(--marby-page-gutter)))
	);
	margin: 0 auto;
	transform: none;
}

.marby-full-bleed p {
	padding-bottom: var(--marby-paragraph-spacing) !important;
}
.marby-page-shell p {
	padding-bottom: 0px !important;
}

.marby-public-page .heading-space {
	padding-bottom: var(--marby-heading-spacing);
}

.marby-public-page .heading-space-small {
	padding-bottom: var(--marby-heading-spacing-small);
}

.marby-public-page .heading-space-large {
	padding-bottom: var(--marby-heading-spacing-large);
}

/* Shared public-page typography. Forms keep their independent type system. */
.marby-public-page h1,
.marby-public-page h2,
.marby-public-page h3,
.marby-public-page h4,
.marby-public-page h5,
.marby-public-page h6,
.marby-public-page p {
	padding-left: var(--marby-padding-left-medium);
	font-family: var(--marby-font-heading);
}

.marby-public-page p.marby-type-p-story,
.marby-public-page .marby-type-p-story > p {
	font-size: var(--marby-public-p-story-size);
	line-height: var(--marby-public-p-story-line-height);
}

.marby-public-page p.marby-type-p-body-large,
.marby-public-page .marby-type-p-body-large > p {
	font-size: var(--marby-public-p-body-large-size);
	line-height: var(--marby-public-p-body-large-line-height);
}

.marby-public-page p.marby-type-p-body,
.marby-public-page .marby-type-p-body > p {
	font-size: var(--marby-public-p-size);
	line-height: var(--marby-public-p-line-height);
}

.marby-public-page p.marby-type-p-small,
.marby-public-page .marby-type-p-small > p {
	font-size: var(--marby-public-p-small-size) !important;
	line-height: var(--marby-public-p-small-line-height) !important;
}

.marby-public-page p.marby-type-p-tiny,
.marby-public-page .marby-type-p-tiny > p {
	color: var(--marby-color-marby-blue) !important;
	font-size: var(--marby-public-p-tiny-size) !important;
	line-height: var(--marby-public-p-tiny-line-height) !important;
	text-transform: uppercase;
}

.marby-public-page h1 {
	font-size: var(--marby-public-h1-size) !important;
	font-weight: var(--marby-font-weight-light) !important;
	line-height: var(--marby-public-h1-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-tight) !important;
	color: var(--marby-color-black);
	margin: 0 0 8px 0 !important;
}

.marby-public-page h2 {
	font-size: var(--marby-public-h2-size) !important;
	font-weight: var(--marby-font-weight-light) !important;
	line-height: var(--marby-public-h2-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-narrow) !important;
	color: var(--marby-color-black);
	margin: 0 0 22px 0 !important;
}

.marby-public-page h3 {
	font-size: var(--marby-public-h3-size) !important;
	font-weight: var(--marby-font-weight-light) !important;
	line-height: var(--marby-public-h3-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-none) !important;
	color: var(--marby-color-text);
}

.marby-public-page h4 {
	font-size: var(--marby-public-h4-size) !important;
	font-weight: var(--marby-public-h4-font-weight) !important;
	line-height: var(--marby-public-h4-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-none) !important;
	text-transform: capitalize;
	color: var(--marby-color-text);
}

.marby-public-page h5 {
	font-size: var(--marby-public-h5-size) !important;
	font-weight: var(--marby-font-weight-bold) !important;
	line-height: var(--marby-public-h5-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-medium) !important;
	color: var(--marby-color-marby-blue) !important;
	text-transform: uppercase !important;
}

.marby-public-page h6 {
	font-size: var(--marby-public-h6-size) !important;
	font-weight: var(--marby-font-weight-regular) !important;
	line-height: var(--marby-public-h6-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-small) !important;
	color: var(--marby-color-muted) !important;
	margin-bottom: 7px !important;
	text-transform: none !important;
}

.marby-public-page p {
	font-size: var(--marby-public-p-size) !important;
	font-weight: var(--marby-font-weight-regular) !important;
	line-height: var(--marby-public-p-line-height) !important;
	letter-spacing: var(--marby-letter-spacing-none) !important;
	color: var(--marby-color-text);
}

.marby-public-page .bottom-spacer-large {
	padding-bottom: var(--marby-page-bottom-space-lg);
}

.marby-public-page .bottom-spacer-small {
	padding-bottom: var(--marby-page-bottom-space-sm);
}

/*
 * Public-page white text extension.
 * Apply .marby-public-page-text-white to a parent wrapper; headings and
 * paragraphs remain unclassed and continue to receive the shared type scale.
 */
.marby-public-page .marby-public-page-text-white h1,
.marby-public-page .marby-public-page-text-white h2,
.marby-public-page .marby-public-page-text-white h3,
.marby-public-page .marby-public-page-text-white h4,
.marby-public-page .marby-public-page-text-white h5,
.marby-public-page .marby-public-page-text-white h6,
.marby-public-page .marby-public-page-text-white p {
	color: var(--marby-color-white);
}

.marby-public-page .marby-public-page-text-blue p {
	color: var(--marby-color-marby-blue);
}

.marby-public-page strong,
.marby-type-weight-bold {
	font-weight: var(--marby-font-weight-bold);
}

.marby-type-weight-thin {
	font-weight: var(--marby-font-weight-light);
}

.marby-type-weight-normal {
	font-weight: var(--marby-font-weight-regular);
}

.marby-type-weight-semi-bold {
	font-weight: var(--marby-font-weight-semi-bold);
}

.marby-letter-spacing-tight {
	letter-spacing: var(--marby-letter-spacing-tight);
}

.marby-letter-spacing-none {
	letter-spacing: var(--marby-letter-spacing-none);
}

.marby-letter-spacing-small {
	letter-spacing: var(--marby-letter-spacing-small);
}

.marby-letter-spacing-medium {
	letter-spacing: var(--marby-letter-spacing-medium);
}

.marby-letter-spacing-large {
	letter-spacing: var(--marby-letter-spacing-large);
}

.marby-padding-left-none {
	padding-left: var(--marby-padding-left-none);
}

.marby-padding-left-small {
	padding-left: var(--marby-padding-left-small);
}

.marby-padding-left-medium {
	padding-left: var(--marby-padding-left-medium);
}

.marby-padding-left-large {
	padding-left: var(--marby-padding-left-large);
}

@media (max-width: 720px) {
	:root {
		--marby-public-h1-size: clamp(44px, 12vw, 58px);
		--marby-public-h2-size: clamp(36px, 10vw, 48px);
		--marby-public-h3-size: 28px;
		--marby-public-p-story-size: 24px;
		--marby-public-p-body-large-size: 18px;
	}
}

.marby-page-shell *,
.marby-page-shell *::before,
.marby-page-shell *::after {
	box-sizing: border-box;
}

.marby-eyebrow {
	display: inline-flex;
	width: max-content;
	padding: 10px 0px;
	border: 0; /*1px solid var(--marby-color-marby-blue);*/
	color: var(--marby-color-marby-blue) !important;
	font-size: var(--marby-public-h6-size);
	font-weight: var(--marby-font-weight-bold);
	line-height: var(--marby-public-h6-line-height);
	letter-spacing: var(--marby-letter-spacing-medium);
	text-transform: uppercase;
	border-radius: 0; /* var(--marby-radius-sm); */
	margin: 0px 0px 5px 0px;
	height: 40px;
}

/* Shared MAI identity badge for guided member-page panels. */
.mba-mai-badge {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin-bottom: 30px !important;
	border-radius: 50%;
	background: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
	font-size: 22px;
	font-weight: var(--marby-font-weight-bold) !important;
}

.subnav {
	padding: 8px 12px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: var(--marby-radius-pill);
	color: var(--marby-color-white);
	font-size: 13px;
	font-weight: var(--marby-font-weight-bold);
	white-space: nowrap;
	text-decoration: none;
}

.subnav:hover {
	background-color: var(--marby-color-marby-blue);
	color: var(--marby-color-white);
}

/* Eyebrow variants keep presentation consistent without page-specific copies. 
.marby-eyebrow--plain {
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
}

.marby-eyebrow--tan {
	border-color: var(--marby-color-tan) !important;
	color: var(--marby-color-tan) !important;
}

.marby-eyebrow--blue {
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}
*/

.marby-testimonial {
	color: var(--marby-color-black);
	font-size: var(--marby-public-p-body-large-size);
	font-weight: var(--marby-font-weight-regular);
	line-height: var(--marby-public-p-body-large-line-height);
}

/* override salient testimonial border */
.marby-testimonial .material blockquote::before {
	border-color: transparent !important;
}

.marby-surface {
	border: 1px solid var(--marby-color-border-light);
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
}

.marby-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 18px;
	border: 1px solid var(--marby-color-marby-blue) !important;
	border-radius: var(--marby-radius-xs) !important;
	background: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
	font-family: var(--marby-font-body);
	font-size: 16px;
	font-weight: var(--marby-font-weight-regular);
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition:
		background var(--marby-transition-fast),
		border-color var(--marby-transition-fast);
}

.marby-btn-primary:hover,
.marby-btn-primary:focus {
	border-color: var(--marby-color-marby-blue-hover) !important;
	background: var(--marby-color-marby-blue-hover) !important;
	color: var(--marby-color-white) !important;
}

/* Primary action variation for Marby blue, black, and other dark surfaces. */
.marby-btn-primary.marby-btn-primary-on-dark {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue-dark) !important;
}

.marby-btn-primary.marby-btn-primary-on-dark:hover,
.marby-btn-primary.marby-btn-primary-on-dark:focus,
.marby-btn-primary.marby-btn-primary-on-dark:focus-visible {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-marby-blue-hover) !important;
	color: var(--marby-color-white) !important;
}

/* Shared tan action pair for confirmation areas and light-on-tan navigation. */
.marby-btn-tan {
	border-color: var(--marby-color-tan) !important;
	background: var(--marby-color-tan) !important;
	color: var(--marby-color-white) !important;
}

.marby-btn-tan:hover,
.marby-btn-tan:focus {
	border-color: var(--marby-color-tan) !important;
	background: var(--marby-color-white) !important;
	color: var(--marby-color-tan) !important;
}

.marby-btn-tan-reverse {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-white) !important;
	color: var(--marby-color-tan) !important;
}

.marby-btn-tan-reverse:hover,
.marby-btn-tan-reverse:focus {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-tan) !important;
	color: var(--marby-color-white) !important;
}

.marby-page-shell a:focus-visible,
.marby-page-shell button:focus-visible {
	outline: 3px solid var(--marby-color-black);
	outline-offset: 3px;
}

/* =========================================================
   2) Base + Page Layout
   ========================================================= */

.marby-page,
.marby-planner,
.mc-calendar,
.marby-member-dashboard,
.mbs-root {
	width: min(100%, var(--marby-page-width));
	margin: 0 auto;
	font-family: var(--marby-font-body);
	color: var(--marby-color-ink);
}

.marby-page--wide,
.mbs-root,
.marby-member-admin {
	max-width: var(--marby-wide-page-width);
}

.marby-section,
.mp-section,
.mc-section,
.md-section {
	margin: 20px 0 0;
}

.marby-section-title,
.mp-section-title,
.mc-section-title {
	margin: 0 0 10px;
	font-weight: 700;
}

.marby-muted,
.md-muted,
.mp-help,
.mc-empty,
.mc-cal-empty {
	color: var(--marby-color-muted);
	font-size: 13px;
	line-height: 1.4;
}

.marby-required,
.mp-required {
	color: var(--marby-color-danger);
}

/* =========================================================
   3) Headers + Heroes
   ========================================================= */

.marby-header,
.mbs-header,
.md-section-head,
.mp-planner-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.marby-title,
.mbs-title {
	margin: 0 0 8px;
	font-family: var(--marby-font-heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--marby-color-ink);
}

.marby-subtitle,
.mbs-subtitle,
.md-section-note {
	margin: 0;
	color: var(--marby-color-text);
	font-size: 14px;
	line-height: 1.45;
}

.marby-hero,
.mp-page-header,
.marby-member-dashboard .md-hero {
	margin-bottom: 30px;
	padding: 30px;
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	text-align: center;
}

.marby-hero h1,
.mp-page-header h1,
.marby-member-dashboard .md-hero h1 {
	margin: 0 0 10px;
	font-family: var(--marby-font-heading);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--marby-color-white) !important;
}

.marby-hero p,
.marby-member-dashboard .md-hero p {
	max-width: 760px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 16px;
	line-height: 1.45;
}

/* =========================================================
   4) Panels + Cards
   ========================================================= */

.marby-panel,
.marby-card,
.mp-day-section,
.mp-media-panel,
.mp-social-panel,
.mp-media-upload-panel,
.md-panel,
.md-side .md-section,
.mbs-option-card {
	background: var(--marby-color-panel);
	border: 1px solid var(--marby-color-border);
	border-radius: var(--marby-radius-lg);
	padding: 20px;
}

.mp-tab-panel {
	background: var(--marby-color-panel);
	border: 0px solid var(--marby-color-border);
	border-radius: var(--marby-radius-lg);
	padding: 20px;
}

.marby-card,
.mp-media-grid__item,
.mp-media-thumb,
.md-post-row,
.md-analytics-row,
.md-register-plan {
	background: var(--marby-color-panel);
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-md);
}

.marby-divider,
.mp-divider hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin: 18px 0;
}

.marby-empty,
.md-empty,
.mp-media-empty,
.mc-empty,
.mc-cal-empty {
	padding: 18px;
	text-align: center;
	color: var(--marby-color-muted);
	font-size: 14px;
}

/* =========================================================
   5) Buttons + Links
   ========================================================= */

.marby-btn,
.mp-btn,
.mf-btn,
.md-btn,
.md-action-btn,
.mc-btn,
.ms-btn,
.mbs-text-btn,
.mbs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	max-width: 100%;
	min-height: 40px;
	margin: 20px 5px 10px 0;
	padding: 8px 12px;
	border: 1px solid var(--marby-color-marby-blue) !important;
	border-radius: var(--marby-radius-xs) !important;
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition:
		background var(--marby-transition-fast),
		border-color var(--marby-transition-fast),
		color var(--marby-transition-fast);
}

/* Compatibility until all legacy bold button classes use marby-btn. */
body .marby-button,
body .ins-btn-secondary {
	letter-spacing: 1px;
}

.marby-btn:hover,
.marby-btn:focus,
.marby-btn.is-active,
.marby-btn.active,
.marby-btn[aria-pressed="true"],
.marby-btn[aria-selected="true"],
.mp-btn:hover,
.mp-btn:focus,
.mp-btn.is-active,
.mp-btn.active,
.mp-btn[aria-pressed="true"],
.mp-btn[aria-selected="true"],
.mf-btn:hover,
.mf-btn:focus,
.mf-btn.is-active,
.mf-btn.active,
.mf-btn[aria-pressed="true"],
.mf-btn[aria-selected="true"],
.md-btn:hover,
.md-btn:focus,
.md-btn.is-active,
.md-btn.active,
.md-btn[aria-pressed="true"],
.md-btn[aria-selected="true"],
.md-action-btn:hover,
.md-action-btn:focus,
.md-action-btn.is-active,
.md-action-btn.active,
.md-action-btn[aria-pressed="true"],
.md-action-btn[aria-selected="true"],
.mc-btn:hover,
.mc-btn:focus,
.mc-btn.is-active,
.mc-btn.active,
.mc-btn[aria-pressed="true"],
.mc-btn[aria-selected="true"],
.ms-btn:hover,
.ms-btn:focus,
.ms-btn.is-active,
.ms-btn.active,
.ms-btn[aria-pressed="true"],
.ms-btn[aria-selected="true"],
.mbs-text-btn:hover,
.mbs-text-btn:focus,
.mbs-text-btn.is-active,
.mbs-text-btn.active,
.mbs-text-btn[aria-pressed="true"],
.mbs-text-btn[aria-selected="true"],
.mbs-button:hover,
.mbs-button:focus,
.mbs-button.is-active,
.mbs-button.active,
.mbs-button[aria-pressed="true"],
.mbs-button[aria-selected="true"] {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
	text-decoration: none !important;
}

.marby-btn-primary,
.mp-btn-primary,
.mf-btn-primary,
.md-btn-primary,
.md-action-btn-primary,
.mc-btn-primary,
.mc-btn.primary,
.ms-btn-primary,
.mbs-text-btn,
.mbs-button {
	font-size: 16px;
	font-weight: 400;
	padding: 10px 15px;
}

.marby-btn-secondary,
.mp-btn-secondary,
.mf-btn-secondary,
.md-btn-secondary,
.md-action-btn-secondary,
.mc-btn-secondary,
.ms-btn-secondary {
	font-size: 12px;
	font-weight: 400;
	padding: 8px 12px;
}

.marby-btn-rev,
.mp-btn-rev,
.mp-btn-primary-rev,
.mf-btn-rev,
.md-btn-rev,
.mc-btn-rev,
.ms-btn-rev {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

.marby-btn-rev:hover,
.marby-btn-rev:focus,
.mp-btn-rev:hover,
.mp-btn-rev:focus,
.mp-btn-primary-rev:hover,
.mp-btn-primary-rev:focus,
.mf-btn-rev:hover,
.mf-btn-rev:focus,
.md-btn-rev:hover,
.md-btn-rev:focus,
.mc-btn-rev:hover,
.mc-btn-rev:focus,
.ms-btn-rev:hover,
.ms-btn-rev:focus {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

.marby-btn:disabled,
.marby-btn.is-disabled,
.mp-btn:disabled,
.mp-btn.is-disabled,
.mp-tab-btn:disabled,
.mp-tab-btn.is-disabled,
.mp-subtab:disabled,
.mp-subtab.is-disabled,
.mp-media-mode-tab:disabled,
.mp-media-mode-tab.is-disabled,
.mf-btn:disabled,
.mf-btn.is-disabled,
.md-btn:disabled,
.md-btn.is-disabled,
.md-action-btn:disabled,
.md-action-btn.is-disabled,
.mc-btn:disabled,
.mc-btn.is-disabled,
.ms-btn:disabled,
.ms-btn.is-disabled,
.mbs-text-btn:disabled,
.mbs-text-btn.is-disabled,
.mbs-button:disabled,
.mbs-button.is-disabled,
button:disabled {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-disabled-border) !important;
	color: var(--marby-color-disabled-text) !important;
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

.marby-link,
.mp-link,
.mc-link,
.md-inline-link {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* =========================================================
   6) Forms + Fields
   ========================================================= */

.marby-field,
.mp-field,
.mc-modal-field,
.mp-modal .mp-form-group {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.marby-label,
.mp-label,
.mp-field label,
.mc-modal-field label,
.mp-modal .mp-label,
.md-login-form label span,
.marby-member-admin label span {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--marby-color-ink);
}

.marby-input,
.marby-select,
.marby-textarea,
.mp-input,
.mp-select,
select.mp-year,
select.mp-month,
select.mp-week,
.mp-input-textarea,
.mp-language-field,
.md-login-form input[type="text"],
.md-login-form input[type="password"],
.marby-member-admin input[type="text"],
.marby-member-admin input[type="number"],
.marby-member-admin select,
.marby-member-admin textarea,
.marby-q-input input[type="text"],
.marby-q-input textarea,
.marby-q-input select,
.mp-modal .mp-input,
.mp-modal input[type="text"],
.mp-modal input[type="url"],
.mp-modal input[type="email"],
.mp-modal input[type="search"],
.mp-modal textarea,
.mp-modal select,
.mc-modal-field input,
.mc-modal-field textarea,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.marby-reset-password-page input,
.marby-reset-password-page select,
.marby-reset-password-page textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 42px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--marby-color-border-strong) !important;
	border-radius: var(--marby-radius-sm);
	background: var(--marby-color-white) !important;
	box-shadow: none !important;
	color: var(--marby-color-marby-blue);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.35;
}

.marby-textarea,
.mp-input-textarea,
.mp-modal textarea,
.mc-modal-field textarea,
.marby-member-admin textarea,
.marby-q-input textarea {
	min-height: 90px;
	resize: none !important;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/*
 * Keep native resize handles out of the resting interface. Editable fields
 * regain vertical resizing when a user clicks or tabs into them.
 */
.marby-page-shell textarea,
.marby-page textarea,
.marby-planner textarea,
.mc-calendar textarea,
.marby-member-dashboard textarea,
.mbs-root textarea,
.marby-member-admin textarea,
.marby-form textarea,
.frm-business-profile-page textarea,
.frm-brand-persona-page textarea,
.frm-ideal-customer-page textarea,
.mp-modal textarea,
.mc-modal-field textarea,
.marby-ai__composer textarea,
.woocommerce-checkout textarea,
.marby-reset-password-page textarea,
textarea.marby-textarea,
textarea.mp-input-textarea {
	font-size: 16px !important;
	resize: none !important;
}

.marby-page-shell textarea:focus:not([readonly]),
.marby-page textarea:focus:not([readonly]),
.marby-planner textarea:focus:not([readonly]),
.mc-calendar textarea:focus:not([readonly]),
.marby-member-dashboard textarea:focus:not([readonly]),
.mbs-root textarea:focus:not([readonly]),
.marby-member-admin textarea:focus:not([readonly]),
.marby-form textarea:focus:not([readonly]),
.frm-business-profile-page textarea:focus:not([readonly]),
.frm-brand-persona-page textarea:focus:not([readonly]),
.frm-ideal-customer-page textarea:focus:not([readonly]),
.mp-modal textarea:focus:not([readonly]),
.mc-modal-field textarea:focus:not([readonly]),
.marby-ai__composer textarea:focus:not([readonly]),
.woocommerce-checkout textarea:focus:not([readonly]),
.marby-reset-password-page textarea:focus:not([readonly]),
textarea.marby-textarea:focus:not([readonly]),
textarea.mp-input-textarea:focus:not([readonly]) {
	resize: vertical !important;
}

/*
 * Shared textarea viewport sizes.
 *
 * The line-height unit keeps these utilities accurate if a page changes its
 * font or line-height. Pages with larger vertical padding can override the
 * extra-height custom property without redefining the shared sizes.
 */
.marby-textarea-extra-small,
.marby-textarea-xs {
	min-height: calc(2lh + var(--marby-textarea-extra-height, 20px)) !important;
}

.marby-textarea-small {
	min-height: calc(3lh + var(--marby-textarea-extra-height, 20px)) !important;
}

.marby-textarea-medium {
	min-height: calc(4lh + var(--marby-textarea-extra-height, 20px)) !important;
}

.marby-textarea-large {
	min-height: calc(6lh + var(--marby-textarea-extra-height, 20px)) !important;
}

.marby-textarea-extra-large,
.marby-textarea-xl {
	min-height: calc(10lh + var(--marby-textarea-extra-height, 20px)) !important;
}

.marby-input::placeholder,
.marby-textarea::placeholder,
.mp-input::placeholder,
.mp-input-textarea::placeholder,
.mp-modal input::placeholder,
.mp-modal textarea::placeholder {
	color: #b7ccde;
}

.marby-input:focus,
.marby-select:focus,
.marby-textarea:focus,
.mp-input:focus,
.mp-select:focus,
select.mp-year:focus,
select.mp-month:focus,
select.mp-week:focus,
.mp-input-textarea:focus,
.md-login-form input[type="text"]:focus,
.md-login-form input[type="password"]:focus,
.marby-member-admin input:focus,
.marby-member-admin select:focus,
.marby-member-admin textarea:focus,
.mp-modal input:focus,
.mp-modal textarea:focus,
.mp-modal select:focus,
.mc-modal-field input:focus,
.mc-modal-field textarea:focus {
	border-color: var(--marby-color-black) !important;
	outline: none;
	box-shadow: 0 0 0 1px var(--marby-color-black) !important;
}

/*
 * Shared inline textarea editor.
 *
 * Response content remains visually integrated with its parent panel until
 * the member hovers over or focuses the editable area.
 */
textarea.marby-editable-textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 17px 18px;
	border: 1px solid transparent !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--marby-color-black);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
}

textarea.marby-editable-textarea:hover,
textarea.marby-editable-textarea:focus {
	border-color: var(--marby-color-marby-blue-hover) !important;
	background: transparent !important;
	box-shadow: 0 0 0 1px var(--marby-color-marby-blue-hover) !important;
	outline: 0;
}

textarea.marby-editable-textarea--heading {
	font-size: 24px;
	font-weight: var(--marby-font-weight-semibold);
	line-height: 1.25;
}

.marby-input:disabled,
.marby-select:disabled,
.marby-textarea:disabled,
.mp-input:disabled,
.mp-select:disabled,
.marby-member-admin input:disabled,
.marby-member-admin select:disabled,
.marby-member-admin textarea:disabled {
	background: #f3f4f6 !important;
	color: var(--marby-color-muted);
	cursor: not-allowed;
}

/* Shared Forms input copy uses the subdued reading colour across every form. */
body .marby-form .marby-input,
body .marby-form input[type="text"],
body .marby-form input[type="url"],
body .marby-form select,
body .marby-form textarea {
	color: var(--marby-color-muted) !important;
}

/* =========================================================
   7) Tabs + Segmented Controls
   ========================================================= */

.marby-tabs,
.mp-tabs,
.mp-subtabs,
.mp-media-mode-tabs,
.md-month-tabs,
.marby-member-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.marby-tab,
.mp-tab-btn,
.mp-tab,
.mp-subtab,
.mp-media-mode-tab,
.md-month-tab,
.marby-member-tab {
	border: 1px solid var(--marby-color-marby-blue) !important;
	border-radius: var(--marby-radius-xs) !important;
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue) !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	padding: 15px 20px;
	text-align: center;
	text-transform: uppercase;
}

.marby-tab:hover,
.marby-tab:focus,
.marby-tab.is-active,
.marby-tab.active,
.marby-tab[aria-selected="true"],
.mp-tab-btn:hover,
.mp-tab-btn:focus,
.mp-tab-btn.is-active,
.mp-tab-btn.active,
.mp-tab-btn[aria-selected="true"],
.mp-tab:hover,
.mp-tab:focus,
.mp-tab.is-active,
.mp-tab.active,
.mp-tab[aria-selected="true"],
.mp-subtab:hover,
.mp-subtab:focus,
.mp-subtab.is-active,
.mp-subtab.active,
.mp-subtab[aria-selected="true"],
.mp-media-mode-tab.is-active,
.mp-media-mode-tab.active,
.mp-media-mode-tab[aria-selected="true"],
.md-month-tab:hover,
.md-month-tab:focus,
.md-month-tab.is-active,
.md-month-tab.active,
.md-month-tab[aria-selected="true"],
.marby-member-tab:hover,
.marby-member-tab:focus,
.marby-member-tab.is-active,
.marby-member-tab.active,
.marby-member-tab[aria-selected="true"] {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

/* =========================================================
   8) Notices + Status
   ========================================================= */

.marby-notice,
.md-notice,
.marby-member-dashboard--auth,
.marby-member-dashboard--error,
.marby-message {
	margin: 12px 0 28px;
	padding: 14px 16px;
	border: 1px solid var(--marby-color-border);
	border-left: 4px solid var(--marby-color-black);
	border-radius: var(--marby-radius-md);
	background: var(--marby-color-white);
	color: var(--marby-color-ink);
}

.marby-notice-success,
.md-notice-success,
.marby-message.success {
	border-left-color: var(--marby-color-success);
}

.marby-notice-warning,
.md-notice-warning,
.md-suspension-notice {
	border-left-color: var(--marby-color-warning);
}

.marby-notice-error,
.md-notice-error,
.marby-message.error {
	border-left-color: var(--marby-color-danger);
}

.marby-status,
.md-status,
.mbs-selected-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 5px 8px;
	border-radius: var(--marby-radius-pill);
	background: #f3f3f3;
	color: #555555;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
}

/* =========================================================
   9) Marby Blue Accents
   ========================================================= */

.marby-blue,
.marby-accent {
	color: var(--marby-color-marby-blue);
}

.marby-accent-border,
.marby-accent-bracket,
.md-advice-item,
.md-attention-item {
	border-left-color: var(--marby-color-marby-blue);
}

.marby-accent-bracket {
	border-left-width: 4px;
	border-left-style: solid;
	padding-left: 12px;
}

.marby-blue-swatch {
	background: var(--marby-color-marby-blue);
}

/* =========================================================
   Authoritative Interactive Colour Enforcement
   Keeps legacy/optimized plugin rules from restoring black
   button colours after the shared design system loads.
   ========================================================= */

body .marby-btn[class~="marby-btn"],
body .mp-btn[class~="mp-btn"],
body .mf-btn[class~="mf-btn"],
body .md-btn[class~="md-btn"],
body .md-action-btn[class~="md-action-btn"],
body .mc-btn[class~="mc-btn"],
body .ms-btn[class~="ms-btn"],
body .mbs-text-btn[class~="mbs-text-btn"],
body .mbs-button[class~="mbs-button"] {
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

body .marby-btn[class~="marby-btn"]:hover,
body .marby-btn[class~="marby-btn"]:focus,
body .marby-btn[class~="marby-btn"].active,
body .marby-btn[class~="marby-btn"].is-active,
body .marby-btn[class~="marby-btn"][aria-pressed="true"],
body .marby-btn[class~="marby-btn"][aria-selected="true"],
body .mp-btn[class~="mp-btn"]:hover,
body .mp-btn[class~="mp-btn"]:focus,
body .mp-btn[class~="mp-btn"].active,
body .mp-btn[class~="mp-btn"].is-active,
body .mp-btn[class~="mp-btn"][aria-pressed="true"],
body .mp-btn[class~="mp-btn"][aria-selected="true"],
body .mf-btn[class~="mf-btn"]:hover,
body .mf-btn[class~="mf-btn"]:focus,
body .mf-btn[class~="mf-btn"].active,
body .mf-btn[class~="mf-btn"].is-active,
body .mf-btn[class~="mf-btn"][aria-pressed="true"],
body .mf-btn[class~="mf-btn"][aria-selected="true"],
body .md-btn[class~="md-btn"]:hover,
body .md-btn[class~="md-btn"]:focus,
body .md-btn[class~="md-btn"].active,
body .md-btn[class~="md-btn"].is-active,
body .md-btn[class~="md-btn"][aria-pressed="true"],
body .md-btn[class~="md-btn"][aria-selected="true"],
body .md-action-btn[class~="md-action-btn"]:hover,
body .md-action-btn[class~="md-action-btn"]:focus,
body .md-action-btn[class~="md-action-btn"].active,
body .md-action-btn[class~="md-action-btn"].is-active,
body .md-action-btn[class~="md-action-btn"][aria-pressed="true"],
body .md-action-btn[class~="md-action-btn"][aria-selected="true"],
body .mc-btn[class~="mc-btn"]:hover,
body .mc-btn[class~="mc-btn"]:focus,
body .mc-btn[class~="mc-btn"].active,
body .mc-btn[class~="mc-btn"].is-active,
body .mc-btn[class~="mc-btn"][aria-pressed="true"],
body .mc-btn[class~="mc-btn"][aria-selected="true"],
body .ms-btn[class~="ms-btn"]:hover,
body .ms-btn[class~="ms-btn"]:focus,
body .ms-btn[class~="ms-btn"].active,
body .ms-btn[class~="ms-btn"].is-active,
body .ms-btn[class~="ms-btn"][aria-pressed="true"],
body .ms-btn[class~="ms-btn"][aria-selected="true"],
body .mbs-text-btn[class~="mbs-text-btn"]:hover,
body .mbs-text-btn[class~="mbs-text-btn"]:focus,
body .mbs-button[class~="mbs-button"]:hover,
body .mbs-button[class~="mbs-button"]:focus {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue);
	color: var(--marby-color-white) !important;
}

body .marby-btn[class~="marby-btn"]:disabled,
body .marby-btn[class~="marby-btn"].is-disabled,
body .mp-btn[class~="mp-btn"]:disabled,
body .mp-btn[class~="mp-btn"].is-disabled,
body .mf-btn[class~="mf-btn"]:disabled,
body .mf-btn[class~="mf-btn"].is-disabled,
body .md-btn[class~="md-btn"]:disabled,
body .md-btn[class~="md-btn"].is-disabled,
body .md-action-btn[class~="md-action-btn"]:disabled,
body .md-action-btn[class~="md-action-btn"].is-disabled,
body .mc-btn[class~="mc-btn"]:disabled,
body .mc-btn[class~="mc-btn"].is-disabled,
body .ms-btn[class~="ms-btn"]:disabled,
body .ms-btn[class~="ms-btn"].is-disabled,
body .mbs-text-btn[class~="mbs-text-btn"]:disabled,
body .mbs-text-btn[class~="mbs-text-btn"].is-disabled,
body .mbs-button[class~="mbs-button"]:disabled,
body .mbs-button[class~="mbs-button"].is-disabled {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-disabled-border) !important;
	color: var(--marby-color-disabled-text) !important;
}

/* Shared Forms action states. */
body .marby-form .marby-q-actions .ask-mai-btn {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

body .marby-form .marby-q-actions .ask-mai-btn:hover,
body .marby-form .marby-q-actions .ask-mai-btn:focus {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

body .marby-form .marby-q-actions .save-mai-btn {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

body .marby-form .marby-q-actions .save-mai-btn:hover,
body .marby-form .marby-q-actions .save-mai-btn:focus {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-white) !important;
	color: var(--marby-color-white) !important;
}

body .marby-form .marby-q-actions .page-nav-btn {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-white) !important;
	color: var(--marby-color-white) !important;
}

body .marby-form .marby-q-actions .page-nav-btn:hover,
body .marby-form .marby-q-actions .page-nav-btn:focus {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

/* Shared Forms save panel. */
body .marby-form .marby-save-actions {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-areas:
		"copy save"
		"back next"
		"status status";
	gap: 18px 24px;
	align-items: center;
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 38px var(--marby-page-gutter);
	border: 0;
	border-radius: 0;
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

body .marby-form .marby-save-actions p,
body .marby-form .marby-save-actions .save-status {
	color: var(--marby-color-white);
}

body .marby-form .marby-save-actions h1,
body .marby-form .marby-save-actions h2,
body .marby-form .marby-save-actions h3,
body .marby-form .marby-save-actions h4,
body .marby-form .marby-save-actions h5,
body .marby-form .marby-save-actions h6 {
	color: var(--marby-color-white);
}

body .marby-form .marby-save-actions .marby-eyebrow {
	color: var(--marby-color-marby-blue);
}

body .marby-form .marby-save-actions .marby-forms-save-actions-copy {
	grid-area: copy;
}

body .marby-form .marby-save-actions .marby-forms-save-controls {
	display: contents;
}

body .marby-form .marby-save-actions .save-mai-btn {
	grid-area: save;
	justify-self: end;
	width: 300px;
	min-width: 0;
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

body .marby-form .marby-save-actions .save-mai-btn:hover,
body .marby-form .marby-save-actions .save-mai-btn:focus-visible {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

body .marby-form .marby-save-actions .page-nav-btn.is-previous {
	grid-area: back;
	justify-self: start;
	width: 300px;
	min-width: 0;
	margin-top: 40px;
}

body .marby-form .marby-save-actions .page-nav-btn.is-next {
	grid-area: next;
	justify-self: end;
	width: 300px;
	min-width: 0;
	margin-top: 40px;
}

body .marby-form .marby-save-actions .page-nav-btn {
	background: var(--marby-color-white) !important;
	background-color: var(--marby-color-white) !important;
	border-color: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-marby-blue) !important;
}

body .marby-form .marby-save-actions .page-nav-btn:hover,
body .marby-form .marby-save-actions .page-nav-btn:focus-visible {
	background: var(--marby-color-marby-blue) !important;
	background-color: var(--marby-color-marby-blue) !important;
	border-color: var(--marby-color-white) !important;
	color: var(--marby-color-white) !important;
}

body .marby-form .marby-save-actions .save-status {
	grid-area: status;
	width: 100%;
	margin: 0;
}

@media (max-width: 700px) {
	body .marby-form .marby-save-actions {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"save"
			"back"
			"next"
			"status";
	}

	body .marby-form .marby-save-actions .save-mai-btn,
	body .marby-form .marby-save-actions .page-nav-btn.is-previous,
	body .marby-form .marby-save-actions .page-nav-btn.is-next {
		justify-self: stretch;
		width: 100%;
	}
}

/* =========================================================
   10) Modals + Lightboxes
   ========================================================= */

.marby-modal-overlay,
.mp-modal-overlay,
.mc-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 42, 0.48);
}

.marby-modal,
.mp-modal,
.mc-modal {
	position: relative;
	width: 100%;
	max-width: 560px;
	padding: 24px 24px 20px;
	border: 1px solid var(--marby-color-border-light);
	border-radius: 18px;
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-modal);
}

.marby-modal-title,
.mp-modal-title,
.mc-modal-title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--marby-color-ink);
}

.marby-modal-body,
.mp-modal-body,
.mc-modal-body {
	margin: 0 0 18px;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.65;
}

.marby-modal-actions,
.mp-modal-actions,
.mc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #f1f5f9;
}

/* =========================================================
   11) Media + Uploads
   ========================================================= */

.marby-dropzone,
.marby-image-dropzone,
.mp-media-upload-dropzone {
	padding: 8px 12px; /*24px;*/
	border: 1px dashed var(--marby-color-border-strong);
	border-radius: var(--marby-radius-lg);
	background: var(--marby-color-white);
	text-align: center;
	cursor: pointer;
	transition:
		background var(--marby-transition-fast),
		border-color var(--marby-transition-fast);
}

.marby-dropzone:hover,
.marby-dropzone.is-dragover,
.marby-image-dropzone:hover,
.marby-image-dropzone.is-dragover,
.mp-media-upload-dropzone:hover {
	background: #f7f7f7;
	border-color: var(--marby-color-black);
}

.marby-thumb,
.mp-media-thumb,
.marby-upload-preview,
.marby-image-upload-preview-item {
	position: relative;
	overflow: hidden;
	background: var(--marby-color-white);
	border: 1px solid var(--marby-color-border-light);
	border-radius: var(--marby-radius-md);
}

.marby-thumb img,
.mp-media-thumb img,
.marby-upload-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   12) Responsive
   ========================================================= */

@media (max-width: 900px) {
	:root {
		--marby-page-gutter: 32px;
	}

	.marby-header,
	.mbs-header,
	.md-section-head,
	.mp-planner-header {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 640px) {
	:root {
		--marby-page-gutter: 16px;
		--marby-page-top-space: 0px;
	}

	.marby-page,
	.marby-planner,
	.mc-calendar,
	.marby-member-dashboard {
		width: 100%;
		padding-right: 14px;
		padding-left: 14px;
	}

	.marby-hero,
	.mp-page-header,
	.marby-member-dashboard .md-hero {
		padding: 22px 16px;
	}

	.marby-hero h1,
	.mp-page-header h1,
	.marby-member-dashboard .md-hero h1 {
		font-size: 1.8rem;
	}

	.marby-tabs,
	.mp-tabs,
	.mp-subtabs,
	.mp-media-mode-tabs {
		flex-direction: column;
	}

	.marby-tab,
	.mp-tab-btn,
	.mp-subtab,
	.marby-btn,
	.mp-btn,
	.mf-btn,
	.md-btn,
	.mc-btn {
		width: 100%;
		margin: 0;
	}

	.marby-modal-overlay,
	.mp-modal-overlay,
	.mc-modal-overlay {
		align-items: flex-end;
		padding: 16px;
	}

	.marby-modal,
	.mp-modal,
	.mc-modal {
		max-width: none;
		border-radius: 16px 16px 0 0;
	}
}

/* =========================================================
   11) Shared Forms Page Composition
   ========================================================= */

body.marby-forms-page .marby-forms-page-header {
	position: relative;
	display: grid;
	width: 100vw;
	min-height: 160px;
	align-items: center;
	margin-right: 0;
	margin-left: 0;
	padding: 0 var(--marby-page-gutter) 30px;
	overflow: hidden;
	background: linear-gradient(
		180deg,
		var(--marby-color-white) 0%,
		var(--marby-color-white) 72%,
		var(--marby-color-soft-tan) 100%
	);
	left: 50%;
	transform: translateX(-50%);
}

body.marby-forms-page .marby-forms-page-header > div {
	position: relative;
	z-index: 2;
	width: min(1480px, 100%);
	max-width: 1480px;
	margin: 0 auto;
	padding-right: 240px;
} /* Superseded: .marby-public-page owns heading and paragraph presentation.


body.marby-forms-page .marby-forms-page-header h1 {
	margin: 0 0 8px;
	font-size: clamp(44px, 5.5vw, 74px);
	font-weight: var(--marby-font-weight-light);
	line-height: 1.03;
	letter-spacing: -0.045em;
}
*/ /* Superseded: .marby-public-page owns heading and paragraph presentation.


body.marby-forms-page .marby-forms-page-header p {
	max-width: 1180px;
	margin: 0;
	color: var(--marby-color-black);
	font-size: var(--marby-public-p-size);
	font-weight: var(--marby-font-weight-medium);
}
*/

body.marby-forms-page .marby-forms-page-header::before {
	position: absolute;
	top: 50%;
	right: var(--marby-page-gutter);
	width: 220px;
	height: 130px;
	background: radial-gradient(
			circle,
			var(--marby-color-marby-blue) 1.1px,
			transparent 1.4px
		)
		54px 10px / 14px 14px no-repeat;
	content: "";
	opacity: 0.4;
	transform: translateY(-50%);
}

body.marby-forms-page .marby-forms-page-header::after {
	position: absolute;
	top: 50%;
	right: var(--marby-page-gutter);
	width: 130px;
	height: 130px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: 50%;
	box-shadow: 0 0 0 22px var(--marby-color-soft-blue);
	content: "";
	opacity: 0.5;
	transform: translateY(-50%);
}

body.marby-forms-page .marby-forms-question-header {
	position: relative;
	width: 100vw;
	margin-right: 0;
	margin-left: 0;
	padding: 72px var(--marby-page-gutter);
	overflow: hidden;
	background: var(--marby-color-black);
	color: var(--marby-color-white);
	left: 50%;
	transform: translateX(-50%);
}

body.marby-forms-page .marby-forms-question-header::before {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		var(--marby-color-white) 0.8px,
		transparent 0.8px
	);
	background-size: 28px 28px;
	content: "";
	opacity: 0.18;
}

body.marby-forms-page .marby-forms-question-header::after {
	position: absolute;
	top: 50%;
	left: -130px;
	width: 280px;
	height: 280px;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: 50%;
	box-shadow: 0 0 0 36px var(--marby-color-soft-blue);
	content: "";
	opacity: 0.35;
	transform: translateY(-50%);
}

body.marby-forms-page .marby-forms-question-header > div {
	position: relative;
	z-index: 1;
	display: grid;
	width: min(1480px, 100%);
	grid-template-columns: 1.25fr 0.75fr;
	gap: 50px;
	align-items: center;
	margin: 0 auto;
}

body.marby-forms-page .marby-forms-question-header .marby-eyebrow,
body.marby-forms-page .marby-forms-ai-actions-copy .marby-eyebrow {
	color: var(--marby-color-marby-blue);
} /* Superseded: .marby-public-page owns heading and paragraph presentation.


body.marby-forms-page .marby-forms-question-header h2 {
	margin: 0 0 22px;
	color: var(--marby-color-white);
	font-size: clamp(36px, 4.4vw, 58px);
	font-weight: var(--marby-font-weight-light);
	line-height: 1.06;
	letter-spacing: -0.035em;
}
*/ /* Superseded: .marby-public-page owns heading and paragraph presentation.


body.marby-forms-page .marby-forms-question-header p {
	max-width: 920px;
	margin: 0;
	color: var(--marby-color-white);
	font-size: 19px;
	opacity: 0.78;
}
*/

/* Shared question-header copy treatment. Typography remains governed by the public-page scale. */
body.marby-forms-page .marby-forms-question-header h1,
body.marby-forms-page .marby-forms-question-header h2,
body.marby-forms-page .marby-forms-question-header h3,
body.marby-forms-page .marby-forms-question-header h4,
body.marby-forms-page .marby-forms-question-header h5,
body.marby-forms-page .marby-forms-question-header h6,
body.marby-forms-page .marby-forms-question-header p {
	color: var(--marby-color-white);
}

body.marby-forms-page .marby-forms-question-header .marby-eyebrow {
	color: var(--marby-color-marby-blue);
}

body.marby-forms-page .marby-forms-question-intro {
	box-sizing: border-box;
	width: min(1480px, calc(100% - (2 * var(--marby-page-gutter))));
	margin: 0 auto;
	padding: 78px var(--marby-page-gutter) 34px;
	background: transparent;
}

body.marby-forms-page .marby-forms-question-intro > div {
	position: relative;
	min-width: 0;
} /* Superseded: .marby-public-page owns heading and paragraph presentation.

body.marby-forms-page .marby-forms-question-intro h2 {
	margin: 0 0 6px;
	font-size: clamp(30px, 3.5vw, 48px);
	font-weight: var(--marby-font-weight-light);
	line-height: 1.1;
	letter-spacing: -0.035em;
}
*/ /* Superseded: .marby-public-page owns heading and paragraph presentation.


body.marby-forms-page .marby-forms-question-intro p {
	margin: 0;
	color: var(--marby-color-black);
	font-size: var(--marby-public-p-size);
	font-weight: var(--marby-font-weight-regular);
}
*/

body.marby-forms-page .marby-forms-question-intro-number {
	position: absolute;
	top: 0;
	left: -92px;
	display: grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border: 1px solid var(--marby-color-marby-blue);
	border-radius: 50%;
	background: var(--marby-color-white);
	box-shadow: var(--marby-shadow-soft);
	color: var(--marby-color-marby-blue);
	font-size: 24px;
	font-weight: var(--marby-font-weight-bold);
}

body.marby-forms-page .marby-form .marby-ai-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	width: min(1480px, calc(100% - (2 * var(--marby-page-gutter))));
	margin: 0 auto 78px;
	padding: 30px;
	border-radius: var(--marby-radius-xl);
	background: var(--marby-color-black);
	color: var(--marby-color-white);
}

/* Shared Ask MAI copy treatment. Typography remains governed by the public-page scale. */
body.marby-forms-page .marby-form .marby-ai-actions h1,
body.marby-forms-page .marby-form .marby-ai-actions h2,
body.marby-forms-page .marby-form .marby-ai-actions h3,
body.marby-forms-page .marby-form .marby-ai-actions h4,
body.marby-forms-page .marby-form .marby-ai-actions h5,
body.marby-forms-page .marby-form .marby-ai-actions h6,
body.marby-forms-page .marby-form .marby-ai-actions p {
	color: var(--marby-color-white);
}

body.marby-forms-page .marby-form .marby-ai-actions .marby-eyebrow {
	color: var(--marby-color-marby-blue);
}

body.marby-forms-page .marby-form .marby-ai-actions .ask-mai-btn {
	border-color: var(--marby-color-marby-blue) !important;
	background: var(--marby-color-marby-blue) !important;
	color: var(--marby-color-white) !important;
}

body.marby-forms-page .marby-form .marby-ai-actions .ask-mai-btn:hover,
body.marby-forms-page .marby-form .marby-ai-actions .ask-mai-btn:focus-visible {
	border-color: var(--marby-color-white) !important;
	background: var(--marby-color-white) !important;
	color: var(--marby-color-marby-blue-dark) !important;
	outline: 0;
}

/* Shared Forms question-card title typography. Page styles retain only their unique card composition. */
body.marby-forms-page .marby-forms-question-card-heading h4 {
	margin: 0;
	font-size: var(--marby-public-h4-size);
	font-weight: var(--marby-public-h4-font-weight);
	line-height: var(--marby-public-h4-line-height);
}

@media (max-width: 900px) {
	body.marby-forms-page .marby-forms-page-header > div {
		padding-right: 0;
	}

	body.marby-forms-page .marby-forms-question-header > div,
	body.marby-forms-page .marby-form .marby-ai-actions {
		grid-template-columns: 1fr;
	}

	body.marby-forms-page .marby-form .marby-ai-actions .ask-mai-btn {
		width: 100%;
	}
}

@media (max-width: 640px) {
	body.marby-forms-page .marby-forms-page-header,
	body.marby-forms-page .marby-forms-question-header {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.marby-forms-page .marby-forms-question-intro {
		padding: 56px 20px 34px;
	}

	body.marby-forms-page .marby-forms-question-intro-number {
		position: static;
		margin-bottom: 14px;
	}
}