.msa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--msa-slate-600);
	margin-bottom: 14px;
}

.msa-problem .msa-eyebrow {
	color: #e11d48;
}

.msa-product .msa-eyebrow {
	color: #059669;
}

.msa-pricing .msa-eyebrow {
	color: #059669;
}

.msa-how .msa-eyebrow {
	color: #4f46e5;
}

.msa-faq .msa-eyebrow {
	color: #4f46e5;
}

.msa-demo .msa-eyebrow {
	color: #0891b2;
}

.msa-trust .msa-eyebrow {
	color: #d97706;
}

.msa-eyebrow--cyan {
	color: #0e7490;
	background: var(--msa-cyan-surface);
	border: 1px solid #a5f3fc;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: normal;
	text-transform: none;
}

.msa-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--msa-cyan);
}

.msa-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--msa-slate-600);
	max-width: 52ch;
	margin-top: 16px;
}

.msa-btn--lg {
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	padding: 13px 24px;
	border-radius: var(--msa-radius-lg);
}

.msa-btn--lg.msa-btn--primary {
	border: none;
}

.msa-btn--lg.msa-btn--secondary {
	padding: 13px 20px;
}

.msa-hero {
	border-bottom: 1px solid var(--msa-slate-200);
	background: #fff;
}

.msa-hero__grid {
	/* Keep --msa-pad-x; 80px 0 96px would zero .msa-container horizontal pad. */
	padding: 80px var(--msa-pad-x) 96px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}

.msa-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* ZIP @1440: flex gap owns spacing; body lh 1.5 inflated eyebrow/ticks. */
.msa-hero .msa-eyebrow {
	margin-bottom: 0;
	line-height: normal;
}

.msa-hero .msa-lead {
	margin-top: 0;
}

.msa-hero .msa-trust-ticks {
	line-height: normal;
}

.msa-hero h1 {
	font-size: 52px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.msa-hero__ctas {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.msa-trust-ticks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	font-size: 13px;
	color: var(--msa-slate-500);
	font-weight: 500;
}

.msa-trust-ticks span {
	color: var(--msa-emerald);
	font-weight: 700;
	margin-right: 6px;
}

.msa-problem,
.msa-product,
.msa-how,
.msa-demo,
.msa-pricing,
.msa-trust,
.msa-faq {
	border-bottom: 1px solid var(--msa-slate-200);
}

.msa-problem {
	padding: 88px 0;
	background: var(--msa-slate-50);
}

.msa-trust {
	padding: 88px 0;
	background: #fff;
}

.msa-product {
	padding: 96px 0;
	background: #fff;
}

.msa-how {
	padding: 96px 0;
	background: var(--msa-slate-50);
}

.msa-demo {
	padding: 96px 0;
	background: #fff;
}

.msa-pricing {
	padding: 96px 0;
	background: var(--msa-slate-50);
}

.msa-faq {
	padding: 96px 0;
	background: var(--msa-slate-50);
}

.msa-problem h2,
.msa-product h2,
.msa-how h2,
.msa-demo h2,
.msa-pricing h2,
.msa-trust h2,
.msa-faq h2 {
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ZIP Product/How/Demo: intro max-width 640 + margin-bottom 48. */
.msa-section__intro {
	max-width: 640px;
	margin-bottom: 48px;
}

.msa-section__intro .msa-eyebrow {
	display: block;
	line-height: normal;
	margin-bottom: 14px;
}

.msa-section__intro h2 {
	max-width: none;
	margin-bottom: 14px;
}

.msa-section__intro .msa-lead {
	margin: 0;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.6;
}

.msa-final h2 {
	font-size: 38px;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.msa-problem__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: start;
}

.msa-problem__copy h2 {
	max-width: none;
}

.msa-problem__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
	max-width: 68ch;
}

.msa-problem__list li {
	padding-left: 28px;
	position: relative;
	color: var(--msa-slate-600);
	font-size: 16px;
	line-height: 1.55;
}

.msa-problem__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--msa-rose);
}

.msa-product__grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.msa-product-card {
	border: 1px solid var(--msa-slate-200);
	border-radius: var(--msa-radius-xl);
	padding: 24px;
	background: #f8fafc;
}

.msa-product-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* ZIP: 36 content-box + 1px border = 38 outer; theme border-box needs 38. */
	width: 38px;
	height: 38px;
	border-radius: 9px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}

.msa-product-card__icon--answers {
	background: #ecfdf5;
	border-color: #a7f3d0;
}

.msa-product-card__icon--answers .msa-product-card__glyph {
	width: 12px;
	height: 12px;
	background: #059669;
	transform: rotate(45deg);
	border-radius: 2px;
}

.msa-product-card__icon--policies {
	background: #ecfeff;
	border-color: #a5f3fc;
	flex-direction: column;
	gap: 3px;
}

.msa-product-card__icon--policies .msa-product-card__glyph,
.msa-product-card__icon--policies::before,
.msa-product-card__icon--policies::after {
	content: "";
	display: block;
	width: 14px;
	height: 2.5px;
	background: #0891b2;
	border-radius: 2px;
}

.msa-product-card__icon--policies .msa-product-card__glyph {
	width: 9px;
	margin-left: -5px;
}

.msa-product-card__icon--setup {
	background: #eef2ff;
	border-color: #c7d2fe;
	gap: 3px;
}

.msa-product-card__icon--setup .msa-product-card__glyph,
.msa-product-card__icon--setup::before,
.msa-product-card__icon--setup::after {
	content: "";
	display: block;
	border-radius: 50%;
}

.msa-product-card__icon--setup::before,
.msa-product-card__icon--setup::after {
	width: 6px;
	height: 6px;
	background: #4f46e5;
}

.msa-product-card__icon--setup .msa-product-card__glyph {
	width: 8px;
	height: 2px;
	border-radius: 0;
	background: #c7d2fe;
}

.msa-product-card__icon--handoff {
	background: #fffbeb;
	border-color: #fde68a;
}

.msa-product-card__icon--handoff .msa-product-card__glyph {
	width: 12px;
	height: 12px;
	border: 2.5px solid #d97706;
	border-radius: 50%;
	box-sizing: border-box;
}

.msa-product-card h3 {
	font-size: 16px;
	line-height: normal;
	margin-bottom: 8px;
}

.msa-product-card p {
	color: var(--msa-slate-600);
	font-size: 14px;
	line-height: 1.55;
}

.msa-how__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 14px;
}

.msa-how__step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}

.msa-how__step--final .msa-how__num {
	background: var(--msa-emerald);
	color: #fff;
}

.msa-how__num {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--msa-indigo);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex: 0 0 auto;
}

.msa-how__step strong {
	font-size: 14px;
	line-height: 18px;
}

.msa-how__step p {
	margin-top: 0;
	color: var(--msa-slate-500);
	font-size: 12.5px;
	line-height: 1.5;
}

.msa-how__split {
	margin-top: 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 14px;
	padding: 36px;
}

.msa-how__split-copy h3 {
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 12px;
	letter-spacing: -0.01em;
}

.msa-how__split-copy p {
	color: var(--msa-slate-600);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 18px;
}

.msa-how__split-copy p + p {
	margin: 0;
}

.msa-demo__grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 24px;
	align-items: stretch;
	height: 424px;
}

.msa-demo__grid > * {
	height: 424px;
	min-height: 0;
}

.msa-demo__dashboard,
.msa-demo__dash-frame {
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	height: 424px;
}

.msa-demo__dash-frame {
	display: flex;
	flex-direction: column;
}

.msa-demo__dash-frame img,
.msa-demo__dashboard img,
.msa-demo__dashboard-img {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
	display: block;
	object-fit: cover;
	object-position: top;
}

.msa-trust__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 56px;
	align-items: center;
}

.msa-trust__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.msa-trust__card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--msa-slate-50);
	border: 1px solid var(--msa-slate-200);
	border-radius: 10px;
	padding: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--msa-slate-700);
}

.msa-trust__check,
.msa-trust__bang {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex: none;
}

.msa-trust__check {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: var(--msa-emerald);
}

.msa-trust__bang {
	background: var(--msa-amber-surface);
	border: 1px solid #fde68a;
	color: var(--msa-amber);
}

.msa-trust__copy .msa-eyebrow {
	display: block;
	line-height: normal;
	margin-bottom: 14px;
}

.msa-trust__copy h2 {
	max-width: none;
	margin-bottom: 14px;
}

.msa-trust__copy .msa-lead {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-width: none;
}

.msa-chat,
.msa-mock-dash,
.msa-mock-panel,
.msa-mock-browser {
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.msa-chat {
	line-height: normal;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.msa-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #0f172a;
	color: #fff;
	font-size: 13px;
}

.msa-chat__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	flex: none;
}

.msa-chat__head span:last-child {
	margin-left: auto;
	font-size: 10px;
	color: #94a3b8;
}

.msa-chat__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--msa-slate-50);
	min-height: 290px;
	flex: 1 1 auto;
}

.msa-demo__dash-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--msa-slate-200);
	background: var(--msa-slate-50);
	font-size: 13px;
}

.msa-demo__dash-mark {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--msa-emerald);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.msa-chat-bubble {
	margin: 0;
	padding: 9px 13px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
	max-width: 90%;
}

.msa-chat-bubble--shopper {
	align-self: flex-end;
	background: #e0e7ff;
	color: #312e81;
	border-radius: 12px 12px 3px 12px;
	max-width: 80%;
}

.msa-chat-bubble--assistant {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 12px 12px 12px 3px;
}

.msa-chat-bubble--fallback {
	background: var(--msa-amber-surface);
	border-color: #fde68a;
}

.msa-chat-product {
	margin-top: 10px;
	padding: 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.msa-pricing__intro {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.msa-pricing__intro .msa-eyebrow {
	display: block;
	line-height: normal;
}

.msa-pricing__intro h2 {
	max-width: none;
	margin-bottom: 14px;
}

.msa-pricing__intro .msa-lead {
	margin: 0 auto;
	max-width: none;
	font-size: 16px;
	line-height: 1.6;
}

.msa-pricing__grid {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}

.msa-plan {
	border: 1px solid var(--msa-slate-200);
	border-radius: 14px;
	padding: 30px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	text-align: left;
}

.msa-plan--recommended {
	border: 2px solid var(--msa-indigo);
	box-shadow: 0 12px 32px rgba(79, 70, 229, 0.1);
}

.msa-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--msa-indigo);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.msa-plan__head h3 {
	font-size: 16px;
	line-height: normal;
	font-weight: 700;
}

.msa-plan__blurb {
	margin: 0;
	margin-top: 4px;
	font-size: 13px;
	line-height: normal;
	color: var(--msa-slate-500);
}

.msa-plan__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: normal;
}

.msa-plan__amount {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: normal;
}

.msa-plan__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
	color: var(--msa-slate-700);
	font-size: 14px;
	line-height: 18px;
	flex: 1;
}

.msa-plan__features li::before {
	content: "✓ ";
	color: var(--msa-emerald);
	font-weight: 700;
}

.msa-plan .msa-btn--primary {
	font-size: 15px;
	line-height: normal;
	padding: 12px 20px;
	border: none;
	margin-top: auto;
	text-align: center;
}

.msa-pricing__notes {
	max-width: 720px;
	margin: 32px auto 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.msa-pricing__footnote,
.msa-pricing__footnote-body,
.msa-pricing__scope {
	margin: 0;
	max-width: none;
}

.msa-pricing__footnote {
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--msa-slate-700);
}

.msa-pricing__footnote-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-slate-500);
}

.msa-pricing__scope {
	font-size: 13px;
	line-height: 1.6;
	color: #94a3b8;
}

.msa-trust__warning {
	grid-column: 1 / -1;
}

.msa-faq .msa-container {
	max-width: calc(760px + (2 * var(--msa-pad-x)));
}

.msa-faq__intro {
	text-align: center;
	margin-bottom: 40px;
}

.msa-faq__intro .msa-eyebrow {
	display: block;
	line-height: normal;
}

.msa-faq__intro h2 {
	max-width: none;
}

.msa-faq__list {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	gap: 10px;
	max-width: 100%;
	text-align: left;
}

.msa-faq__item {
	border: 1px solid var(--msa-slate-200);
	border-radius: 10px;
	background: #fff;
	padding: 0 20px;
}

.msa-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	padding: 16px 0;
	list-style: none;
}

/* ZIP open item: 12px gap after summary; closed keeps 16px padding. */
.msa-faq__item[open] summary {
	padding-bottom: 12px;
}

.msa-faq__item summary::-webkit-details-marker {
	display: none;
}

.msa-faq__answer {
	padding: 0 0 16px;
	color: var(--msa-slate-600);
	font-size: 14px;
	line-height: 1.6;
}

.msa-final {
	background: #0f172a;
	border-bottom: 0;
	padding: 88px 0;
	color: #fff;
}

.msa-final__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.msa-final h2 {
	color: #fff;
}

.msa-final .msa-lead {
	color: #94a3b8;
	font-size: 16px;
	line-height: 1.6;
	max-width: 52ch;
	margin-top: 0;
}

.msa-final__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 6px;
}

.msa-final .msa-btn--primary {
	padding: 13px 26px;
	border: none;
	line-height: normal;
}

.msa-final .msa-btn--secondary {
	background: transparent;
	color: #a5b4fc;
	border: none;
	padding: 0;
}

.msa-final .msa-btn--secondary:hover {
	background: transparent;
	color: #c7d2fe;
}

.msa-mock__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--msa-slate-500);
	margin: 0 0 8px;
	font-family: ui-monospace, Menlo, monospace;
}

.msa-mock--hero {
	position: relative;
	padding: 20px 12px 44px 20px;
	/* ZIP unspecified → normal; keeps bubble 1.45 explicit vs body 1.5. */
	line-height: normal;
}

/* Hero: absolute assistant/status must use outer padded wrapper as containing
   block (ZIP), not the nested stage (stage inset → wrong x996 / x776.97). */
.msa-mock--hero .msa-mock__stage {
	position: static;
}

/* ZIP assistant width:280 content-box + 1px borders = 282 outer. */
.msa-mock--hero .msa-mock-assistant {
	width: 282px;
}

.msa-mock__stage {
	position: relative;
}

.msa-mock-browser__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--msa-slate-200);
	background: var(--msa-slate-50);
	font-size: 12px;
	color: var(--msa-slate-500);
}

.msa-mock-browser__bar span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--msa-slate-200);
}

.msa-mock-browser__bar em {
	margin-left: 10px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px;
	font-style: normal;
	color: var(--msa-slate-500);
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 6px;
	padding: 3px 10px;
	flex: 1;
}

.msa-mock-store {
	padding: 16px 18px 20px;
}

.msa-mock-store__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 14px;
}

.msa-mock-store__head span {
	font-size: 11px;
	color: #94a3b8;
}

.msa-mock-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0;
}

.msa-mock-product {
	border: 1px solid var(--msa-slate-200);
	border-radius: 8px;
	overflow: hidden;
	font-size: 11px;
}

.msa-mock-product span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 74px;
	background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 6px, #e8eef4 6px, #e8eef4 12px);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 9px;
	color: #94a3b8;
}

.msa-mock-product strong,
.msa-mock-product em {
	display: block;
	padding: 0 8px;
	font-style: normal;
}

.msa-mock-product strong {
	padding-top: 7px;
	font-weight: 600;
}

.msa-mock-product em {
	padding-bottom: 7px;
	color: var(--msa-slate-500);
}

.msa-mock-assistant {
	position: absolute;
	right: -8px;
	bottom: -4px;
	width: 280px;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
	overflow: hidden;
	z-index: 2;
}

.msa-mock-assistant__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #0f172a;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.msa-mock-assistant__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
}

.msa-mock-assistant__head em {
	margin-left: auto;
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	color: #94a3b8;
}

.msa-mock-assistant__online {
	margin-left: auto;
	font-size: 10px;
	font-weight: 500;
	color: #94a3b8;
}

.msa-mock-assistant__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--msa-slate-50);
}

.msa-mock-assistant__bubble {
	font-size: 12px;
	line-height: 1.45;
	padding: 8px 11px;
	max-width: 92%;
}

.msa-mock-assistant__bubble--shopper {
	align-self: flex-end;
	background: #e0e7ff;
	color: #312e81;
	border-radius: 11px 11px 3px 11px;
	max-width: 85%;
}

.msa-mock-assistant__bubble--assistant {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 11px 11px 11px 3px;
}

.msa-mock-assistant__product {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
	border: 1px solid var(--msa-slate-200);
	border-radius: 8px;
	padding: 6px;
	font-size: 11px;
}

.msa-mock-assistant__swatch,
.msa-mock-assistant__product > span:first-child {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 4px, #e8eef4 4px, #e8eef4 8px);
	flex: none;
	display: block;
}

.msa-mock-status {
	position: absolute;
	left: -4px;
	top: -6px;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	z-index: 2;
}

.msa-mock-status span {
	display: flex;
	align-items: center;
	gap: 7px;
}

.msa-mock-status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--msa-emerald);
	flex: none;
}

.msa-mock-status .is-amber i {
	background: var(--msa-amber);
}

.msa-mock-status__row {
	display: flex;
	align-items: center;
	gap: 7px;
}

.msa-mock-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--msa-emerald);
}

.msa-mock-status__dot--warn {
	background: var(--msa-amber);
}

.msa-mock-panel {
	padding: 0;
	background: var(--msa-slate-50);
	border: 1px solid var(--msa-slate-200);
	border-radius: 10px;
	overflow: hidden;
	line-height: normal;
}

.msa-mock-panel__head {
	padding: 10px 16px;
	border-bottom: 1px solid var(--msa-slate-200);
	background: #0f172a;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.msa-mock-panel__head-icon,
.msa-mock-panel__mark {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #334155;
	flex: none;
}

.msa-mock-panel__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
}

.msa-mock-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--msa-slate-200);
	border-radius: 8px;
	padding: 11px 14px;
}

.msa-mock-panel__chip {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 600;
}

.msa-mock-panel__chip--ok {
	color: var(--msa-emerald);
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
}

.msa-mock-panel__chip--info,
.msa-mock-panel__chip--cyan {
	color: #0e7490;
	background: var(--msa-cyan-surface);
	border: 1px solid #a5f3fc;
}

.msa-mock-panel__chip--off,
.msa-mock-panel__chip--amber {
	color: #b45309;
	background: var(--msa-amber-surface);
	border: 1px solid #fde68a;
}

.msa-mock-dash header {
	padding: 14px 16px;
	border-bottom: 1px solid var(--msa-slate-200);
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.msa-mock-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px;
}

.msa-mock-dash__grid div {
	border: 1px solid var(--msa-slate-200);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: var(--msa-slate-500);
}

.msa-mock-dash__grid strong {
	font-size: 22px;
	color: var(--msa-slate-900);
}

.msa-mock-dash__tip {
	margin: 0 16px 16px;
	padding: 12px;
	border-radius: 10px;
	background: var(--msa-cyan-surface);
	border: 1px solid #a5f3fc;
	font-size: 13px;
	color: #155e75;
}

.msa-prose {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px var(--msa-pad-x);
}