/* How it works — infographic-style user guide */

.mca-guide-page {
	--ug-green: #2ea043;
	--ug-blue: #1b75bb;
	--ug-navy: #123a6b;
	--ug-purple: #6b4aa8;
	--ug-orange: #ee7f1a;
	--ug-pink: #c43d7a;
	--ug-brown: #8a5a32;
	--ug-teal: #0e8a7c;
	--ug-yellow: #f5c518;
	font-family: "Inter", "Noto Sans Devanagari", sans-serif;
	scroll-behavior: smooth;
}

.mca-guide-page h1,
.mca-guide-page h2,
.mca-ug-banner,
.mca-ug-badge,
.mca-ug-card__head p,
.mca-ug-flow strong,
.mca-ug-cta h2 {
	font-family: "Noto Sans Devanagari", "Inter", sans-serif;
}

.mca-ug-kicker {
	margin: 0 0 .55rem;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ug-blue);
}

/* ---- Hero ---------------------------------------------------------------- */
.mca-ug-hero {
	position: relative;
	padding: 1.6rem 0 2rem;
	overflow: hidden;
}
.mca-ug-hero::before {
	content: "";
	position: absolute;
	inset: 8% -10% auto auto;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(27,117,187,.18), transparent 70%);
	pointer-events: none;
}
.mca-ug-hero__grid {
	display: grid;
	grid-template-columns: 1.2fr .7fr .55fr;
	gap: 1.25rem;
	align-items: center;
}
.mca-ug-hero h1 {
	margin: 0 0 .7rem;
	font-size: clamp(1.85rem, 4.4vw, 2.85rem);
	line-height: 1.15;
	color: var(--navy);
	letter-spacing: -.02em;
}
.mca-ug-banner {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .45rem 1rem;
	border-radius: 999px;
	background: var(--ug-yellow);
	color: #3a2a00;
	font-weight: 800;
	font-size: .95rem;
	box-shadow: 0 10px 22px -14px rgba(180, 130, 0, .7);
}
.mca-ug-hero__lead {
	margin: 0 0 1.1rem;
	max-width: 42ch;
	color: var(--pl-muted);
	font-size: 1.02rem;
}
.mca-ug-jump {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.mca-ug-jump a {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .72rem;
	font-weight: 800;
	background: #fff;
	border: 1px solid var(--pl-line);
	color: var(--navy);
}
.mca-ug-jump a:hover {
	background: var(--ug-blue);
	border-color: var(--ug-blue);
	color: #fff;
}

.mca-ug-phone { display: flex; justify-content: center; }
.mca-ug-phone__bezel {
	width: 168px;
	background: #101826;
	border-radius: 28px;
	padding: 10px 9px 14px;
	box-shadow: 0 28px 50px -24px rgba(10, 24, 48, .7);
}
.mca-ug-phone__notch {
	width: 52px;
	height: 6px;
	border-radius: 99px;
	background: #2a3548;
	margin: 0 auto 8px;
}
.mca-ug-phone__screen {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	min-height: 250px;
}
.mca-ug-phone__top {
	background: linear-gradient(90deg, #15457e, #1b75bb);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	padding: .55rem .7rem;
}
.mca-ug-phone__screen ul {
	list-style: none;
	margin: 0;
	padding: .45rem .4rem .6rem;
}
.mca-ug-phone__screen li {
	font-size: .68rem;
	font-weight: 700;
	color: #1d3557;
	padding: .38rem .5rem;
	border-radius: 8px;
	margin-bottom: .18rem;
	background: #f3f7fc;
}
.mca-ug-phone__screen li:first-child {
	background: rgba(27, 117, 187, .14);
	color: var(--ug-blue);
}

.mca-ug-badge {
	width: 168px;
	height: 168px;
	margin: 0 auto;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #2d6cb3, #123a6b 62%);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	box-shadow: 0 18px 40px -18px rgba(18, 58, 107, .8);
	transform: rotate(-6deg);
}
.mca-ug-badge strong { font-size: 1.05rem; line-height: 1.15; }
.mca-ug-badge span { font-size: 1.05rem; font-weight: 800; }
.mca-ug-badge em { font-style: normal; font-size: .72rem; opacity: .88; margin-top: .35rem; }

/* ---- Cards ---------------------------------------------------------------- */
.mca-ug-board { padding: .4rem 0 2.4rem; }
.mca-ug-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.05rem;
}
.mca-ug-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(21, 69, 126, .08);
	box-shadow: 0 16px 34px -26px rgba(15, 35, 70, .55);
	transition: transform .18s ease, box-shadow .2s ease;
	scroll-margin-top: 5.5rem;
}
.mca-ug-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 44px -24px rgba(15, 35, 70, .5);
}
.mca-ug-card__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .7rem;
	align-items: center;
	padding: .7rem .9rem;
	color: #fff;
}
.mca-ug-card__n {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.2);
	font-weight: 800;
	font-size: .92rem;
}
.mca-ug-card__head h2 {
	margin: 0;
	font-size: 1.02rem;
	letter-spacing: -.01em;
	font-family: Inter, sans-serif;
}
.mca-ug-card__head p {
	margin: 0;
	font-size: .82rem;
	opacity: .92;
}
.mca-ug-card__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.16);
}
.mca-ug-card__icon svg { width: 18px; height: 18px; }

.mca-ug-card--green .mca-ug-card__head { background: linear-gradient(135deg, #24913c, #3cbc54); }
.mca-ug-card--blue .mca-ug-card__head { background: linear-gradient(135deg, #155a96, #1b75bb); }
.mca-ug-card--purple .mca-ug-card__head { background: linear-gradient(135deg, #5a3d96, #7b5cc0); }
.mca-ug-card--orange .mca-ug-card__head { background: linear-gradient(135deg, #d86a10, #f0a03a); }
.mca-ug-card--pink .mca-ug-card__head { background: linear-gradient(135deg, #b4336c, #de5a96); }
.mca-ug-card--brown .mca-ug-card__head { background: linear-gradient(135deg, #7a4e2c, #b07a4c); }
.mca-ug-card--teal .mca-ug-card__head { background: linear-gradient(135deg, #0b7368, #1aa899); }
.mca-ug-card--navy .mca-ug-card__head { background: linear-gradient(135deg, #0f2f58, #1b75bb); }

.mca-ug-card__body {
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: .85rem;
	padding: .85rem .95rem 1rem;
	align-items: start;
}
.mca-ug-card__body ul {
	margin: 0;
	padding: 0 0 0 1.05rem;
	color: #33465d;
	font-size: .86rem;
	line-height: 1.45;
}
.mca-ug-card__body li + li { margin-top: .28rem; }

.mca-ug-ui {
	background: #f4f8fd;
	border: 1px solid #dce7f2;
	border-radius: 10px;
	padding: .45rem;
	min-height: 108px;
}
.mca-ug-ui__bar {
	height: 10px;
	border-radius: 4px;
	background: var(--ug-blue);
	margin-bottom: .4rem;
	font-size: 0;
}
.mca-ug-ui__field {
	height: 8px;
	border-radius: 4px;
	background: #d5e3f0;
	margin-bottom: .28rem;
}
.mca-ug-ui__field--short { width: 62%; }
.mca-ug-ui__table {
	display: grid;
	gap: .18rem;
	margin: .35rem 0;
}
.mca-ug-ui__table i {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #c9dbeb;
}
.mca-ug-ui__btn {
	width: 58%;
	height: 10px;
	border-radius: 99px;
	background: #4cae3f;
	margin-top: .2rem;
}
.mca-ug-ui__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .62rem;
	font-weight: 700;
	color: #1d4f7a;
}
.mca-ug-ui__list li {
	background: #fff;
	border-radius: 4px;
	padding: .18rem .3rem;
	margin-bottom: .18rem;
}
.mca-ug-ui--reports .mca-ug-ui__bar {
	height: auto;
	font-size: .62rem;
	font-weight: 800;
	color: #fff;
	padding: .2rem .35rem;
}
.mca-ug-ui--backup {
	display: grid;
	place-items: center;
	text-align: center;
	background: linear-gradient(180deg, #e8f3ff, #f7fbff);
}
.mca-ug-ui__cloud {
	width: 46px;
	height: 28px;
	border-radius: 18px;
	background: #1b75bb;
	position: relative;
	margin-bottom: .3rem;
}
.mca-ug-ui__cloud::before,
.mca-ug-ui__cloud::after {
	content: "";
	position: absolute;
	background: #1b75bb;
	border-radius: 50%;
}
.mca-ug-ui__cloud::before { width: 22px; height: 22px; left: 4px; top: -10px; }
.mca-ug-ui__cloud::after { width: 28px; height: 28px; right: 4px; top: -12px; }
.mca-ug-ui--backup em {
	font-style: normal;
	font-size: .68rem;
	font-weight: 800;
	color: var(--ug-blue);
}

.mca-ug-features { padding: 2rem 0 1.2rem; }
.mca-ug-features .mca-ug-daily__head p:last-child { margin: .4rem 0 0; color: var(--pl-muted); }
.mca-ug-feat-group { margin-bottom: 1.35rem; }
.mca-ug-feat-group h3 {
	margin: 0 0 .6rem;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ug-blue);
	font-family: Inter, sans-serif;
}
.mca-ug-feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .65rem;
}
.mca-ug-feat-grid article {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: 12px;
	padding: .75rem .85rem .85rem;
}
.mca-ug-feat-grid h4 { margin: 0 0 .25rem; font-size: .92rem; color: var(--navy); font-family: Inter, sans-serif; }
.mca-ug-feat-grid p { margin: 0; font-size: .8rem; color: var(--pl-muted); }

/* ---- Daily workflow ------------------------------------------------------- */
.mca-ug-daily {
	padding: 1.6rem 0 2rem;
	background: rgba(255,255,255,.55);
	border-top: 1px solid var(--pl-line);
	border-bottom: 1px solid var(--pl-line);
}
.mca-ug-daily__head { text-align: center; margin-bottom: 1.2rem; }
.mca-ug-daily h2 {
	margin: 0;
	color: var(--navy);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.mca-ug-daily h2 span { color: var(--ug-blue); font-size: .85em; }
.mca-ug-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .7rem;
	counter-reset: none;
}
.mca-ug-flow li {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: .9rem .7rem 1rem;
	text-align: center;
	border: 1px solid var(--pl-line);
	box-shadow: 0 12px 28px -22px rgba(15,35,70,.45);
}
.mca-ug-flow li:not(:last-child)::after {
	content: "→";
	position: absolute;
	right: -.55rem;
	top: 46%;
	color: var(--ug-blue);
	font-weight: 800;
	z-index: 1;
}
.mca-ug-flow span {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin: 0 auto .45rem;
	border-radius: 50%;
	background: var(--pl-grad);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
}
.mca-ug-flow strong { display: block; color: var(--navy); font-size: .92rem; }
.mca-ug-flow em { display: block; font-style: normal; color: var(--pl-muted); font-size: .75rem; margin-top: .15rem; }

/* ---- Benefits + CTA ------------------------------------------------------- */
.mca-ug-benefits { background: linear-gradient(90deg, #24913c, #3cbc54); color: #fff; }
.mca-ug-benefits__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .6rem;
	padding: 1rem 1.25rem;
	text-align: center;
}
.mca-ug-benefits span {
	width: 36px;
	height: 36px;
	margin: 0 auto .35rem;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	display: grid;
	place-items: center;
}
.mca-ug-benefits svg { width: 18px; height: 18px; }
.mca-ug-benefits strong { display: block; font-size: .88rem; }
.mca-ug-benefits em { font-style: normal; font-size: .75rem; opacity: .9; }

.mca-ug-cta {
	text-align: center;
	background: linear-gradient(135deg, #123a6b, #1b75bb 55%, #1f8a4c);
	color: #fff;
	padding: 2.4rem 0;
}
.mca-ug-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.45rem, 3.4vw, 2rem); }
.mca-ug-cta p { margin: 0 auto 1.2rem; max-width: 46ch; opacity: .94; }
.mca-ug-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-bottom: .9rem; }
.mca-ug-cta .mca-btn--primary { background: #fff; color: var(--navy); }
.mca-ug-cta .mca-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); }
.mca-ug-cta__url { color: #fff; font-weight: 700; text-decoration: underline; font-size: .92rem; }

@media (max-width: 1080px) {
	.mca-ug-hero__grid { grid-template-columns: 1fr auto; }
	.mca-ug-badge { grid-column: 1 / -1; }
	.mca-ug-flow { grid-template-columns: repeat(3, 1fr); }
	.mca-ug-flow li:nth-child(3)::after { content: none; }
}
@media (max-width: 820px) {
	.mca-ug-grid { grid-template-columns: 1fr; }
	.mca-ug-feat-grid { grid-template-columns: 1fr 1fr; }
	.mca-ug-hero__grid { grid-template-columns: 1fr; text-align: center; }
	.mca-ug-hero__lead { margin-left: auto; margin-right: auto; }
	.mca-ug-jump { justify-content: center; }
	.mca-ug-benefits__row { grid-template-columns: 1fr 1fr; padding-top: 1.1rem; padding-bottom: 1.1rem; }
}
@media (max-width: 640px) {
	.mca-ug-card__body { grid-template-columns: 1fr; }
	.mca-ug-ui { max-width: 180px; }
	.mca-ug-flow { grid-template-columns: 1fr 1fr; }
	.mca-ug-flow li::after { content: none !important; }
	.mca-ug-benefits__row { grid-template-columns: 1fr; }
	.mca-ug-feat-grid { grid-template-columns: 1fr; }
}