/*
Theme Name: International Courier Service
Description: Self-contained theme for the International Courier Service site. Ships its own header, footer and component styles; no parent theme required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
License: GPLv2 or later
Text Domain: courier
*/

/* ==========================================================================
   International Courier Service - design system
   Self-contained. No fonts, images or scripts are fetched from anywhere.
   Mobile-first. Breakpoints: 480 / 600 / 640 / 700 / 768 / 900 / 1024 / 1280
   ========================================================================== */

:root {
	/* --- brand --- */
	--navy-900: #071a30;
	--navy-800: #0b2545;
	--navy-700: #0d2f5e;
	--navy-600: #123b73;
	--blue-700: #1442ad;
	--blue-600: #1a56db;
	--blue-500: #2563eb;
	--blue-200: #bcd3fb;
	--blue-100: #dbe7fd;
	--blue-50:  #eff5ff;

	--orange-600: #c2570b;
	--orange-500: #f97316;
	--orange-50:  #fff3e8;
	--green-700: #12813c;
	--green-600: #16a34a;
	--green-50:  #eefdf3;
	--pink-600: #bd1f87;
	--pink-50:  #fdeef8;
	--red-600:  #c81e1e;
	--red-50:   #fde8e8;

	/* --- neutrals --- */
	--gray-900: #101828;
	--gray-800: #1d2939;
	--gray-700: #344054;
	--gray-600: #475467;
	--gray-500: #667085;
	--gray-400: #98a2b3;   /* referenced by the original CSS but never defined */
	--gray-300: #d0d5dd;
	--gray-200: #e4e7ec;
	--gray-100: #f2f4f7;
	--gray-50:  #f8fafc;
	--white: #ffffff;

	/* --- type --- */
	--font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs-xs:   .75rem;
	--fs-sm:   .8125rem;
	--fs-base: .9375rem;
	--fs-md:   1rem;
	--fs-lg:   1.125rem;

	/* --- shape --- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Layered, low-opacity shadows read as depth rather than smudge. */
	--shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
	--shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
	--shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
	--shadow-lg: 0 12px 20px -4px rgba(16, 24, 40, .10), 0 4px 8px -4px rgba(16, 24, 40, .05);
	--shadow-xl: 0 24px 48px -12px rgba(7, 26, 48, .22);

	--ease: cubic-bezier(.4, 0, .2, 1);
	--speed: .18s;

	--container-max: 1280px;
	--header-h: 76px;   /* anchor scroll offset, so targets clear the sticky header */
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--gray-900);
	background: var(--white);
	font-size: 1rem;          /* rem so browser zoom and user font size are respected */
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, li { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
:root { accent-color: var(--blue-600); }

/* Dates, durations and counts line up in columns. */
.news-mini__date, .news-card__date, .past-webinar__duration,
.doc-card__meta, .faq-mini__count, .faq-tab__count { font-variant-numeric: tabular-nums; }

::selection { background: var(--blue-100); color: var(--navy-800); }

/* ---- focus ----
   One visible ring for every interactive element. focus-visible keeps it off
   mouse clicks but guarantees it for keyboard and assistive tech. The original
   CSS set outline:none on search and form inputs, leaving keyboard users with
   no visible focus at all. */
:focus-visible {
	outline: 2px solid var(--blue-600);
	outline-offset: 2px;
	border-radius: 4px;
}
a:focus-visible, button:focus-visible { outline-offset: 3px; }

/* ---- motion ----
   Honour the OS reduce-motion setting, including smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon--xs { width: .85em; height: .85em; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }

/* ---- layout ---- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.section { padding-block: 3rem; }
@media (min-width: 1024px) { .section { padding-block: 4rem; } }
.section--tight { padding-block: 2rem; }
.section--gray { background: var(--gray-50); }

/* The single-column default is declared BEFORE the media queries. The original
   declared it after, at equal specificity, which silently cancelled them - so
   .grid--2col and .grid--faq never actually went two-column on desktop. */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.grid--2col, .grid--faq { grid-template-columns: 1fr; }

@media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--5 { grid-template-columns: repeat(3, 1fr); }
	.grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.grid { gap: 1.5rem; }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.grid--5 { grid-template-columns: repeat(5, 1fr); }
	.grid--6 { grid-template-columns: repeat(6, 1fr); }
	.grid--2col { grid-template-columns: 1fr 1fr; }
	.grid--faq { grid-template-columns: 1.7fr 1fr; }
}

/* ---- typography ---- */
.section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.75rem;
}
.section-header__title {
	font-size: clamp(1.3rem, 1.05rem + .85vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--navy-800);
	text-wrap: balance;
}
.section-header__subtitle {
	margin-top: .4rem;
	color: var(--gray-600);
	font-size: var(--fs-base);
	max-width: 62ch;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--blue-600);
	font-weight: 600;
	font-size: var(--fs-base);
	white-space: nowrap;
	transition: gap var(--speed) var(--ease), color var(--speed) var(--ease);
}
.link-arrow:hover { color: var(--blue-700); gap: .6rem; }
.link-arrow--sm { font-size: var(--fs-sm); margin-top: .6rem; }

/* ---- buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: var(--fs-base);
	border: 1.5px solid transparent;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--blue-700); box-shadow: var(--shadow-md); }
.btn--light { background: var(--white); color: var(--navy-700); box-shadow: var(--shadow-xs); }
.btn--light:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn--light:active { transform: translateY(0); }
.btn--outline { background: transparent; border-color: var(--gray-300); color: var(--gray-700); }
.btn--outline:hover { border-color: var(--blue-500); color: var(--blue-600); background: var(--blue-50); }
.btn--sm { padding: .55rem 1.1rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn--orange { background: var(--orange-500); color: var(--white); }
.btn--orange:hover { background: var(--orange-600); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- badges ---- */
.badge {
	display: inline-flex;
	align-items: center;
	padding: .25rem .6rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.4;
}
.badge--blue { background: var(--blue-100); color: var(--blue-700); }
.badge--orange { background: var(--orange-50); color: var(--orange-600); }
.badge--green { background: var(--green-50); color: var(--green-700); }
.badge--pink { background: var(--pink-50); color: var(--pink-600); }
.badge--red { background: var(--red-50); color: var(--red-600); }
.badge--live { background: #e11d48; color: var(--white); }

/* ==========================================================================
   Chrome: utility bar, header, navigation, drawer, footer
   ========================================================================== */

.skip-link {
	position: absolute;
	left: .5rem;
	top: .5rem;
	z-index: 100;
	background: var(--white);
	color: var(--navy-800);
	font-weight: 700;
	padding: .75rem 1.25rem;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	transform: translateY(-150%);
	transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.topbar { background: var(--navy-900); color: #d5e4f8; font-size: var(--fs-sm); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem; gap: 1rem; }
.topbar__left { display: flex; align-items: center; gap: 1.25rem; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.topbar a { transition: color var(--speed) var(--ease); }
.topbar a:hover { color: var(--white); }
.topbar__right { display: none; align-items: center; gap: 1.25rem; }
@media (min-width: 768px) { .topbar__right { display: flex; } }

.site-header {
	background: var(--white);
	box-shadow: var(--shadow-xs);
	position: sticky;
	top: 0;
	z-index: 40;
	transition: box-shadow var(--speed) var(--ease);
}
/* Lifts off the page once you scroll, so the header reads as a layer above
   the content rather than a band welded to it. Toggled by courier.js. */
.site-header.is-stuck { box-shadow: var(--shadow-lg); }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }

.brand { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.brand__mark {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--blue-600); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}
.brand__mark .icon { width: 1.4em; height: 1.4em; }
/* Set in WordPress > Appearance > Customize > Site Identity, which also feeds
   the two custom properties below. The values here are the fallbacks: what the
   static pages use, and what WordPress falls back to before either is changed.
   Height drives the size; max-width only bites on logos wider than they are
   tall, so a wide wordmark shrinks rather than stretching the header band. */
.brand__logo {
	display: block; width: auto;
	height: var(--brand-logo-h, 48px);
	max-width: var(--brand-logo-maxw, 240px);
	object-fit: contain;
}
/* A phone has no room for a 240px logo beside the burger. */
@media (max-width: 599px) { .brand__logo { max-width: 45vw; } }
.brand__name { font-weight: 800; font-size: var(--fs-md); line-height: 1.2; letter-spacing: -.01em; color: var(--navy-800); }
.brand__tagline { display: none; font-size: var(--fs-xs); color: var(--gray-500); }
@media (min-width: 600px) { .brand__tagline { display: block; } }

.main-nav { display: none; }
@media (min-width: 1280px) {
	.main-nav { display: block; }
	/* .container caps at 1280px, so the nav row budget is a fixed ~778px at every
	   desktop width - it does not grow with the viewport. The nine current items
	   at --fs-sm measure ~760px, leaving only ~50px spare. A tenth item overflows
	   and clips the Contact Us button, so adding one needs a shorter label or a
	   smaller type size - a wider screen will not help. */
	.main-nav ul { display: flex; align-items: center; gap: 1.05rem; }
	.main-nav a {
		display: block;
		font-size: var(--fs-sm);
		white-space: nowrap;
		font-weight: 600;
		color: var(--gray-700);
		padding-block: .3rem;
		border-bottom: 2px solid transparent;
		transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
	}
	.main-nav a:hover { color: var(--blue-600); border-color: var(--blue-200); }
	.main-nav .current-menu-item > a { color: var(--blue-600); border-color: var(--blue-600); }
}

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-actions__icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--gray-100); color: var(--gray-700);
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.header-actions__icon-btn:hover { background: var(--blue-50); color: var(--blue-600); }
.header-actions .btn { display: none; }
@media (min-width: 480px) { .header-actions .btn { display: inline-flex; } }

.nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; background: var(--gray-100); border-radius: var(--radius-sm);
	color: var(--navy-800);
	transition: background-color var(--speed) var(--ease);
}
.nav-toggle:hover { background: var(--blue-50); }
@media (min-width: 1280px) { .nav-toggle { display: none; } }

/* ---- mobile drawer ---- */
.mobile-nav { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.mobile-nav.is-open { visibility: visible; }
.mobile-nav__backdrop {
	position: absolute; inset: 0; background: rgba(7, 26, 48, .55);
	opacity: 0; transition: opacity .2s var(--ease);
}
.mobile-nav__panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 85vw);
	background: var(--white); box-shadow: var(--shadow-xl);
	padding: 1.25rem; overflow-y: auto;
	transform: translateX(100%); transition: transform .25s var(--ease);
	display: flex; flex-direction: column; gap: 1.5rem;
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__close {
	width: 36px; height: 36px; background: var(--gray-100); border-radius: var(--radius-sm);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color var(--speed) var(--ease);
}
.mobile-nav__close:hover { background: var(--gray-200); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
	display: block; padding: .8rem .25rem; font-weight: 600; color: var(--gray-700);
	border-bottom: 1px solid var(--gray-100);
	transition: color var(--speed) var(--ease);
}
.mobile-nav a:hover { color: var(--blue-600); }
.mobile-nav .current-menu-item > a { color: var(--blue-600); }
.mobile-nav__foot { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; font-size: var(--fs-base); color: var(--gray-600); }
.mobile-nav__foot a { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 1280px) { .mobile-nav { display: none; } }
body.nav-open { overflow: hidden; }

/* ---- breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.75); transition: color var(--speed) var(--ease); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb__current { color: var(--white); font-weight: 600; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	background:
		radial-gradient(1000px 420px at 12% -10%, rgba(37, 99, 235, .38), transparent 62%),
		linear-gradient(135deg, var(--navy-700), var(--navy-800) 58%, var(--navy-900));
	color: var(--white);
	overflow: hidden;
	padding-block: 3rem 3.5rem;
}
@media (min-width: 1024px) { .hero { padding-block: 4rem 4.5rem; } }
.hero__pattern {
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
	        mask-image: linear-gradient(to bottom, black, transparent 85%);
	opacity: .5;
	pointer-events: none;
}
.hero__inner { position: relative; display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr .85fr; } }
.hero__title {
	font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.75rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-wrap: balance;
}
.hero__subtitle { margin-top: 1rem; max-width: 46ch; color: rgba(255,255,255,.85); font-size: var(--fs-lg); line-height: 1.6; }
.hero__art { display: none; }
@media (min-width: 900px) { .hero__art { display: block; } }
.hero-illustration { width: 100%; height: auto; }

.search-bar {
	margin-top: 1.75rem;
	display: flex;
	align-items: center;
	background: var(--white);
	border-radius: var(--radius-md);
	padding: .4rem .4rem .4rem 1rem;
	gap: .5rem;
	max-width: 560px;
	box-shadow: var(--shadow-lg);
	transition: box-shadow var(--speed) var(--ease);
}
.search-bar:focus-within { box-shadow: var(--shadow-lg), var(--ring); }
.search-bar__icon { color: var(--gray-500); }
.search-bar__input { flex: 1; border: none; padding: .6rem 0; min-width: 0; color: var(--gray-900); background: transparent; }
/* Outline is suppressed here only because the wrapper shows the focus ring above. */
.search-bar__input:focus { outline: none; }
.search-bar__input::placeholder { color: var(--gray-500); }
.search-bar__submit { flex-shrink: 0; }
.search-bar--light { background: var(--gray-50); box-shadow: none; border: 1px solid var(--gray-200); }
.search-bar--center { margin-inline: auto; }

/* 2rem of column gap pushed the fourth badge onto a second row inside the
   hero's 1.15fr column. 1.35rem keeps all four on one line at 1280px and still
   wraps cleanly on narrow screens. */
.hero-features { display: flex; flex-wrap: wrap; gap: .85rem 1.35rem; margin-top: 2rem; }
.hero-features__item { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-base); font-weight: 600; color: rgba(255,255,255,.92); }
.hero-features__item .icon { color: var(--white); opacity: .9; }

.inline-checks { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.inline-checks li { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-base); font-weight: 600; color: rgba(255,255,255,.92); }
.inline-checks .icon { color: #4ade80; }

/* ==========================================================================
   Cards and content blocks
   ========================================================================== */

/* A single hover treatment shared by every card-like surface, so the whole
   page responds with one consistent gesture. */
.icon-card, .faq-mini, .story-mini, .news-card, .marketplace-card,
.country-card, .org-card, .doc-card, .faq-tab {
	transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease),
	            border-color var(--speed) var(--ease);
}

.icon-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}
.icon-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--blue-200); }
.icon-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: var(--radius-md);
	background: var(--blue-50); color: var(--blue-600);
	margin-bottom: 1rem;
}
.icon-card--orange .icon-card__icon { background: var(--orange-50); color: var(--orange-600); }
.icon-card--green .icon-card__icon { background: var(--green-50); color: var(--green-700); }
.icon-card--pink .icon-card__icon { background: var(--pink-50); color: var(--pink-600); }
.icon-card--navy .icon-card__icon { background: var(--blue-100); color: var(--navy-700); }
.icon-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--navy-800); margin-bottom: .4rem; letter-spacing: -.01em; }
.icon-card__desc { font-size: var(--fs-base); color: var(--gray-600); }

.list-card {
	background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 1.25rem;
}
.list-card__title { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--navy-800); margin-bottom: .9rem; font-size: var(--fs-base); }
.list-card__title .icon { color: var(--blue-600); }
/* nowrap is load-bearing. Flex wrapping is decided before flex shrinking, so
   with flex-wrap:wrap a long label claimed the whole line on its max-content
   width and pushed the trailing .icon--end chevron onto a line of its own -
   every link in the Home knowledge lists rendered three lines tall. With
   nowrap the label shrinks and wraps its own text instead, and the chevron
   stays pinned right. Only the rows that carry a .list-card__desc need a
   second line, so they opt back into wrapping below. */
.list-card ul li a {
	display: flex; align-items: center; justify-content: flex-start; gap: .6rem; flex-wrap: nowrap;
	padding-block: .6rem; font-size: var(--fs-base); color: var(--gray-700);
	border-bottom: 1px solid var(--gray-100);
	transition: color var(--speed) var(--ease);
}
.list-card ul li:last-child a { border-bottom: none; }
.list-card ul li a:hover { color: var(--blue-600); }
.list-card ul li a .icon { color: var(--gray-400); width: .8em; height: .8em; flex-shrink: 0; }
.list-card ul li a > .icon:first-child { color: var(--blue-600); width: 1em; height: 1em; }
.list-card ul li a .icon--end { margin-left: auto; }
.list-card ul li a:hover .icon--end { color: var(--blue-600); }
/* This also carries .btn. display:block beat .btn's inline-flex, which dropped
   the block-level .icon SVG onto its own line at the left edge while the label
   stayed centred. Keep it flex and centre both together. */
.list-card__cta { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: 1rem; }
.list-card ul li a:has(.list-card__desc) { flex-wrap: wrap; row-gap: 0; }
.list-card__label { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.list-card__desc { display: block; font-size: var(--fs-xs); color: var(--gray-500); font-weight: 400; width: 100%; margin-top: .15rem; }

/* ---- steps ---- */
.steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 0; }
.step { flex: 1 1 140px; text-align: center; padding-inline: .5rem; }
.step__badge {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--blue-600); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; margin: 0 auto .75rem;
	box-shadow: var(--shadow-sm);
}
.step__title { font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); margin-bottom: .3rem; }
.step__desc { font-size: var(--fs-sm); color: var(--gray-600); }
.step__connector { flex: 0 0 auto; color: var(--gray-300); display: none; align-self: center; margin-top: -2.5rem; }
@media (min-width: 700px) {
	.step__connector { display: block; }
	/* flex-basis 140px x 4 steps + 3 connectors overflows a half-width panel, so
	   step 4 dropped to a row of its own. Share the row instead of wrapping it. */
	.steps { flex-wrap: nowrap; }
	.step { flex: 1 1 0; min-width: 0; }
}

/* ---- panel ---- */
/* A panel sitting beside a taller grid sibling gets stretched. Spend that slack
   above the closing call to action instead of leaving a void underneath it -
   the Home community panel was carrying 210px of empty white, the MSME journey
   panel 296px, which reads as a broken box rather than as breathing room. */
.panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; }
.panel > .community-mini:last-child { flex: 1; }
/* The closing CTA sits on the panel floor: the element above it soaks up the
   slack, and the CTA keeps its own clearance. Doing this the other way round -
   margin-top:auto on the CTA itself - loses that clearance whenever the panel
   is exactly as tall as its content. */
.panel > *:nth-last-child(2) { margin-bottom: auto; }
.panel__cta { margin-top: 1rem; }
.panel__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); font-weight: 700; color: var(--navy-800); margin-bottom: .3rem; letter-spacing: -.01em; }
.panel__title .icon { color: var(--blue-600); }
.panel__subtitle { font-size: var(--fs-base); color: var(--gray-600); margin-bottom: 1.25rem; }

.tool-row { display: flex; align-items: flex-start; gap: .75rem; padding-block: .85rem; border-bottom: 1px solid var(--gray-100); }
.tool-row:last-of-type { border-bottom: none; }
.tool-row__icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tool-row__title { font-weight: 700; font-size: var(--fs-base); color: var(--navy-800); }
.tool-row__title a { transition: color var(--speed) var(--ease); }
.tool-row__title a:hover { color: var(--blue-600); }
.tool-row__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-top: .1rem; }

/* ---- feature row ---- */
.feature-row { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 640px) { .feature-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
	.feature-row--7 { grid-template-columns: repeat(7, 1fr); }
	.feature-row--6 { grid-template-columns: repeat(6, 1fr); }
	.feature-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.feature-row__icon {
	width: 48px; height: 48px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.feature-row > *:hover .feature-row__icon { background: var(--blue-600); color: var(--white); }
.feature-row__title { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }
.feature-row__desc { font-size: var(--fs-xs); color: var(--gray-500); margin-top: .2rem; }

/* ---- success stories ---- */
.story-list { display: flex; flex-direction: column; gap: 1rem; }
.story-mini { display: flex; gap: .9rem; align-items: flex-start; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1rem; }
.story-mini:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.story-mini__thumb {
	width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm);
	background: var(--orange-50); color: var(--orange-600);
	display: flex; align-items: center; justify-content: center;
}
.story-mini__title { display: block; font-weight: 700; color: var(--navy-800); font-size: var(--fs-base); }
.story-mini__desc { display: block; font-size: var(--fs-sm); color: var(--gray-600); margin: .3rem 0 .5rem; line-height: 1.5; }

.flag-chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 18px; border-radius: 3px; background: var(--gray-100); color: var(--gray-700);
	font-size: .6rem; font-weight: 800; flex-shrink: 0;
}

.check-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-base); color: var(--gray-700); padding-block: .5rem; }
.check-list .icon { color: var(--green-600); margin-top: .1rem; flex-shrink: 0; }

.country-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.25rem; text-align: left; }
.country-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue-200); }
.country-card__flag.flag-chip { width: 34px; height: 24px; font-size: .68rem; margin-bottom: .85rem; }
.country-card__name { font-weight: 700; color: var(--navy-800); font-size: var(--fs-base); margin-bottom: .35rem; }
.country-card__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: .6rem; min-height: 3.4em; }
.country-card--all { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--blue-600); }

/* ---- carousel ---- */
.carousel { position: relative; }
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.carousel__nav { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.carousel__btn {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gray-300); background: var(--white);
	display: flex; align-items: center; justify-content: center; color: var(--gray-600);
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
.carousel__btn:hover { border-color: var(--blue-500); color: var(--blue-600); background: var(--blue-50); }
.carousel__track {
	display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: .5rem; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; flex: 0 0 220px; }

/* ---- news / guide card ---- */
.news-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--blue-200); }
.news-card__thumb { height: 110px; display: flex; align-items: center; justify-content: center; position: relative; background: var(--blue-50); }
.news-card__thumb .icon { width: 2.4rem; height: 2.4rem; opacity: .32; color: var(--blue-600); }
.news-card__badge { position: absolute; top: .75rem; left: .75rem; }
.news-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.news-card__date { font-size: var(--fs-xs); color: var(--gray-500); margin-bottom: .4rem; display: block; }
.news-card__title { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); margin-bottom: .4rem; line-height: 1.4; transition: color var(--speed) var(--ease); }
.news-card:hover .news-card__title { color: var(--blue-600); }
.news-card__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: .7rem; }

/* ---- CTA banner ---- */
.cta-banner {
	background:
		radial-gradient(700px 260px at 85% 120%, rgba(37, 99, 235, .40), transparent 60%),
		var(--navy-800);
	color: var(--white);
	padding-block: 2.5rem;
}
.cta-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.cta-banner__icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,.14); color: var(--white);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cta-banner__text { flex: 1 1 260px; }
.cta-banner__text h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.cta-banner__text p { font-size: var(--fs-base); color: rgba(255,255,255,.8); margin-top: .2rem; }

/* ---- newsletter ---- */
.newsletter { background: var(--blue-50); padding-block: 2.5rem; }
.newsletter__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.newsletter__icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--blue-100); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.newsletter__text { flex: 1 1 240px; }
.newsletter__text h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--navy-800); letter-spacing: -.01em; }
.newsletter__text p { font-size: var(--fs-base); color: var(--gray-600); margin-top: .15rem; }
.newsletter__form { display: flex; gap: .6rem; flex: 1 1 340px; flex-wrap: wrap; }
.newsletter__form input {
	flex: 1 1 200px; padding: .7rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--gray-300);
	background: var(--white);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.newsletter__form input:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
.form-success { width: 100%; color: var(--green-700); font-size: var(--fs-base); font-weight: 600; margin-top: .5rem; }

/* ---- forms ---- */
.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-field label { font-size: var(--fs-base); font-weight: 600; color: var(--gray-700); }
.form-field input, .form-field select, .form-field textarea {
	padding: .7rem .9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); width: 100%;
	background: var(--white);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
	outline: none; border-color: var(--blue-500); box-shadow: var(--ring);
}
.form-note { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--gray-500); margin-top: .5rem; }

/* ---- footer ---- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.82); }
.footer-main { padding-block: 3.5rem 2rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }
.footer-about .brand__name, .footer-about .brand__mark { color: var(--white); }
.footer-about p { font-size: var(--fs-base); margin-top: .9rem; line-height: 1.65; max-width: 40ch; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social a {
	width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
	display: flex; align-items: center; justify-content: center;
	transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.footer-social a:hover { background: var(--blue-600); transform: translateY(-2px); }
.footer-col h4 { color: var(--white); font-size: var(--fs-base); font-weight: 700; margin-bottom: 1rem; letter-spacing: .01em; }
.footer-col ul li { margin-bottom: .65rem; font-size: var(--fs-base); }
.footer-col ul li a { transition: color var(--speed) var(--ease); }
.footer-col ul li a:hover { color: var(--white); }
.footer-contact li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-base); margin-bottom: .8rem; }
.footer-contact .icon { color: var(--blue-500); margin-top: .15rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.25rem; font-size: var(--fs-sm); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.footer-bottom ul { display: flex; gap: 1.25rem; }
.footer-bottom a { transition: color var(--speed) var(--ease); }
.footer-bottom a:hover { color: var(--white); }

/* ---- utility ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Page-specific blocks
   ========================================================================== */

/* ---- Home: community mini cards ---- */
.community-mini { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .community-mini { grid-template-columns: repeat(3, 1fr); } }
.community-mini__item {
	text-align: center; padding: 1.25rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
	display: flex; flex-direction: column;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.community-mini__item:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.community-mini__icon {
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem;
	background: var(--blue-50); color: var(--blue-600);
}
.community-mini__icon--green { background: var(--green-50); color: var(--green-700); }
.community-mini__icon--blue { background: var(--blue-50); color: var(--blue-600); }
.community-mini__icon--orange { background: var(--orange-50); color: var(--orange-600); }
.community-mini__item h4 { font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); margin-bottom: .3rem; }
.community-mini__item p { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: .9rem; flex: 1; }

/* ---- Home: FAQ teaser ---- */
.faq-mini {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
	padding: 1.25rem 1rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
}
.faq-mini:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.faq-mini__icon {
	width: 44px; height: 44px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center;
}
.faq-mini__title { font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); }
.faq-mini__count { font-size: var(--fs-xs); color: var(--gray-500); }

/* ---- Home: latest news list ---- */
.news-mini-list { display: flex; flex-direction: column; gap: .9rem; }
.news-mini { display: flex; gap: .8rem; align-items: flex-start; }
.news-mini__thumb {
	width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm);
	background: var(--blue-50); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.news-mini:hover .news-mini__thumb { background: var(--blue-600); color: var(--white); }
.news-mini__title { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--navy-800); line-height: 1.4; transition: color var(--speed) var(--ease); }
.news-mini:hover .news-mini__title { color: var(--blue-600); }
.news-mini__date { display: block; font-size: var(--fs-xs); color: var(--gray-500); margin-top: .25rem; }

/* ---- Home: warehouse directory ---- */
.warehouse-filters { display: flex; gap: .6rem; margin-bottom: 1.1rem; }
.warehouse-filters select {
	flex: 1; padding: .6rem .75rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white);
	min-width: 0;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.warehouse-filters select:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
.warehouse-list li {
	display: flex; align-items: center; gap: .6rem; font-size: var(--fs-base); color: var(--gray-700);
	padding-block: .55rem; border-bottom: 1px solid var(--gray-100);
}
.warehouse-list li:last-child { border-bottom: none; }
.warehouse-list li strong { margin-left: auto; color: var(--navy-800); font-size: var(--fs-sm); font-weight: 700; }

/* ---- Marketplace ---- */
.marketplace-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; }
.marketplace-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--blue-200); }
.marketplace-card__wordmark { font-size: 1.35rem; font-weight: 800; margin-bottom: .75rem; letter-spacing: -.02em; }
.marketplace-card__badges { display: flex; gap: .4rem; justify-content: center; margin-bottom: .85rem; flex-wrap: wrap; }
.marketplace-card__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: .85rem; min-height: 3.2em; }
.browse-grid .icon-card { text-align: center; }
.browse-grid .icon-card__icon { margin-inline: auto; }
.help-box { text-align: center; }
.help-avatars { display: flex; justify-content: center; margin-bottom: .85rem; }
.help-avatars span {
	width: 42px; height: 42px; border-radius: 50%; background: var(--blue-100); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); margin-left: -12px;
}
.help-avatars span:first-child { margin-left: 0; }
.help-box__stat { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); margin-bottom: 1rem; }

/* ---- shared card helpers ---- */
.icon-card .check-list { margin: .75rem 0; text-align: left; }
.icon-card { display: flex; flex-direction: column; }
.icon-card .link-arrow { margin-top: auto; }

/* ---- News & Documents ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; max-width: 900px; }
.filter-bar select, .filter-bar input[type="date"] {
	flex: 1 1 150px; padding: .65rem .9rem; border-radius: var(--radius-sm); border: none;
	font-size: var(--fs-base); background: var(--white); color: var(--gray-700);
}
.filter-bar select:focus-visible, .filter-bar input[type="date"]:focus-visible { outline: none; box-shadow: var(--ring); }
.doc-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.1rem; }
.doc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue-200); }
.doc-card__icon {
	width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center; margin-bottom: .75rem;
}
.doc-card__title { font-weight: 700; font-size: var(--fs-base); color: var(--navy-800); margin-bottom: .2rem; }
.doc-card__meta { font-size: var(--fs-xs); color: var(--gray-500); margin-bottom: .85rem; display: block; }
.circular-list li { display: flex; align-items: flex-start; gap: .6rem; padding-block: .75rem; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-base); color: var(--gray-700); }
.circular-list li:last-child { border-bottom: none; }
.circular-list__icon { color: var(--blue-600); margin-top: .15rem; flex-shrink: 0; }
.circular-list__date { display: block; font-size: var(--fs-xs); color: var(--gray-500); margin-top: .2rem; }
.alert { display: flex; gap: .7rem; padding: 1rem; border-radius: var(--radius-md); margin-bottom: .9rem; border-left: 4px solid; }
.alert--warning { background: var(--orange-50); border-color: var(--orange-500); }
.alert--info { background: var(--blue-50); border-color: var(--blue-500); }
.alert .icon { flex-shrink: 0; }
.alert--warning .icon { color: var(--orange-600); }
.alert--info .icon { color: var(--blue-600); }
.alert p { font-size: var(--fs-base); color: var(--gray-700); }
.alert__date { display: block; font-size: var(--fs-xs); color: var(--gray-500); margin-top: .3rem; }

/* ---- Export Knowledge ---- */
.category-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; border-top: 4px solid var(--blue-500); display: flex; flex-direction: column; }
.category-card--advanced { border-top-color: var(--orange-500); }
.category-card--marketplace { border-top-color: var(--pink-600); }
.category-card__number {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--blue-50); color: var(--blue-600); font-weight: 800; font-size: var(--fs-sm); margin-bottom: .85rem;
}
.category-card--advanced .category-card__number { background: var(--orange-50); color: var(--orange-600); }
.category-card--marketplace .category-card__number { background: var(--pink-50); color: var(--pink-600); }
.category-card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--navy-800); margin-bottom: .35rem; letter-spacing: -.01em; }
.category-card__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: 1rem; }
.category-card ul { flex: 1; margin-bottom: 1rem; }
.category-card ul li a {
	display: flex; align-items: center; gap: .55rem; justify-content: flex-start;
	padding-block: .5rem; font-size: var(--fs-base); color: var(--gray-700); border-bottom: 1px solid var(--gray-100);
	transition: color var(--speed) var(--ease);
}
.category-card ul li:last-child a { border-bottom: none; }
.category-card ul li a:hover { color: var(--blue-600); }
.category-card ul li a .icon { flex-shrink: 0; color: var(--gray-400); width: .8em; height: .8em; }
.category-card ul li a .icon--end { margin-left: auto; }
.webinar-item { display: flex; align-items: center; gap: .9rem; padding-block: 1rem; border-bottom: 1px solid var(--gray-100); }
.webinar-item:last-child { border-bottom: none; }
.webinar-item__icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.webinar-item__title { font-weight: 700; font-size: var(--fs-base); color: var(--navy-800); margin-bottom: .2rem; }
.webinar-item__meta { font-size: var(--fs-xs); color: var(--gray-500); }
.webinar-item .btn { margin-left: auto; flex-shrink: 0; }
.download-item { display: flex; align-items: center; gap: .6rem; padding-block: .65rem; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-base); color: var(--gray-700); }
.download-item:last-child { border-bottom: none; }
.download-item .icon:first-child { color: var(--blue-600); }
.download-item a { margin-left: auto; color: var(--gray-500); flex-shrink: 0; transition: color var(--speed) var(--ease); }
.download-item a:hover { color: var(--blue-600); }

/* ---- Export Community ---- */
.community-card { border-radius: var(--radius-lg); padding: 2rem; color: var(--white); }
.community-card--whatsapp { background: linear-gradient(135deg, #25d366, #128c4a); }
.community-card--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.community-card__icon {
	width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.2);
	display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.community-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
.community-card p { font-size: var(--fs-base); opacity: .94; margin-bottom: 1rem; }
.community-card .check-list li { color: rgba(255,255,255,.96); }
.community-card .check-list .icon { color: var(--white); }
.community-card .btn { margin-top: 1.1rem; }
.community-card--whatsapp .btn { color: #0f7a41; }
.community-card--instagram .btn { color: #a81c63; }
.past-webinar { display: flex; align-items: center; gap: .8rem; padding-block: .85rem; border-bottom: 1px solid var(--gray-100); }
.past-webinar:last-child { border-bottom: none; }
.past-webinar__icon { color: var(--blue-600); flex-shrink: 0; }
.past-webinar__title { font-size: var(--fs-base); font-weight: 600; color: var(--navy-800); }
.past-webinar__duration { margin-left: auto; font-size: var(--fs-sm); color: var(--gray-500); flex-shrink: 0; }
.org-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; }
.org-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue-200); }
.org-card__badge {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--blue-50); color: var(--blue-600); font-weight: 800; font-size: var(--fs-xs); margin-bottom: .85rem;
}
.org-card__name { font-size: var(--fs-sm); color: var(--gray-600); margin-bottom: 1.1rem; min-height: 2.6em; }

/* ---- FAQ ---- */
.faq-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.faq-tab { flex: 1 1 160px; display: flex; align-items: center; gap: .75rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.faq-tab:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.faq-tab__icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-tab__title { font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); }
.faq-tab__count { font-size: var(--fs-xs); color: var(--gray-500); }

.accordion-item { border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: .75rem; overflow: hidden; transition: border-color var(--speed) var(--ease); }
.accordion-item.is-open { border-color: var(--blue-200); }
.accordion-item__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left;
	padding: 1rem 1.25rem; background: var(--white); font-weight: 700; font-size: var(--fs-md); color: var(--navy-800);
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.accordion-item__q:hover { background: var(--gray-50); }
.accordion-item__q .icon { color: var(--gray-400); flex-shrink: 0; transition: transform .2s var(--ease), color var(--speed) var(--ease); }
.accordion-item.is-open .accordion-item__q { background: var(--blue-50); color: var(--blue-700); }
.accordion-item.is-open .accordion-item__q .icon { transform: rotate(45deg); color: var(--blue-600); }
/* 60rem clears the longest answer with room to spare; the original 400px
   clipped anything longer than about six lines on a narrow screen. */
.accordion-item__a { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), padding .3s var(--ease); font-size: var(--fs-base); color: var(--gray-600); line-height: 1.65; }
.accordion-item.is-open .accordion-item__a { padding: 0 1.25rem 1.1rem; max-height: 60rem; }
.faq-load-more { display: block; margin: 1rem auto 0; }

.sidebar-box { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.sidebar-box h3 { font-size: var(--fs-md); font-weight: 700; color: var(--navy-800); margin-bottom: 1rem; }
.sidebar-box ul li a { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem; font-size: var(--fs-base); color: var(--gray-700); border-bottom: 1px solid var(--gray-100); transition: color var(--speed) var(--ease); }
.sidebar-box ul li:last-child a { border-bottom: none; }
.sidebar-box ul li a:hover { color: var(--blue-600); }
.sidebar-box p { font-size: var(--fs-base); color: var(--gray-600); margin-bottom: 1rem; }
.sidebar-contact-item { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; font-size: var(--fs-base); color: var(--gray-700); }
.sidebar-contact-item .icon { color: var(--blue-600); flex-shrink: 0; }

/* ---- prose (plain page copy, e.g. About Us) ---- */
.prose p { margin-bottom: 1rem; color: var(--gray-700); max-width: 70ch; }
.prose p:last-child { margin-bottom: 0; }

/* ---- toast ---- */
.courier-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: min(92vw, 30rem);
	padding: .85rem 1.25rem;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--white);
	background: var(--navy-800);
	opacity: 0;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.courier-toast--success { background: var(--green-700); }
.courier-toast--error { background: var(--red-600); }
.courier-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.courier-toast__close {
	color: inherit;
	opacity: .8;
	padding: 0 0 0 .35rem;
	font-size: 1.1rem;
	line-height: 1;
	transition: opacity var(--speed) var(--ease);
}
.courier-toast__close:hover { opacity: 1; }

/* ---- print ---- */
@media print {
	.topbar, .site-header, .mobile-nav, .skip-link, .cta-banner, .newsletter, .carousel__nav { display: none !important; }
	.hero { background: none !important; color: #000 !important; }
	.hero__title, .breadcrumb__current { color: #000 !important; }
	body { font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   Hub pages (Export Guides, Government Schemes, Document Support, ...)
   A centred banner with an eyebrow pill and a search field, then a card grid.
   ========================================================================== */

.hub-hero {
	background: linear-gradient(180deg, var(--gray-50), var(--white));
	border-bottom: 1px solid var(--gray-200);
	padding-block: 3rem 3.5rem;
	text-align: center;
}
@media (min-width: 1024px) { .hub-hero { padding-block: 4rem 4.5rem; } }
.hub-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .4rem;
	background: var(--blue-50); color: var(--blue-700);
	border: 1px solid var(--blue-100);
	padding: .35rem .85rem; border-radius: var(--radius-pill);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	margin-bottom: 1.1rem;
}
.hub-hero__title {
	font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
	font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
	color: var(--navy-800); text-wrap: balance;
}
.hub-hero__subtitle {
	margin: 1rem auto 0; max-width: 62ch;
	color: var(--gray-600); font-size: var(--fs-lg); line-height: 1.6;
}
.hub-hero .search-bar { margin: 1.75rem auto 0; box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); }
.hub-hero .breadcrumb { justify-content: center; color: var(--gray-500); margin-bottom: 1.25rem; }
.hub-hero .breadcrumb a { color: var(--gray-500); }
.hub-hero .breadcrumb a:hover { color: var(--blue-600); }
.hub-hero .breadcrumb__current { color: var(--navy-800); }

/* ---- CTA band closing a hub page ---- */
.cta-band {
	background: linear-gradient(135deg, var(--blue-50), #e7eefc);
	border-radius: var(--radius-lg);
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.cta-band__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy-800); text-wrap: balance; }
.cta-band__subtitle { margin: .75rem auto 1.5rem; max-width: 60ch; color: var(--gray-600); font-size: var(--fs-base); }

/* ==========================================================================
   Resource groups (Find Buyers Internationally)
   Label and description on the left, a list of outbound links on the right.
   ========================================================================== */

.resource-group {
	display: grid; gap: 1.25rem; grid-template-columns: 1fr;
	background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
	padding: 1.5rem; margin-bottom: 1.25rem;
}
@media (min-width: 900px) { .resource-group { grid-template-columns: 18rem 1fr; gap: 2rem; align-items: start; } }
.resource-group__head { display: flex; gap: .9rem; align-items: flex-start; }
.resource-group__icon {
	width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-md);
	background: var(--blue-50); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center;
}
.resource-group__title { font-size: var(--fs-lg); font-weight: 700; color: var(--navy-800); letter-spacing: -.01em; }
.resource-group__desc { font-size: var(--fs-sm); color: var(--gray-600); margin-top: .3rem; }
.resource-group__list { display: flex; flex-direction: column; }
.resource-link {
	display: flex; align-items: center; gap: .85rem;
	padding: .8rem .6rem; border-radius: var(--radius-sm);
	border-bottom: 1px solid var(--gray-100);
	transition: background-color var(--speed) var(--ease);
}
.resource-link:last-child { border-bottom: none; }
.resource-link:hover { background: var(--blue-50); }
.resource-link__mark {
	width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm);
	background: var(--gray-100); color: var(--gray-700);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: var(--fs-xs);
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.resource-link:hover .resource-link__mark { background: var(--blue-600); color: var(--white); }
.resource-link > span:not([class]) { flex: 1; min-width: 0; }
.resource-link__name { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--navy-800); }
.resource-link__desc { display: block; font-size: var(--fs-sm); color: var(--gray-600); margin-top: .1rem; }
.resource-link__go { margin-left: auto; color: var(--gray-400); flex-shrink: 0; transition: color var(--speed) var(--ease), transform var(--speed) var(--ease); }
.resource-link:hover .resource-link__go { color: var(--blue-600); transform: translateX(3px); }

/* ==========================================================================
   Workflow strip (fulfillment: inventory to delivery)
   ========================================================================== */

.workflow { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 768px) { .workflow { grid-template-columns: repeat(5, 1fr); } }
.workflow__num {
	width: 30px; height: 30px; border-radius: 50%; margin: 0 auto .75rem;
	background: var(--blue-600); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-size: var(--fs-xs); font-weight: 800;
}
.workflow__icon {
	width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .7rem;
	background: var(--white); border: 1px solid var(--gray-200); color: var(--blue-600);
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-xs);
}
.workflow__label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }

/* ---- returns flow (arrow-separated row) ---- */
.flow-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .5rem 1rem; }
.flow-row__step { flex: 1 1 150px; max-width: 200px; text-align: center; }
.flow-row__icon {
	width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .7rem;
	background: var(--green-50); color: var(--green-700); border: 1px solid #cdeed9;
	display: flex; align-items: center; justify-content: center;
}
.flow-row__label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }
.flow-row__arrow { align-self: center; color: var(--gray-300); flex: 0 0 auto; margin-top: -1.5rem; display: none; }
@media (min-width: 768px) { .flow-row__arrow { display: block; } }

/* ==========================================================================
   Data table (global warehousing network)
   ========================================================================== */

.data-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 34rem; }
.data-table th, .data-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--gray-100); }
.data-table th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); background: var(--gray-50); }
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 700; color: var(--navy-800); }
.data-table .flag-chip { margin-right: .5rem; vertical-align: middle; }

/* ==========================================================================
   Language switcher
   ========================================================================== */

.lang { position: relative; }
.lang__btn {
	display: inline-flex; align-items: center; gap: .4rem; color: inherit;
	font-size: inherit; font-family: inherit;
}
.lang__menu {
	position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70;
	background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg); padding: .35rem; min-width: 9.5rem;
	display: none;
}
.lang__menu[data-open="true"] { display: block; }
.lang__option {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
	padding: .5rem .7rem; border-radius: var(--radius-sm);
	font-size: var(--fs-base); font-weight: 600; color: var(--gray-700); text-align: left;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.lang__option:hover { background: var(--blue-50); color: var(--blue-700); }
.lang__option[aria-selected="true"] { color: var(--blue-700); }

/* ---- GTranslate ----
   The plugin injects its switcher into .gtranslate_wrapper (set in
   Settings > GTranslate > "Wrapper selector CSS"). Switcher colours are set in
   the plugin's own Color options panel; the rules below only handle fit and
   alignment so the injected widget matches the topbar rhythm. */
.gtranslate_wrapper { display: inline-flex; align-items: center; line-height: 1; }
.gtranslate_wrapper .gt_float_switcher {
	font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
	background: transparent; box-shadow: none; border-radius: var(--radius-sm);
}
.gtranslate_wrapper .gt_float_switcher img { vertical-align: middle; }
/* The injected dropdown has to clear the sticky header below it. */
.gtranslate_wrapper .gt_float_switcher .gt_options { z-index: 70; max-height: 22rem; }

/* Fallback styling for the plain <select> widget look. */
.gtranslate_wrapper .gt_selector {
	font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
	color: inherit; background: transparent;
	border: 1px solid rgba(213, 228, 248, .35); border-radius: var(--radius-sm);
	padding: .2rem .5rem;
}
.gtranslate_wrapper .gt_selector option { color: var(--navy-800); background: var(--white); }

/* Google's own translate bar is an iframe that shoves <body> down by ~40px,
   which breaks the sticky header. Suppress it and pin the body back. */
.goog-te-banner-frame,
.goog-te-gadget-icon,
#goog-gt-tt { display: none !important; }
body { top: 0 !important; }

/* ==========================================================================
   FAQ: popular questions panel
   ========================================================================== */

.popular-q { display: flex; flex-direction: column; }
.popular-q a {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .7rem .25rem; font-size: var(--fs-base); color: var(--gray-700);
	border-bottom: 1px solid var(--gray-100);
	transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}
.popular-q a:last-child { border-bottom: none; }
.popular-q a:hover { color: var(--blue-600); padding-left: .5rem; }
.popular-q .icon { color: var(--gray-400); flex-shrink: 0; }
.popular-q a:hover .icon { color: var(--blue-600); }

/* Marker on outbound links to third-party sites. */
.ext::after {
	content: "";
	display: inline-block; width: .5em; height: .5em; margin-left: .4em;
	border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-.05em); opacity: .55;
}

/* ==========================================================================
   Responsive pass
   Loaded last, so these rules win over the base layout at equal specificity.

   Ranges targeted:
     360-479   phone portrait      one column, generous touch targets
     480-767   phone landscape     two-up card grids
     768-1023  tablet portrait     three-up grids, drawer nav
     1024-1279 tablet landscape    four/five-up grids, drawer nav
     1280+     desktop             full nav
   ========================================================================== */

/* --------------------------------------------------------------------------
   Card grids
   The base sheet jumps straight from 1 column to 2 at 768px, which wastes
   half the screen on phone-landscape and small tablets. Fill that gap.

   These MUST stay bounded at the top by max-width. This sheet loads last, so an
   unbounded (min-width: 480px) rule here also matches at 1024px and 1440px and,
   at equal specificity, beats the desktop rules in the base sheet - which
   silently pinned every .grid--3/4/5/6 on the site to two columns on desktop.
   -------------------------------------------------------------------------- */

@media (min-width: 480px) and (max-width: 767.98px) {
	.grid--3,
	.grid--4,
	.grid--5,
	.grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.grid--5,
	.grid--6 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Reserved-height hacks
   Several cards reserve space so their buttons line up in a multi-column row.
   In a single column that reservation is just dead space, so drop it.
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
	.marketplace-card__desc,
	.country-card__desc,
	.org-card__name,
	.community-mini__item p { min-height: 0; }
}

/* --------------------------------------------------------------------------
   FAQ category tabs
   Flex with `1 1 160px` produced a ragged 3+2 row of unequal heights, and a
   title that wrapped to two lines pushed its icon out of line with the rest.
   A grid keeps every tab the same size at every width.
   -------------------------------------------------------------------------- */

.faq-tabs {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
}
@media (min-width: 480px) { .faq-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .faq-tabs { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .faq-tabs { grid-template-columns: repeat(5, 1fr); } }

.faq-tab {
	flex: initial;          /* the grid owns sizing now */
	align-items: center;
	min-height: 100%;
}

/* --------------------------------------------------------------------------
   Fulfilment workflow
   Five steps side by side is too tight on a portrait tablet; go 3 then 5.
   -------------------------------------------------------------------------- */

@media (min-width: 768px)  { .workflow { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .workflow { grid-template-columns: repeat(5, 1fr); } }

/* --------------------------------------------------------------------------
   Resource groups (Find Buyers)
   The 18rem label column squeezes the link list between 900 and 1023px.
   Keep it stacked until there is genuinely room for two columns.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1023px) {
	.resource-group { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Footer
   Five columns at 1024px leaves each about 190px wide and the link text wraps
   awkwardly. Three across the tablet range, five only on desktop.
   -------------------------------------------------------------------------- */

@media (min-width: 768px)  { .footer-main { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }

/* --------------------------------------------------------------------------
   Touch targets
   Below the desktop breakpoint the site is driven by thumb, so interactive
   rows need about 44px of height (WCAG 2.2 target size).
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.mobile-nav a { padding-block: .85rem; }
	.mobile-nav__foot a { min-height: 44px; align-items: center; }
	.popular-q a,
	.sidebar-box ul li a,
	.list-card ul li a,
	.category-card ul li a { padding-block: .75rem; }
	.resource-link { padding-block: .9rem; }
	.footer-col ul li { margin-bottom: .85rem; }
	.accordion-item__q { padding-block: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Phone portrait
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	.section { padding-block: 2.25rem; }
	.section--tight { padding-block: 1.5rem; }

	/* The search button sits under the field rather than shrinking it. */
	.search-bar { flex-wrap: wrap; padding: .75rem; gap: .6rem; }
	.search-bar__input { flex: 1 1 100%; padding: .35rem 0; }
	.search-bar__submit { width: 100%; }

	/* Stack the banner rows instead of squeezing the button beside the text. */
	.cta-banner__inner,
	.newsletter__inner { flex-direction: column; align-items: flex-start; }
	.cta-banner .btn,
	.newsletter__form { width: 100%; }
	.newsletter__form input,
	.newsletter__form .btn { flex: 1 1 100%; }

	/* A right-aligned button inside a row has nowhere to go on a phone. */
	.webinar-item { flex-wrap: wrap; }
	.webinar-item .btn { margin-left: 0; width: 100%; }

	.section-header { align-items: flex-start; }
	.hub-hero { padding-block: 2.25rem 2.5rem; }
	.cta-band { padding: 1.75rem 1.25rem; }

	/* Long unbroken strings (emails, URLs) must not force a sideways scroll. */
	.footer-contact li span,
	.sidebar-contact-item span { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Belt and braces: nothing may cause a horizontal scrollbar.
   -------------------------------------------------------------------------- */

html, body { overflow-x: clip; }
img, svg, video, table { max-width: 100%; }