/* Compliance Monitor — public Update page (Figma: NEO-Website 12423:111022 / 12423:111081). */

/* === Design tokens (Figma) ============================================== */
:root {
	--ncm-cu-fg:            #191a23;          /* bodycopy-dark */
	--ncm-cu-fg-mid:        #656672;          /* bodycopy-mid */
	--ncm-cu-fg-soft:       #a1a1aa;          /* foreground-400 */
	--ncm-cu-fg-link:       #27272a;          /* foreground-800 */
	--ncm-cu-bg:            #ffffff;
	--ncm-cu-bg-soft:       #fafafa;          /* base/default-50 */
	--ncm-cu-bg-chip:       #f4f4f5;          /* base/default-100 */
	--ncm-cu-bg-violet:     #f2e6ff;          /* additional/blue-violet/50 */
	--ncm-cu-border:        rgba(17, 17, 17, 0.15);
	--ncm-cu-border-soft:   rgba(0, 0, 0, 0.2);
	--ncm-cu-neo-purple:    #9b51e0;
	--ncm-cu-black:         #000000;
	--ncm-cu-radius-md:     12px;
	--ncm-cu-radius-lg:     28px;
	--ncm-cu-radius-pill:   9999px;
	--ncm-cu-font-primary:  'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ncm-cu-font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ncm-cu-font-mono:     'DM Mono', ui-monospace, Menlo, monospace;
}

/* === Page shell ========================================================= */
.ncm-cu {
	background: var(--ncm-cu-bg);
	color: var(--ncm-cu-fg);
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}
.ncm-cu__shell {
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 50px;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* === Full-width hero band ============================================== */
/* Spans the full viewport width — same approach as the theme's
   "Additional Solutions" section on /eor-services-2/. Inner content stays
   centered + capped at 1280px so it lines up with the body shell below. */
.ncm-cu__hero-band {
	width: 100%;
	background-color: #f4eaff;
	background-image: url('https://joinneo.com/wp-content/uploads/2026/01/submit-a-review-bg.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 160px;     /* clear fixed site header */
	padding-bottom: 60px;
}
.ncm-cu__hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 50px;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* === Breadcrumbs ======================================================== */
.ncm-cu__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ncm-cu-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}
.ncm-cu__crumbs a {
	color: var(--ncm-cu-fg-link);
	text-decoration: none;
}
.ncm-cu__crumbs a:hover { text-decoration: underline; }
.ncm-cu__crumbs-sep    { color: var(--ncm-cu-fg-soft); font-weight: 400; }
.ncm-cu__crumbs-current{ color: var(--ncm-cu-fg-soft); }

/* === Hero row =========================================================== */
/* Sits inside .ncm-cu__hero-inner. The dark SVG band is the parent, so this
   row carries no own background — title is black per spec. */
.ncm-cu__hero {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}
.ncm-cu__hero-main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ncm-cu__title {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.1;
	margin: 0;
	color: #000;
	letter-spacing: -0.01em;
}

/* === Hero pills ========================================================= */
.ncm-cu__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ncm-cu__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--ncm-cu-border);
	border-radius: var(--ncm-cu-radius-pill);
	font-family: var(--ncm-cu-font-body);
	font-size: 16px;
	font-weight: 300;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s;
}
.ncm-cu__pill:hover { background: var(--ncm-cu-bg-chip); }
.ncm-cu__pill--country { padding-left: 6px; }
.ncm-cu__pill-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: hidden;
	background: #d4d4d8;
}
.ncm-cu__pill-flag img,
.ncm-cu__pill-flag .ncm-flag {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ncm-cu__pill--date.is-upcoming { color: #92400e; border-color: rgba(146, 64, 14, 0.25); }
.ncm-cu__pill--date.is-active   { color: #0e7c66; border-color: rgba(14, 124, 102, 0.25); }

/* === Subscribe aside (hero right) ======================================= */
.ncm-cu__subscribe {
	flex: 0 0 380px;
	background: var(--ncm-cu-bg-violet);
	border-radius: var(--ncm-cu-radius-lg);
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	text-align: center;
}
.ncm-cu__subscribe-eyebrow {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 16px;
	margin: 0;
	color: #000;
}
.ncm-cu__subscribe-title {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ncm-cu-fg);
	margin: 0;
}
.ncm-cu__subscribe-btn {
	width: 100%;
	height: 48px;
	background: var(--ncm-cu-black);
	border: 2px solid var(--ncm-cu-black);
	border-radius: var(--ncm-cu-radius-md);
	color: #fff;
	font-family: var(--ncm-cu-font-body);
	font-weight: 500;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s;
}
.ncm-cu__subscribe-btn:hover { background: #2a2a2a; }
.ncm-cu__bell { width: 20px; height: 20px; flex-shrink: 0; }
.ncm-cu__subscribe-link {
	font-family: var(--ncm-cu-font-body);
	font-weight: 500;
	font-size: 16px;
	color: #000;
	text-decoration: none;
}
.ncm-cu__subscribe-link:hover { text-decoration: underline; }

/* === Body layout (article + aside) ====================================== */
.ncm-cu__layout {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}
.ncm-cu__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-right: 60px;
}

/* === Italic callout (summary lead) ====================================== */
.ncm-cu__callout {
	display: flex;
	gap: 20px;
	align-items: stretch;
}
.ncm-cu__callout-bar {
	flex: 0 0 4px;
	background: var(--ncm-cu-neo-purple);
	border-radius: 2px;
	align-self: stretch;
}
.ncm-cu__callout p {
	margin: 0;
	font-family: var(--ncm-cu-font-body);
	font-style: italic;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ncm-cu-fg);
}

/* === Main content (Writer agent output via the_content) ================= */
.ncm-cu__content {
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ncm-cu-fg);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ncm-cu__content > * { margin: 0; }
.ncm-cu__content h1,
.ncm-cu__content h2,
.ncm-cu__content h3 {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	color: #000;
	margin: 0;
}
.ncm-cu__content h1 { font-size: 24px; line-height: 1.2; }
.ncm-cu__content h2 { font-size: 20px; line-height: 1.2; }   /* matches h4 token */
.ncm-cu__content h3 { font-size: 16px; line-height: 1.3; }
.ncm-cu__content h2 + p,
.ncm-cu__content h3 + p { margin-top: -8px; }                 /* tighten heading→body */
.ncm-cu__content p { margin: 0; }
.ncm-cu__content ul,
.ncm-cu__content ol {
	margin: 0;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ncm-cu__content li { font-size: 16px; line-height: 1.5; }
.ncm-cu__content strong {
	font-family: var(--ncm-cu-font-body);
	font-weight: 700;
	color: var(--ncm-cu-fg);
}
.ncm-cu__content a {
	color: var(--ncm-cu-neo-purple);
	text-decoration: underline;
}
.ncm-cu__content hr {
	border: 0;
	border-top: 2px solid var(--ncm-cu-border-soft);
	margin: 4px 0;
}

/* Comparison tables inside the Writer markdown */
.ncm-cu__content table {
	width: 100%;
	max-width: 750px;
	border-collapse: collapse;
	border-top: 1px solid var(--ncm-cu-border-soft);
	font-size: 14px;
	line-height: 1.5;
}
.ncm-cu__content thead { background: var(--ncm-cu-bg-soft); }
.ncm-cu__content th,
.ncm-cu__content td {
	text-align: left;
	padding: 8px;
	border-bottom: 1px solid var(--ncm-cu-border);
	vertical-align: top;
	font-size: 14px;
	font-weight: 300;
	color: var(--ncm-cu-fg);
}
.ncm-cu__content th {
	font-family: var(--ncm-cu-font-body);
	font-weight: 700;
	font-size: 12px;
}

/* === Horizontal rule before Sources block =============================== */
.ncm-cu__rule {
	border: 0;
	border-top: 2px solid var(--ncm-cu-border-soft);
	margin: 0;
}

/* === Sources ============================================================ */
.ncm-cu__sources h2 {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 20px;
	margin: 0 0 16px;
	color: #000;
}
.ncm-cu__sources ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ncm-cu__sources a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ncm-cu-neo-purple);
	text-decoration: underline;
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 16px;
}
.ncm-cu__sources a:hover { text-decoration: none; }
.ncm-cu__ext { width: 20px; height: 20px; flex-shrink: 0; }

/* === Impacted policy areas card ========================================= */
.ncm-cu__rules-card {
	background: #fff;
	border: 1px solid var(--ncm-cu-border);
	border-radius: var(--ncm-cu-radius-lg);
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ncm-cu__rules-card h3 {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 16px;
	margin: 0;
	color: #000;
}
.ncm-cu__rules-chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.ncm-cu__rule-chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	background: var(--ncm-cu-bg-chip);
	border-radius: var(--ncm-cu-radius-pill);
	font-family: var(--ncm-cu-font-mono);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: -0.42px;
	color: var(--ncm-cu-fg);
	white-space: nowrap;
}

/* === Footer (disclaimer + see-all link) ================================= */
.ncm-cu__foot {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ncm-cu__disclaimer {
	margin: 0;
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--ncm-cu-fg-mid);
	line-height: 1.5;
}
.ncm-cu__see-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 20px;
	color: var(--ncm-cu-neo-purple);
	text-decoration: underline;
	align-self: flex-start;
}
.ncm-cu__see-all:hover { text-decoration: none; }
.ncm-cu__see-all span { font-size: 24px; line-height: 1; }

/* === "Need to hire" featured-country aside ============================== */
.ncm-cu__featured {
	flex: 0 0 380px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border-radius: var(--ncm-cu-radius-lg);
	background-color: #1a1a2e;
	background-image: url('https://joinneo.com/wp-content/uploads/2026/05/bg-brazil.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
	position: relative;
}
.ncm-cu__featured-graphic {
	height: 202px;
	border-radius: var(--ncm-cu-radius-md);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ncm-cu__featured-flag-card {
	background: #fff;
	border: 1px solid var(--ncm-cu-border);
	border-radius: var(--ncm-cu-radius-lg);
	width: 200px;
	min-height: 138px;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.ncm-cu__featured-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	background: #d4d4d8;
	flex-shrink: 0;
}
.ncm-cu__featured-flag .ncm-flag,
.ncm-cu__featured-flag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ncm-cu__featured-flag-label {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 20px;
	color: #1a1a2e;
	line-height: 1.1;
	text-align: center;
}
.ncm-cu__featured-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ncm-cu__featured-title {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
	color: #fff;
	margin: 0;
}
.ncm-cu__featured-country {
	background: linear-gradient(-3deg, #bcf1e6 13%, #8cb7f3 83%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ncm-cu__featured-copy {
	font-family: var(--ncm-cu-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}
.ncm-cu__featured-price {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	color: #fff;
}
.ncm-cu__featured-price-from { font-size: 16px; font-weight: 300; }
.ncm-cu__featured-price-amount {
	font-family: var(--ncm-cu-font-primary);
	font-weight: 500;
	font-size: 36px;
	line-height: 1;
}
.ncm-cu__featured-price-per { font-size: 16px; font-weight: 300; }
.ncm-cu__featured-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 48px;
	padding: 0 16px 0 24px;
	background: #fff;
	color: #000;
	font-family: var(--ncm-cu-font-body);
	font-weight: 500;
	font-size: 20px;
	border-radius: var(--ncm-cu-radius-md);
	text-decoration: none;
	width: max-content;
	transition: background 0.15s;
}
.ncm-cu__featured-cta:hover { background: rgba(255, 255, 255, 0.9); }
.ncm-cu__featured-cta svg { width: 16px; height: 16px; }

/* === Responsive ========================================================= */
@media (max-width: 980px) {
	.ncm-cu__shell { padding: 120px 24px 60px; gap: 40px; }
	.ncm-cu__hero,
	.ncm-cu__layout { flex-direction: column; gap: 32px; }
	.ncm-cu__main { padding-right: 0; }
	.ncm-cu__subscribe,
	.ncm-cu__featured { flex: 0 0 auto; width: 100%; }
	.ncm-cu__title { font-size: 28px; }
}
@media (max-width: 600px) {
	.ncm-cu__shell { padding-top: 100px; }
	.ncm-cu__title { font-size: 24px; }
	.ncm-cu__subscribe,
	.ncm-cu__featured,
	.ncm-cu__rules-card { padding: 24px; }
	.ncm-cu__featured-graphic { height: 160px; }
	.ncm-cu__featured-flag-card { width: 80%; }
}

/* === Country-page injection styles (kept from previous build) =========== */

.ncm-flag {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	vertical-align: middle;
	object-fit: cover;
	display: inline-block;
}
.ncm-flag-link { display: inline-flex; align-items: center; }

/* Upcoming-changes banner (top of country page) */
.ncm-upcoming-banner {
	background: #fffbeb;
	border-top: 1px solid #fde68a;
	border-bottom: 1px solid #fde68a;
	padding: 16px 0;
}
.ncm-upcoming-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.ncm-upcoming-banner__head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #92400e;
	font-size: 14px;
	flex-shrink: 0;
}
.ncm-upcoming-banner__icon { font-size: 18px; }
.ncm-upcoming-banner__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ncm-upcoming-chip {
	background: #fff;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12px;
	text-decoration: none;
	color: #1d2327;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	max-width: 320px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ncm-upcoming-chip:hover { border-color: #f59e0b; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.ncm-upcoming-chip__type {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #92400e;
	font-weight: 700;
}
.ncm-upcoming-chip__title { font-weight: 600; line-height: 1.3; }
.ncm-upcoming-chip__date  { color: #92400e; font-weight: 600; font-size: 11px; }

/* Related updates section (bottom of country page) */
.ncm-related-updates {
	background: #f9fafb;
	padding: 60px 0 80px;
	margin-top: 60px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ncm-related-updates__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.ncm-related-updates__head h2 {
	font-size: 28px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 8px;
}
.ncm-related-updates__head p { color: #6b7280; font-size: 15px; margin: 0 0 32px; }
.ncm-related-updates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}
.ncm-related-updates__item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}
.ncm-related-updates__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
.ncm-related-updates__item a {
	display: block;
	padding: 18px 20px;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.ncm-related-updates__meta {
	font-size: 11px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	align-items: center;
}
.ncm-related-updates__type {
	background: #ede9fe;
	color: #5b21b6;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ncm-related-updates__state { color: #6b7280; }
.ncm-related-updates__date  { color: #6b7280; font-weight: 600; }
.ncm-related-updates__date.is-upcoming { color: #92400e; }
.ncm-related-updates__title {
	font-size: 16px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 8px;
	line-height: 1.3;
}
.ncm-related-updates__summary { font-size: 13px; color: #4b5563; margin: 0; line-height: 1.5; }

/* === Compliance Updates archive list ==================================== */

.ncm-update-archive {
	max-width: 1280px;
	margin: 0 auto;
	padding: 160px 50px 80px;
	color: var(--ncm-cu-fg);
	font-family: var(--ncm-cu-font-body);
}
.ncm-update-archive__head h1 {
	font-family: var(--ncm-cu-font-primary);
	font-size: 36px;
	font-weight: 500;
	margin: 0 0 12px;
	color: #000;
}
.ncm-update-archive__lede   { color: var(--ncm-cu-fg-mid); font-size: 16px; margin: 0 0 32px; font-weight: 300; }
.ncm-update-archive__list   { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ncm-update-archive__item   {
	border: 1px solid var(--ncm-cu-border);
	border-radius: var(--ncm-cu-radius-md);
	overflow: hidden;
	transition: box-shadow 0.15s;
}
.ncm-update-archive__item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ncm-update-archive__link   { display: block; padding: 20px 24px; color: inherit; text-decoration: none; }
.ncm-update-archive__meta   { font-size: 12px; color: var(--ncm-cu-fg-mid); margin-bottom: 8px; }
.ncm-update-archive__meta span { margin-right: 6px; }
.ncm-update-archive__title  {
	font-family: var(--ncm-cu-font-primary);
	font-size: 19px;
	font-weight: 500;
	color: #000;
	margin: 0 0 8px;
	line-height: 1.3;
}
.ncm-update-archive__summary{ font-size: 14px; color: #374151; margin: 0; font-weight: 300; }
.ncm-update-archive__pagination { margin-top: 32px; }