/* =========================================================================
 * TitanCart Prism — Marketplace preset skin  (scope: .tc-mp)
 * Mockup: Digital_Marketplace.jpeg  ("TitanCart Market")  — LIGHT / SaaS-clean.
 *
 * Enqueued ONLY when the marketplace preset is active (generic layout-<slug>.css
 * enqueue in inc/preset-resolver.php; deps tct-theme + tct-shop). Styles the
 * homepage BODY emitted by layouts/marketplace.php. The shared chrome
 * (header/footer) is the DEFERRED cross-preset reskin pass — not here.
 *
 * PALETTE — SAMPLED from the mockup with PIL (the S8 rule):
 *   page/card white #FFFFFF   cool-gray band #F1F2F6   CTA band #ECEEF2
 *   border          #E5E7EB   ink            #0F1115   muted    #7C828D
 *   brand indigo    #4A46D6 (== --tct-brand)  hover    #3D39B8 (cores
 *                   #4950D0/#5145CA/#5249C3)   violet   #6D5CF0 (hero word/grad)
 *   icon chip       #0B1330 (sampled #061033 — DISTINCT dark navy tile, the
 *                   marketplace analog of the S9 "distinct media tile" rule)
 *   dev band        pale lavender->blue (#ECECFE / #DCEAFE; sampled #DDE2FD)
 *   stars           #F59E0B amber (mockup glyphs too small/JPEG-desaturated to
 *                   sample cleanly — safe amber used, noted in layouts/*.php)
 *
 * The §5 starter spec named brand=blue #2563EB; every CTA samples indigo-violet
 * (~#4A46D6) so sampling wins (S8). Inter display + body come from the preset.
 * ========================================================================= */

/* 0.2.14 (KI-137): the tokens are ALSO declared on the preset body class so the
   shared .tc-mp-card (titancart/product/card.php) has them on /shop/ and every
   other Marketplace-preset page — without them the card lost its border, the
   stars went black and the chip was a white glyph on no background. */
.tc-mp,
body.tc-prism-marketplace {
	/* surfaces */
	--mp-page:        #FFFFFF;
	--mp-surface:     #FFFFFF;
	--mp-soft:        #F1F2F6;   /* cool-gray band */
	--mp-soft2:       #ECEEF2;   /* bottom-CTA band */
	--mp-border:      #E5E7EB;
	/* ink */
	--mp-ink:         #0F1115;
	--mp-text:        #3A404B;
	--mp-muted:       #7C828D;
	/* brand (indigo) — track --tct-brand so chrome + body stay in sync */
	--mp-brand:       var(--tct-brand, #4A46D6);
	--mp-brand-hover: var(--tct-brand-hover, #3D39B8);
	--mp-brand-soft:  #EEF0FE;
	--mp-violet:      #6D5CF0;
	/* accents */
	--mp-chip:        #0B1330;   /* DISTINCT dark-navy icon chip */
	--mp-star:        #F59E0B;
	--mp-dev1:        #ECECFE;   /* dev band gradient start */
	--mp-dev2:        #DCEAFE;   /* dev band gradient end   */
	/* shape */
	--mp-card-radius: 14px;
	--mp-btn-radius:  10px;
	--mp-chip-radius: 12px;
}

/* Visual properties stay on the homepage root only — the body-class selector
   above carries TOKENS, nothing else (KI-137). */
.tc-mp {
	background: var(--mp-page);
	color: var(--mp-text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.tc-mp * { box-sizing: border-box; }

.tc-mp__container {
	width: 100%;
	max-width: 1440px;   /* full 1440 design width; no gutters — full-bleed to the 1440 frame (S19) */
	margin: 0 auto;
	padding: 0;
}

.tc-mp h1, .tc-mp h2, .tc-mp h3 {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--mp-ink);
	margin: 0;
	letter-spacing: -.01em;
	font-weight: 800;
}

.tc-mp a { text-decoration: none; }
/* 0.2.14 (KI-137): the shared card outside the homepage root — no underlines
   on the name / button, same as inside .tc-mp. */
.tc-mp-card a { text-decoration: none; }

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.tc-mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--mp-btn-radius);
	font: 600 .92rem/1 "Inter", system-ui, sans-serif;
	letter-spacing: .005em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tc-mp-btn i { font-size: .95em; line-height: 0; }

.tc-mp-btn--primary {
	background: var(--mp-brand);
	color: #fff;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--mp-brand) 60%, transparent);
}
.tc-mp-btn--primary:hover {
	background: var(--mp-brand-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--mp-brand) 65%, transparent);
}

.tc-mp-btn--outline {
	background: #fff;
	color: var(--mp-ink);
	border-color: var(--mp-border);
}
.tc-mp-btn--outline:hover {
	border-color: var(--mp-brand);
	color: var(--mp-brand);
}

.tc-mp-btn--ghost {
	background: #fff;
	color: var(--mp-ink);
	border-color: var(--mp-border);
	padding: 10px 18px;
	font-size: .85rem;
	width: 100%;
}
.tc-mp-btn--ghost:hover {
	background: var(--mp-brand-soft);
	border-color: var(--mp-brand);
	color: var(--mp-brand);
}

/* ───────────────── DARK ICON CHIP (cats / exts / why) ───────────────── */
/* 0.2.12 (KI-134): the Marketplace-preset shop archive renders the SAME
   .tc-mp-card as the homepage (titancart/product/card.php → inc/marketplace-
   card.php) inside the extension's .tcm-shop__grid — make it fill its cell. */
.tc-prism-marketplace .tcm-shop__grid .tc-mp-card { height: 100%; }
.tc-mp-chip-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--mp-chip-radius);
	background: var(--mp-chip);
	color: #fff;
	font-size: 1.35rem;
	line-height: 0;
	flex: 0 0 auto;
}

/* quick-search pill chips (hero) */
.tc-mp-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid var(--mp-border);
	border-radius: 999px;
	background: #fff;
	color: var(--mp-text);
	font-size: .82rem;
	font-weight: 500;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.tc-mp-chip:hover {
	border-color: var(--mp-brand);
	color: var(--mp-brand);
	background: var(--mp-brand-soft);
}

/* ═════════════════════════════ 1. HERO ═════════════════════════════ */
.tc-mp-hero {
	background: var(--mp-page);
	padding: 64px 0 56px;
	border-bottom: 1px solid var(--mp-border);
}
.tc-mp-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tc-mp-hero__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mp-brand);
}
.tc-mp-hero__title {
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}
.tc-mp-hero__accent {
	background: linear-gradient(135deg, var(--mp-brand), var(--mp-violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tc-mp-hero__sub {
	margin: 20px 0 28px;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--mp-text);
	max-width: 30em;
}
.tc-mp-hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.tc-mp-hero__quick {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.tc-mp-hero__quick-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--mp-muted);
	margin-right: 2px;
}

/* decorative app-preview illustration */
.tc-mp-hero__visual {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Store-uploaded right-side hero image (hero_style = "side"): fills the full
   width of the visual column at a fixed 4:3 ratio, cover-cropped so any source
   ratio sits cleanly; matches the preview card's rounding + shadow so the two
   modes read as the same design slot. */
.tc-mp-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--mp-border);
	border-radius: 18px;
	box-shadow: 0 30px 60px -28px rgba(15, 23, 60, .35), 0 0 0 6px rgba(74, 70, 214, .05);
}
.tc-mp-preview {
	width: 100%;
	max-width: 480px;
	background: #fff;
	border: 1px solid var(--mp-border);
	border-radius: 18px;
	box-shadow: 0 30px 60px -28px rgba(15, 23, 60, .35), 0 0 0 6px rgba(74, 70, 214, .05);
	overflow: hidden;
}
.tc-mp-preview__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--mp-border);
}
.tc-mp-preview__brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: .82rem;
	color: var(--mp-ink);
	white-space: nowrap;
}
.tc-mp-preview__brand i { color: var(--mp-brand); }
.tc-mp-preview__search {
	flex: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--mp-soft);
	color: var(--mp-muted);
	font-size: .74rem;
}
.tc-mp-preview__body { display: flex; gap: 14px; padding: 16px; }
.tc-mp-preview__side {
	flex: 0 0 84px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.tc-mp-preview__nav {
	height: 9px;
	border-radius: 5px;
	background: var(--mp-soft);
}
.tc-mp-preview__nav.is-active { background: var(--mp-brand); opacity: .85; }
.tc-mp-preview__grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-content: start;
}
.tc-mp-preview__head {
	grid-column: 1 / -1;
	font-size: .72rem;
	font-weight: 700;
	color: var(--mp-ink);
}
.tc-mp-preview__tile {
	border: 1px solid var(--mp-border);
	border-radius: 9px;
	padding: 9px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tc-mp-preview__tile-ic {
	width: 18px; height: 18px;
	border-radius: 5px;
	background: var(--mp-chip);
}
.tc-mp-preview__tile-l { height: 6px; width: 80%; border-radius: 4px; background: var(--mp-soft); }
.tc-mp-preview__tile-s { height: 6px; width: 50%; border-radius: 4px; background: var(--mp-soft); }
.tc-mp-hero__float {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--mp-border);
	box-shadow: 0 14px 28px -12px rgba(15, 23, 60, .3);
	color: var(--mp-brand);
	font-size: 1.3rem;
}
.tc-mp-hero__float--a { top: 8%; left: -4px; }
.tc-mp-hero__float--b { bottom: 12%; right: -6px; color: var(--mp-violet); }

/* ───────────────── SECTION HEADS (shared) ───────────────── */
.tc-mp-cats, .tc-mp-ext { padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0; }
.tc-mp-ext { background: var(--mp-page); } /* S19: unify to white — the mockup shows no gray band here */

/* S19: thin wire box around Featured Categories / Featured Extensions / Why sections (matches mockup) */
.tc-mp-cats > .tc-mp__container,
.tc-mp-ext  > .tc-mp__container,
.tc-mp-why  > .tc-mp__container {
	background: var(--mp-page);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-card-radius);
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.tc-mp-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}
.tc-mp-sec__title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.tc-mp-sec__sub { margin: 6px 0 0; color: var(--mp-muted); font-size: .96rem; }
.tc-mp-sec__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mp-brand);
	font-weight: 600;
	font-size: .9rem;
	white-space: nowrap;
}
.tc-mp-sec__all:hover { color: var(--mp-brand-hover); }
.tc-mp-sec__all i { transition: transform .15s ease; }
.tc-mp-sec__all:hover i { transform: translateX(3px); }

/* ═══════════════════ 2. FEATURED CATEGORIES ═══════════════════ */
.tc-mp-cats__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.tc-mp-cat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px;
	background: var(--mp-surface);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-card-radius);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tc-mp-cat:hover {
	border-color: color-mix(in srgb, var(--mp-brand) 45%, var(--mp-border));
	box-shadow: 0 16px 32px -22px rgba(15, 23, 60, .4);
	transform: translateY(-3px);
}
.tc-mp-cat__name { font-weight: 700; font-size: 1.02rem; color: var(--mp-ink); }
.tc-mp-cat__desc { font-size: .87rem; line-height: 1.5; color: var(--mp-text); flex: 1; }
.tc-mp-cat__count { font-size: .8rem; font-weight: 600; color: var(--mp-muted); }

/* ═══════════════════ 3. FEATURED EXTENSIONS ═══════════════════ */
.tc-mp-ext__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.tc-mp-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px;
	background: var(--mp-surface);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-card-radius);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tc-mp-card:hover {
	border-color: color-mix(in srgb, var(--mp-brand) 45%, var(--mp-border));
	box-shadow: 0 16px 32px -22px rgba(15, 23, 60, .4);
	transform: translateY(-3px);
}
.tc-mp-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.tc-mp-card__chip { text-decoration: none; }
.tc-mp-card__price {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--mp-ink);
}
.tc-mp-card__price.is-free { color: var(--mp-brand); }
.tc-mp-card__brand {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mp-brand);
	margin-bottom: 2px;
}
.tc-mp-card__name {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--mp-ink);
	line-height: 1.3;
}
.tc-mp-card__name:hover { color: var(--mp-brand); }
/* 0.2.12 (KI-134): "by {vendor}" — the line the extension's shop card carried,
   now part of the one shared card (homepage + shop). Sits tight under the
   name; the name's 12px flex gap is pulled back so the pair reads as one. */
.tc-mp-card__by {
	font-size: .8rem;
	color: var(--mp-muted);
	margin-top: -8px;
	line-height: 1.3;
}
.tc-mp-card__by a { color: var(--mp-brand); text-decoration: none; font-weight: 600; }
.tc-mp-card__by a:hover { text-decoration: underline; }
.tc-mp-card__desc { font-size: .87rem; line-height: 1.5; color: var(--mp-text); flex: 1; margin: 0; }
.tc-mp-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
}
.tc-mp-card__stars { color: var(--mp-star); line-height: 0; font-size: .8rem; letter-spacing: 1px; }
.tc-mp-card__rval { font-weight: 700; color: var(--mp-ink); }
.tc-mp-card__rcount { color: var(--mp-muted); }
.tc-mp-card__btn { margin-top: 4px; }

.tc-mp-ext__empty {
	text-align: center;
	padding: 56px 20px;
	color: var(--mp-muted);
}
.tc-mp-ext__empty i { font-size: 2.4rem; color: var(--mp-brand); opacity: .55; }
.tc-mp-ext__empty p { margin: 12px 0 18px; font-size: 1rem; }

/* ═══════════════════ 4. WHY TITANCART MARKET ═══════════════════ */
.tc-mp-why { padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0; background: var(--mp-page); }
/* `.tc-mp` doubled so margin-bottom out-specifies the shared `.tc-mp h2` reset
   (margin:0 → specificity 0,1,1); this makes it 0,2,0 so the gap actually renders. */
.tc-mp .tc-mp-why__title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); text-align: left; margin-bottom: 28px; }
.tc-mp-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.tc-mp-why__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 22px;
	background: var(--mp-surface);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-card-radius);
}
.tc-mp-why__t { font-weight: 700; font-size: 1.02rem; color: var(--mp-ink); }
.tc-mp-why__d { font-size: .89rem; line-height: 1.55; color: var(--mp-text); }

/* ═══════════════════ 5. DEVELOPER CTA BAND ═══════════════════ */
.tc-mp-dev { padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0; }
.tc-mp-dev__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 38px 40px;
	border-radius: 20px;
	background: linear-gradient(120deg, var(--mp-dev1), var(--mp-dev2));
	border: 1px solid color-mix(in srgb, var(--mp-brand) 18%, var(--mp-border));
}
.tc-mp-dev__art {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px; height: 92px;
	border-radius: 22px;
	background: linear-gradient(135deg, var(--mp-brand), var(--mp-violet));
	color: #fff;
	font-size: 2.6rem;
	box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--mp-brand) 70%, transparent);
}
.tc-mp-dev__copy { flex: 1; min-width: 0; }
.tc-mp-dev__title { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.tc-mp-dev__sub { margin: 8px 0 18px; color: var(--mp-text); font-size: 1rem; }
.tc-mp-dev__stats {
	flex: 0 0 auto;
	display: flex;
	gap: 30px;
}
.tc-mp-dev__stat { display: flex; flex-direction: column; align-items: center; }
.tc-mp-dev__num {
	font-weight: 800;
	font-size: 1.7rem;
	color: var(--mp-brand);
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.tc-mp-dev__star { font-size: 1rem; color: var(--mp-star); }
.tc-mp-dev__lbl { font-size: .82rem; color: var(--mp-muted); font-weight: 500; }

/* ═══════════════════ 6. BOTTOM CTA BAND ═══════════════════ */
.tc-mp-cta { padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0; }
.tc-mp-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 36px 40px;
	border-radius: 18px;
	background: var(--mp-soft2);
}
.tc-mp-cta__title { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.tc-mp-cta__sub { margin: 8px 0 0; color: var(--mp-text); font-size: 1rem; }
.tc-mp-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }

/* ═══════════════════ 7. NEWSLETTER BAND ═══════════════════ */
.tc-mp-news {
	background: var(--mp-brand-soft);
	border-top: 1px solid var(--mp-border);
}
.tc-mp-news__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-block: 38px;
}
.tc-mp-news__copy { display: flex; align-items: center; gap: 16px; }
.tc-mp-news__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: #fff;
	color: var(--mp-brand);
	font-size: 1.5rem;
	flex: 0 0 auto;
}
.tc-mp-news__title { font-size: 1.3rem; }
.tc-mp-news__sub { margin: 4px 0 0; color: var(--mp-text); font-size: .94rem; }
.tc-mp-news__action { flex: 0 0 auto; min-width: 320px; }
.tc-mp-news__form { display: flex; gap: 10px; }
.tc-mp-news__input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-btn-radius);
	background: #fff;
	font: 400 .95rem "Inter", system-ui, sans-serif;
	color: var(--mp-ink);
}
.tc-mp-news__input:focus {
	outline: none;
	border-color: var(--mp-brand);
	box-shadow: 0 0 0 3px var(--mp-brand-soft);
}
.tc-mp-news__btn { flex: 0 0 auto; }
.tc-mp-news__msg { margin: 8px 0 0; font-size: .85rem; min-height: 1.1em; }
.tc-mp-news__msg.is-error { color: #DC2626; }
.tc-mp-news__msg.is-success { color: #16A34A; }
.tc-mp-news__fine { display: block; margin-top: 6px; font-size: .78rem; color: var(--mp-muted); }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width: 1200px) {
	.tc-mp-cats__grid { grid-template-columns: repeat(3, 1fr); }
	.tc-mp-ext__grid  { grid-template-columns: repeat(3, 1fr); }
	.tc-mp-why__grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.tc-mp-hero__inner { grid-template-columns: 1fr; gap: 36px; }
	.tc-mp-hero__visual { min-height: 0; order: -1; }
	.tc-mp-hero__img { max-width: 480px; }
	.tc-mp-preview { max-width: 420px; }
	.tc-mp-dev__inner { flex-wrap: wrap; }
	.tc-mp-dev__stats { width: 100%; justify-content: flex-start; }
}

@media (max-width: 860px) {
	.tc-mp-hero { padding: 48px 0 40px; }
	.tc-mp-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.tc-mp-ext__grid  { grid-template-columns: repeat(2, 1fr); }
	.tc-mp-sec__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.tc-mp-cta__inner,
	.tc-mp-news__inner { flex-direction: column; align-items: flex-start; }
	.tc-mp-news__action { width: 100%; min-width: 0; }
	.tc-mp-dev__inner { padding: 30px 26px; }
	.tc-mp-dev__art { width: 72px; height: 72px; font-size: 2rem; }
}

@media (max-width: 520px) {
	.tc-mp__container { padding: 0; }
	.tc-mp-cats__grid,
	.tc-mp-ext__grid,
	.tc-mp-why__grid { grid-template-columns: 1fr; }
	.tc-mp-hero__cta .tc-mp-btn,
	.tc-mp-cta__actions .tc-mp-btn { flex: 1 1 100%; }
	.tc-mp-dev__stats { gap: 22px; }
	.tc-mp-news__form { flex-direction: column; }
	.tc-mp-news__btn { width: 100%; }
	.tc-mp-hero__float { display: none; }
}