:root {
	--ink: #32142a;
	--muted: #626879;
	--paper: #fff;
	--orange: #ff6a00;
	--red: #f60d23;
	--pink: #e80469;
	--line: #eadfe4;
	--night: #5a1239
}
/* Client content refresh */
.client-intro,.client-benefits,.client-steps,.download-app{
	width:min(1180px,calc(100% - 48px));
	margin:0 auto;
	padding:96px 0
}
.client-intro{
	display:grid;
	grid-template-columns:.82fr 1.18fr;
	gap:80px;
	align-items:start
}
.client-intro h2,.client-benefits h2,.client-steps h2,.download-copy h2{
	margin:0;
	font-size:clamp(2.35rem,4.5vw,4.8rem);
	line-height:1;
	letter-spacing:-.055em
}
.client-intro-copy p{
	margin:0 0 18px;
	color:var(--muted);
	font-size:1.05rem;
	line-height:1.78
}
.client-flow{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:14px;
	margin-top:34px
}
.client-flow span{
	position:relative;
	padding:22px 18px;
	border:1px solid #f0dbe4;
	border-radius:18px;
	background:#fff6fa;
	color:#64113e;
	font-weight:900;
	text-align:center
}
.client-flow span:not(:last-child)::after{
	content:"→";
	position:absolute;
	z-index:2;
	right:-18px;
	top:50%;
	width:32px;
	height:32px;
	display:grid;
	place-items:center;
	transform:translateY(-50%);
	border-radius:50%;
	background:linear-gradient(135deg,var(--orange),var(--pink));
	color:#fff
}
.client-benefits{
	padding-top:40px
}
.client-benefits-head{
	max-width:760px;
	margin-bottom:38px
}
.client-benefits-head p:last-child{
	color:var(--muted);
	font-size:1.05rem;
	line-height:1.7
}
.benefit-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px
}
.benefit-card{
	position:relative;
	overflow:hidden;
	min-height:310px;
	padding:30px;
	display:flex;
	align-items:flex-end;
	border-radius:26px;
	background:#6b123f;
	color:#fff
}
.benefit-card>img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.68;
	transition:transform .7s cubic-bezier(.22,1,.36,1)
}
.benefit-card::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(90,18,57,.08) 12%,rgba(90,18,57,.94) 92%)
}
.benefit-card:hover>img{
	transform:scale(1.07)
}
.benefit-card>div{
	position:relative;
	z-index:2
}
.benefit-card h3{
	margin:0 0 9px;
	font-size:1.35rem
}
.benefit-card p{
	margin:0;
	color:rgba(255,255,255,.86);
	line-height:1.6
}
.download-app{
	padding:0 0 105px
}
.download-panel{
	overflow:hidden;
	padding:64px;
	display:grid;
	grid-template-columns:1fr .72fr;
	align-items:center;
	gap:50px;
	border-radius:34px;
	background:radial-gradient(circle at 86% 14%,rgba(255,106,0,.48),transparent 27%),linear-gradient(135deg,#5a1239,#9d1457);
	color:#fff
}
.download-copy .eyebrow{
	color:#ffc4dd
}
.download-copy p{
	max-width:650px;
	color:rgba(255,255,255,.84);
	font-size:1.05rem;
	line-height:1.7
}
.app-links,.footer-app-links{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:25px
}
.store-link{
	min-height:58px;
	padding:10px 17px;
	display:inline-flex;
	align-items:center;
	gap:11px;
	border:1px solid rgba(255,255,255,.28);
	border-radius:14px;
	background:#7a164b;
	color:#fff;
	font-size:.84rem;
	font-weight:900;
	box-shadow:0 12px 28px rgba(51,7,31,.2)
}
.store-link span{
	font-size:1.25rem
}
.store-link.is-pending{
	opacity:.72;
	cursor:not-allowed
}
.download-art{
	position:relative;
	min-height:250px;
	display:grid;
	place-items:center
}
.download-art img{
	position:relative;
	z-index:2;
	width:min(310px,86%);
	filter:drop-shadow(0 28px 40px rgba(49,4,27,.28))
}
.download-art::before{
	content:"";
	position:absolute;
	width:250px;
	height:250px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--orange),var(--pink));
	filter:blur(2px)
}
.footer-download-title{
	display:block;
	margin-top:24px
}
.footer-app-links{
	margin-top:12px
}
.footer-app-links .store-link{
	min-height:46px;
	padding:8px 12px;
	background:rgba(255,255,255,.1);
	font-size:.75rem
}
.client-steps{
	padding-top:20px
}
.step-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px;
	margin-top:38px;
	counter-reset:steps
}
.step-card{
	padding:27px;
	border:1px solid #efdce4;
	border-radius:22px;
	background:linear-gradient(145deg,#fff,#fff4f8)
}
.step-card::before{
	counter-increment:steps;
	content:"0" counter(steps);
	display:block;
	margin-bottom:34px;
	color:var(--pink);
	font-size:.78rem;
	font-weight:900;
	letter-spacing:.12em
}
.step-card h3{
	margin:0 0 10px
}
.step-card p{
	margin:0;
	color:var(--muted);
	line-height:1.65
}
.hero-actions .button-secondary{
	background:#fff;
	color:#6b123f;
	border:1px solid #efcbd9;
	box-shadow:none
}
.hero-actions .button-secondary:hover{
	box-shadow:0 12px 28px rgba(90,18,57,.12)
}
@media(max-width:900px){
	.client-intro,.download-panel{
		grid-template-columns:1fr
}
	.benefit-grid{
		grid-template-columns:1fr 1fr
}
	.step-grid{
		grid-template-columns:1fr 1fr
}
	.download-art{
		min-height:210px
}
}
@media(max-width:620px){
	.client-intro,.client-benefits,.client-steps,.download-app{
		width:min(100% - 30px,1180px);
		padding:65px 0
}
	.client-flow,.benefit-grid,.step-grid{
		grid-template-columns:1fr
}
	.client-flow span:not(:last-child)::after{
		right:50%;
		top:auto;
		bottom:-24px;
		transform:translateX(50%) rotate(90deg)
}
	.benefit-card{
		min-height:270px
}
	.download-panel{
		padding:38px 24px
}
	.hero-actions{
		align-items:stretch
}
	.hero-actions .button,.hero-actions .text-link{
		width:100%;
		justify-content:center
}
	.download-art img{
		width:230px
}
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth;
	overflow-x: hidden
}
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--paper);
	color: var(--ink);
	font-family: Arial,Helvetica,sans-serif
}
a {
	color: inherit;
	text-decoration: none
}
.site-header {
	width: min(1200px,calc(100% - 48px));
	height: 90px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr 220px;
	align-items: center;
	gap: 36px
}
.brand img {
	display: block;
	width: 210px;
	height: auto
}
.site-header nav {
	display: flex;
	justify-content: center;
	gap: 34px;
	color: #3c4050;
	font-weight: 700;
	font-size: .94rem
}
.site-header nav a:hover {
	color: var(--pink)
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 54px;
	padding: 0 25px;
	border-radius: 14px;
	background: linear-gradient(110deg,var(--orange),var(--red) 48%,var(--pink));
	color: #fff;
	font-weight: 800;
	box-shadow: 0 12px 30px rgba(232,4,105,.2);
	transition: transform .2s ease,box-shadow .2s ease
}
.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(232,4,105,.28)
}
.button-small {
	min-height: 46px;
	padding-inline:20px;
	font-size: .9rem
}
.hero {
	position: relative;
	overflow: hidden;
	width: min(1320px,calc(100% - 32px));
	min-height: 660px;
	margin: 0 auto;
	padding: 82px clamp(24px,5vw,70px);
	display: grid;
	grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
	align-items: center;
	gap: 70px;
	border-radius: 32px;
	background: radial-gradient(circle at 82% 18%,#ffe5ef 0,transparent 27%),linear-gradient(135deg,#fff 0 52%,#fff4f8 100%);
	border: 1px solid #f4e8ed
}
/* RHB and DuitNow introduction placed before the main JomKumpul hero */
.payment-intro-hero{
	position:relative;
	isolation:isolate;
	overflow:hidden;
	width:100%;
	min-height:clamp(590px,48vw,780px);
	margin:0 auto 24px;
	background:#173f3d;
	color:#fff
}
.payment-intro-image{
	position:absolute;
	z-index:-3;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center
}
.payment-intro-hero::before{
	content:"";
	position:absolute;
	z-index:-2;
	inset:0;
	background:linear-gradient(90deg,rgba(17,50,48,.03) 20%,rgba(17,50,48,.18) 40%,rgba(17,50,48,.78) 62%,rgba(17,50,48,.97) 100%)
}
.payment-intro-hero::after{
	content:"";
	position:absolute;
	z-index:-1;
	right:-8%;
	bottom:9%;
	width:33%;
	height:16px;
	background:#d9f000;
	transform:rotate(-42deg);
	box-shadow:0 34px 0 #0b7774;
	opacity:.92
}
.payment-intro-copy{
	position:absolute;
	z-index:2;
	top:13%;
	right:clamp(32px,7vw,120px);
	width:min(43%,650px)
}
.payment-intro-copy h2{
	margin:0;
	color:#fff;
	font-size:clamp(3.25rem,5.1vw,6.2rem);
	line-height:.98;
	letter-spacing:-.055em
}
.payment-intro-copy h2 span{
	color:#e93a98
}
.payment-intro-copy p{
	max-width:720px;
	margin:42px 0 0;
	color:#fff;
	font-size:clamp(1.12rem,1.5vw,1.65rem);
	line-height:1.75
}
.payment-intro-brand{
	position:absolute;
	z-index:2;
	left:clamp(32px,6vw,116px);
	bottom:11%;
	width:min(38%,600px);
	padding:30px;
	border-radius:28px;
	background:#073957;
	color:#fff
}
.payment-intro-brand img{
	display:block;
	width:min(210px,46%);
	height:auto;
	margin-bottom:24px;
	padding:15px 20px;
	background:#78cfe3
}
.payment-intro-brand p{
	margin:0;
	max-width:500px;
	color:#fff;
	font-size:clamp(1.05rem,1.55vw,1.55rem);
	line-height:1.65
}
@media(max-width:900px){
	.payment-intro-hero{
		min-height:760px
}
	.payment-intro-hero::before{
		background:linear-gradient(180deg,rgba(16,50,48,.38),rgba(16,50,48,.84) 58%,rgba(16,50,48,.97))
}
	.payment-intro-copy{
		top:54px;
		left:32px;
		right:32px;
		width:auto
}
	.payment-intro-copy h2{
		font-size:clamp(3rem,9vw,5.2rem)
}
	.payment-intro-copy p{
		max-width:620px;
		margin-top:26px
}
	.payment-intro-brand{
		left:32px;
		right:32px;
		bottom:38px;
		width:auto;
		max-width:570px
}
	.payment-intro-hero::after{
		right:-17%;
		bottom:27%;
		width:58%
}
}
@media(max-width:620px){
	.payment-intro-hero{
		min-height:720px;
		margin-bottom:12px
}
	.payment-intro-image{
		object-position:43% center
}
	.payment-intro-copy{
		top:38px;
		left:22px;
		right:22px
}
	.payment-intro-copy h2{
		font-size:clamp(2.6rem,12vw,4rem)
}
	.payment-intro-copy p{
		font-size:1rem;
		line-height:1.55
}
	.payment-intro-brand{
		left:18px;
		right:18px;
		bottom:24px;
		padding:24px;
		border-radius:22px
}
	.payment-intro-brand img{
		width:150px;
		margin-bottom:18px;
		padding:11px 14px
}
	.payment-intro-brand p{
		font-size:1rem
}
	.payment-intro-hero::after{
		display:none
}
}
.hero::after {
	content: "";
	position: absolute;
	right: -1%;
	bottom: -150px;
	width: 68%;
	height: 240px;
	border-radius: 50%;
	border-top: 24px solid var(--orange);
	transform: rotate(-7deg);
	opacity: .95
}
.hero-copy {
	position: relative;
	z-index: 2
}
.eyebrow {
	margin: 0 0 20px;
	color: var(--pink);
	text-transform: uppercase;
	letter-spacing: .13em;
	font-weight: 900;
	font-size: .8rem
}
h1 {
	margin: 0;
	max-width: 640px;
	font-size: clamp(3.15rem,5.6vw,5.55rem);
	line-height: .98;
	letter-spacing: -.06em
}
h1::after {
	content: "";
	display: inline-block;
	width: .22em;
	height: .22em;
	margin-left: .08em;
	border-radius: 50%;
	background: var(--pink)
}
.hero-lede {
	max-width: 580px;
	margin: 28px 0 30px;
	color: var(--muted);
	font-size: 1.16rem;
	line-height: 1.65
}
.hero-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap
}
.text-link {
	font-weight: 800;
	border-bottom: 1px solid #bfc1c8;
	padding-bottom: 5px
}
.hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 34px;
	color: #525767;
	font-size: .88rem;
	font-weight: 700
}
.hero-proof span::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--pink)
}
.hero-visual {
	position: relative;
	z-index: 2;
	min-height: 500px;
	display: grid;
	place-items: center
}
.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(4px)
}
.orb-one {
	width: 330px;
	height: 330px;
	background: linear-gradient(145deg,#ff7521,#ed005f);
	right: 0;
	top: 26px;
	opacity: .22
}
.orb-two {
	width: 200px;
	height: 200px;
	background: #ffafcf;
	left: 30px;
	bottom: 12px;
	opacity: .26
}
.dashboard-shell {
	width: 660px;
	max-width: 100%;
	min-height: 405px;
	display: grid;
	grid-template-columns: 145px 1fr;
	overflow: hidden;
	border-radius: 22px;
	background: #11151d;
	color: #fff;
	transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
	box-shadow: 0 36px 70px rgba(20,18,28,.28);
	border: 1px solid rgba(255,255,255,.1)
}
.dashboard-nav {
	padding: 24px 15px;
	background: #0b0e14;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: .7rem;
	color: #81899b
}
.dashboard-nav img {
	width: 108px;
	margin-bottom: 20px;
	filter: drop-shadow(0 3px 8px rgba(232,4,105,.2))
}
.dashboard-nav span {
	padding: 10px 12px;
	border-radius: 8px
}
.dashboard-nav .nav-active {
	color: #fff;
	background: linear-gradient(90deg,rgba(255,106,0,.25),rgba(232,4,105,.22))
}
.dashboard-main {
	padding: 27px
}
.dash-top {
	display: flex;
	justify-content: space-between;
	align-items: center
}
.dash-top div {
	display: grid;
	gap: 4px
}
.dash-top small,.metric-card small {
	color: #858da0
}
.metric-grid {
	display: grid;
	grid-template-columns: 1.6fr .8fr;
	gap: 13px;
	margin-top: 23px
}
.metric-card,.activity-card {
	background: #191e28;
	border: 1px solid #242b37;
	border-radius: 13px;
	padding: 18px
}
.metric-card {
	display: flex;
	flex-direction: column;
	gap: 8px
}
.metric-card strong {
	font-size: 1.75rem
}
.metric-card span {
	color: #51d38a;
	font-size: .67rem
}
.sparkline {
	height: 60px;
	margin-top: 8px;
	background: linear-gradient(180deg,rgba(232,4,105,.22),transparent),linear-gradient(135deg,transparent 48%,#ed1766 49% 51%,transparent 52%);
	clip-path: polygon(0 79%,12% 60%,24% 69%,38% 38%,50% 55%,65% 27%,78% 42%,100% 2%,100% 100%,0 100%)
}
.activity-card {
	margin-top: 13px
}
.activity-card>strong {
	display: block;
	margin-bottom: 12px;
	font-size: .78rem
}
.activity-card div {
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	border-top: 1px solid #272e3a;
	color: #aab0bd;
	font-size: .68rem
}
.activity-card b {
	color: #fbd3e2
}
.payment-toast {
	position: absolute;
	right: -8px;
	bottom: 10px;
	width: 205px;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
	border-radius: 15px;
	background: #fff;
	color: var(--ink);
	border: 1px solid #f3c8d8;
	box-shadow: 0 20px 42px rgba(44,27,36,.2)
}
.payment-toast>span {
	width: 37px;
	height: 37px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #e9fff1;
	color: #159452;
	font-weight: 900
}
.payment-toast div {
	display: grid;
	gap: 4px
}
.payment-toast small {
	color: #777d8b
}
.trust-strip {
	width: min(1100px,calc(100% - 48px));
	margin: -24px auto 0;
	position: relative;
	z-index: 4;
	padding: 22px 34px;
	text-align: center;
	border-radius: 18px;
	background: rgba(255,255,255,.94);
	border: 1px solid var(--line);
	box-shadow: 0 14px 40px rgba(35,25,31,.08)
}
.trust-strip p {
	margin: 0 0 18px;
	color: #777b88;
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em
}
.trust-strip div {
	display: flex;
	justify-content: space-around;
	gap: 28px;
	flex-wrap: wrap;
	color: #343947
}
.trust-strip strong:first-child {
	color: var(--pink)
}
.section {
	width: min(1180px,calc(100% - 48px));
	margin: 0 auto;
	padding: 118px 0
}
.section-heading {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 50px
}
.section-heading h2,.journey h2,.about h2,.cta h2,.reach h2 {
	margin: 0;
	font-size: clamp(2.35rem,4vw,4rem);
	letter-spacing: -.045em;
	line-height: 1.04
}
.section-heading>p {
	margin: 0;
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.7
}
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 18px
}
.feature-card {
	position: relative;
	min-height: 335px;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(39,27,32,.05);
	transition: transform .2s ease
}
.feature-card:hover {
	transform: translateY(-5px)
}
.feature-primary {
	background: linear-gradient(150deg,#fff7f8,#fff);
	border-color: #ffc9d8
}
.icon-box {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: linear-gradient(145deg,#fff0e6,#ffe5f1);
	color: var(--pink);
	font-size: 1.8rem;
	font-weight: 900
}
.card-number {
	position: absolute;
	right: 26px;
	top: 25px;
	color: #d9cbd1;
	font-size: .78rem;
	font-weight: 900
}
.feature-card h3,.tool-grid h3 {
	margin: 44px 0 13px;
	font-size: 1.35rem
}
.feature-card p,.tool-grid p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65
}
.feature-card a {
	display: inline-block;
	margin-top: 22px;
	color: var(--pink);
	font-weight: 800
}
.journey {
	position: relative;
	overflow: hidden;
	min-height: 740px;
	padding: 105px max(24px,calc((100% - 1180px)/2));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	background: var(--night);
	color: #fff
}
.journey::after {
	content: "";
	position: absolute;
	right: -8%;
	top: 30%;
	width: 58%;
	height: 180px;
	border-radius: 50%;
	border-top: 34px solid var(--pink);
	transform: rotate(-13deg);
	opacity: .85
}
.journey-copy,.phone-scene {
	position: relative;
	z-index: 2
}
.eyebrow-light {
	color: #ff5b96
}
.journey-intro {
	max-width: 560px;
	color: #aeb5c3;
	font-size: 1.05rem;
	line-height: 1.7
}
.journey ol {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	gap: 25px
}
.journey li {
	display: flex;
	gap: 20px;
	align-items: flex-start
}
.journey li>span {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(145deg,var(--orange),var(--pink));
	font-weight: 900
}
.journey li strong {
	display: block;
	margin: 2px 0 6px;
	font-size: 1.02rem
}
.journey li p {
	margin: 0;
	color: #9da4b2;
	line-height: 1.55
}
.phone-scene {
	min-height: 550px;
	display: grid;
	place-items: center
}
.halo {
	position: absolute;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background: radial-gradient(circle,#eb0057 0,#ff6a00 30%,transparent 68%);
	opacity: .32;
	filter: blur(5px)
}
.phone {
	position: relative;
	width: 270px;
	height: 550px;
	padding: 22px 17px 18px;
	border: 7px solid #454a54;
	border-radius: 42px;
	background: #FCD4DF;
	box-shadow: 0 34px 70px #000;
	color: #fff
}
.phone::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	width: 88px;
	height: 20px;
	transform: translateX(-50%);
	border-radius: 20px;
	background: #05070a
}
.phone-top {
	display: flex;
	justify-content: space-between;
	padding: 3px 6px 17px;
	font-size: .63rem
}
.phone>p {
	margin: 10px 4px 15px;
	font-size: 1.28rem;
	font-weight: 800
}
.phone-total {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px;
	padding: 15px;
	border-radius: 13px;
	background: #191f29
}
.phone-total small {
	grid-column: 1/-1;
	color: #8991a1
}
.phone-total span {
	color: #b1b7c3;
	font-size: .65rem
}
.phone-chart {
	height: 88px;
	margin: 12px 0;
	background: linear-gradient(180deg,rgba(232,4,105,.23),transparent);
	clip-path: polygon(0 76%,13% 63%,25% 70%,39% 44%,51% 55%,66% 30%,80% 40%,100% 7%,100% 100%,0 100%);
	border-bottom: 2px solid #ed1766
}
.phone-list {
	display: grid;
	gap: 7px
}
.phone-list>div {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 8px;
	border-radius: 9px;
	background: #181e27;
	font-size: .6rem
}
.phone-list i {
	width: 27px;
	height: 27px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--pink);
	font-style: normal;
	font-weight: 900
}
.phone-list span {
	display: grid;
	gap: 3px
}
.phone-list small {
	color: #7f8797
}
.phone-list b {
	color: #7fe4aa
}
.phone-nav {
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 15px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #7d8492
}
.phone-nav b {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin-top: -16px;
	border-radius: 50%;
	background: var(--pink);
	color: #fff
}
.reach {
	padding-bottom: 45px
}
.reach-card {
	min-height: 500px;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	overflow: hidden;
	border-radius: 30px;
	background: linear-gradient(135deg,#fff3f5,#fff8ed);
	border: 1px solid #f6dbe2
}
.reach-copy {
	padding: 70px
}
.reach-copy>p {
	max-width: 650px;
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.7
}
.country-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
	margin: 27px 0
}
.country-list span {
	padding: 11px 13px;
	border-radius: 10px;
	background: rgba(255,255,255,.7);
	font-size: .82rem;
	font-weight: 700
}
.reach-copy>small {
	color: #858995
}
.qr-scene {
	position: relative;
	min-height: 500px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle,#ffbad0 0,transparent 63%)
}
.qr-card {
	width: 260px;
	height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	border: 1px solid #ffc7d9;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(188,46,94,.18);
	transform: rotate(5deg)
}
.qr-mark {
	font-size: 8rem;
	line-height: .7;
	color: var(--pink)
}
.qr-card span {
	color: #7d8290
}
.reach-badge {
	position: absolute;
	right: 13%;
	top: 16%;
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	text-align: center;
	border-radius: 50%;
	background: var(--night);
	color: #fff;
	font-size: 2rem;
	font-weight: 900;
	line-height: .8
}
.reach-badge span {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .08em
}
.tools {
	padding-top: 80px
}
.tool-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 18px
}
.tool-grid article {
	padding: 28px;
	border-top: 3px solid #f1dfe5;
	background: linear-gradient(180deg,#fff,#fff8fb);
	border-radius: 0 0 20px 20px
}
.tool-icon {
	font-size: 1.7rem;
	color: var(--pink)
}
.tool-grid h3 {
	margin-top: 28px
}
.about {
	width: min(1180px,calc(100% - 48px));
	margin: 60px auto 120px;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 80px;
	align-items: center
}
.about-mark {
	min-height: 490px;
	padding: 55px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	border-radius: 30px;
	background: var(--night);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08)
}
.about-mark span {
	font-size: clamp(3rem,5.8vw,5.4rem);
	font-weight: 900;
	letter-spacing: -.06em
}
.about-mark span:nth-child(2) {
	color: #ff5a1f
}
.about-mark span:nth-child(3) {
	color: #ee0a72
}
.about-copy>p:not(.eyebrow) {
	color: var(--muted);
	font-size: 1.06rem;
	line-height: 1.75
}
.vision-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 34px
}
.vision-grid div {
	padding-top: 18px;
	border-top: 2px solid #f4dbe3
}
.vision-grid p {
	color: var(--muted);
	line-height: 1.55
}
.cta {
	margin: 0;
	padding: 85px 24px;
	text-align: center;
	background: linear-gradient(115deg,var(--orange),var(--red) 45%,var(--pink));
	color: #fff
}
.cta .eyebrow {
	color: #fff
}
.cta h2 {
	max-width: 850px;
	margin: 0 auto
}
.cta>p:not(.eyebrow) {
	margin: 22px auto 32px;
	font-size: 1.1rem
}
.button-light {
	background: #fff;
	color: var(--pink);
	box-shadow: 0 12px 30px rgba(84,0,30,.2)
}
footer {
	padding: 65px max(24px,calc((100% - 1180px)/2)) 28px;
	background: var(--night);
	color: #fff
}
.footer-main {
	display: grid;
	grid-template-columns: 1.5fr .65fr 1fr;
	gap: 70px;
	padding-bottom: 45px
}
.footer-brand img {
	width: 220px;
	filter: drop-shadow(0 4px 16px rgba(232,4,105,.25))
}
.footer-brand p {
	max-width: 400px;
	color: #9da4b1;
	line-height: 1.7
}
.footer-main>div:not(.footer-brand) {
	display: flex;
	flex-direction: column;
	gap: 14px
}
.footer-main>div>strong {
	margin-bottom: 8px;
	color: #fff
}
.footer-main a,.footer-main span {
	color: #aeb4c1
}
.footer-main a:hover {
	color: #ff6aa1
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid #2a2f39;
	color: #7f8694;
	font-size: .84rem
}
@media(max-width: 980px) {
	.site-header {
		grid-template-columns:1fr auto
}
	.site-header nav {
		display: none
}
	.hero {
		grid-template-columns: 1fr;
		padding-top: 62px
}
	.hero-copy {
		max-width: 700px
}
	.hero-visual {
		min-height: 440px
}
	.section-heading {
		grid-template-columns: 1fr;
		gap: 18px
}
	.feature-grid {
		grid-template-columns: 1fr 1fr
}
	.journey {
		grid-template-columns: 1fr
}
	.journey-copy {
		max-width: 690px
}
	.reach-card {
		grid-template-columns: 1fr
}
	.qr-scene {
		min-height: 400px
}
	.tool-grid {
		grid-template-columns: 1fr 1fr
}
	.about {
		grid-template-columns: 1fr
}
	.about-mark {
		min-height: 380px
}
	.footer-main {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 30px
}
}
@media(max-width: 620px) {
	.site-header {
		width:calc(100% - 28px);
		height: 74px;
		grid-template-columns: 1fr auto
}
	.brand img {
		width: 150px
}
	.button-small {
		min-height: 40px;
		padding-inline:12px;
		font-size: .7rem
}
	.hero {
		width: calc(100% - 18px);
		padding: 48px 22px 74px;
		gap: 30px;
		border-radius: 22px
}
	h1 {
		font-size: clamp(3rem,15vw,4.4rem)
}
	.hero-lede {
		font-size: 1rem
}
	.hero-actions {
		align-items: flex-start;
		flex-direction: column
}
	.dashboard-shell {
		grid-template-columns: 82px 1fr;
		min-height: 350px;
		transform: none
}
	.dashboard-nav {
		padding: 18px 8px
}
	.dashboard-nav img {
		width: 68px
}
	.dashboard-nav span {
		padding: 8px 5px;
		font-size: .53rem
}
	.dashboard-main {
		padding: 17px 13px
}
	.metric-grid {
		grid-template-columns: 1fr
}
	.metric-grid .metric-card:not(.metric-wide) {
		display: none
}
	.payment-toast {
		right: 4px;
		bottom: -18px
}
	.trust-strip {
		padding-inline:18px
}
	.section {
		width: calc(100% - 36px);
		padding: 82px 0
}
	.section-heading h2,.journey h2,.about h2,.cta h2,.reach h2 {
		font-size: 2.45rem
}
	.feature-grid,.tool-grid {
		grid-template-columns: 1fr
}
	.journey {
		padding: 82px 24px
}
	.phone-scene {
		min-height: 540px
}
	.halo {
		width: 320px;
		height: 320px
}
	.reach {
		width: calc(100% - 24px)
}
	.reach-copy {
		padding: 44px 24px
}
	.country-list {
		grid-template-columns: 1fr 1fr
}
	.qr-card {
		width: 230px;
		height: 310px
}
	.reach-badge {
		right: 5%;
		top: 10%
}
	.about {
		width: calc(100% - 36px);
		margin: 20px auto 90px;
		gap: 45px
}
	.about-mark {
		min-height: 330px;
		padding: 35px
}
	.vision-grid {
		grid-template-columns: 1fr
}
	.footer-main {
		grid-template-columns: 1fr
}
	.footer-bottom {
		flex-direction: column
}
}
/* Homepage art direction and motion layer */
.dashboard-shell,.payment-toast {
	z-index: 2
}
.trust-logos {
	align-items: center
}
.trust-strip .trust-logo {
	display: block;
	width: auto;
	height: 70px;
	max-width: 112px;
	object-fit: contain;
	filter: saturate(.92)
}
.trust-strip .trust-logo:nth-child(2) {
	height: 36px;
	display:none
}
.trust-strip .trust-logo:nth-child(5) {
	height: 38px
}
.feature-card.illustrated-card,.tool-grid .illustrated-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 390px;
	padding: 0;
	border: 0;
	background: #10141d;
	color: #fff;
	box-shadow: 0 22px 55px rgba(24,18,25,.14)
}
.illustrated-card>img {
	position: absolute;
	z-index: -2;
	inset: -2%;
	width: 104%;
	height: 104%;
	object-fit: cover;
	transform: scale(1.02)
}
.illustrated-card::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg,rgba(6,9,15,.06) 18%,rgba(7,10,17,.88) 76%,rgba(7,10,17,.98))
}
.illustrated-card .card-copy {
	position: absolute;
	inset: auto 0 0;
	padding: 30px
}
.illustrated-card .card-number {
	top: 26px;
	right: 28px;
	color: rgba(255,255,255,.72)
}
.feature-card.illustrated-card h3,.tool-grid .illustrated-card h3 {
	margin: 0 0 12px;
	color: #fff
}
.feature-card.illustrated-card p,.tool-grid .illustrated-card p {
	color: #d5d9e2
}
.feature-card.illustrated-card a {
	color: #ff8ab6
}
.tool-grid .illustrated-card {
	min-height: 330px;
	border-radius: 22px
}
.tool-grid .illustrated-card .card-copy {
	padding: 26px
}
.tool-grid .illustrated-card h3 {
	font-size: 1.25rem
}
.tool-grid .illustrated-card p {
	font-size: .92rem
}
.tool-grid .illustrated-card::after {
	background: linear-gradient(180deg,rgba(7,10,17,.02) 12%,rgba(7,10,17,.94) 82%)
}
@media(max-width: 620px) {
	.trust-strip .trust-logos {
		gap: 22px
}
	.trust-strip .trust-logo {
		height: 24px;
		max-width: 88px
}
	.feature-card.illustrated-card {
		min-height: 360px
}
}
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
}
	.feature-card,.button {
		transition: none
}
}
/* September client refinement */
.country-list span{
	display:inline-flex;
	align-items:center;
	gap:10px
}
.country-list img{
	width:32px;
	height:23px;
	display:block;
	object-fit:cover;
	border-radius:7px;
	box-shadow:0 4px 12px rgba(26,20,24,.18)
}
.service-grid{
	grid-template-columns:repeat(6,1fr)
}
.service-grid .illustrated-card{
	grid-column:span 2;
	min-height:390px;
	isolation:isolate;
	transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-radius .5s ease
}
.service-grid .illustrated-card:nth-child(1),.service-grid .illustrated-card:nth-child(2){
	grid-column:span 3
}
.illustrated-card{
	overflow:hidden
}
.illustrated-card::before{
	content:"";
	position:absolute;
	z-index:1;
	inset:-40% -70%;
	background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);
	transform:translateX(-55%) rotate(8deg);
	transition:transform .85s cubic-bezier(.22,1,.36,1);
	pointer-events:none
}
.illustrated-card img{
	transition:transform .85s cubic-bezier(.22,1,.36,1),filter .6s ease
}
.illustrated-card .card-copy{
	z-index:3;
	transition:transform .5s cubic-bezier(.22,1,.36,1)
}
.illustrated-card:hover,.illustrated-card:focus-within{
	transform:translateY(-10px);
	border-radius:34px;
	box-shadow:0 30px 70px rgba(60,17,36,.22)
}
.illustrated-card:hover::before,.illustrated-card:focus-within::before{
	transform:translateX(55%) rotate(8deg)
}
.illustrated-card:hover img,.illustrated-card:focus-within img{
	transform:scale(1.09);
	filter:saturate(1.08) contrast(1.03)
}
.illustrated-card:hover .card-copy,.illustrated-card:focus-within .card-copy{
	transform:translateY(-6px)
}
.tool-grid .illustrated-card a{
	display:inline-flex;
	margin-top:15px;
	color:#fff;
	font-weight:800;
	text-decoration:underline;
	text-decoration-color:#ff8ab6;
	text-underline-offset:5px
}
.service-kicker{
	margin:0 0 9px!important;
	color:#ffafcb!important;
	font-size:.73rem!important;
	font-weight:900;
	letter-spacing:.1em;
	text-transform:uppercase
}
@media(max-width:900px){
	.service-grid{
		grid-template-columns:1fr 1fr
}
	.service-grid .illustrated-card,.service-grid .illustrated-card:nth-child(1),.service-grid .illustrated-card:nth-child(2){
		grid-column:span 1
}
}
@media(max-width:620px){
	.service-grid{
		grid-template-columns:1fr
}
	.country-list img{
		width:28px;
		height:20px
}
	.service-grid .illustrated-card{
		min-height:390px
}
}
/* Loyalty-first product preview */
.loyalty-app-shell{
	position:relative;
	z-index:2;
	width:min(540px,96%);
	padding:24px;
	border:1px solid rgba(255,255,255,.8);
	border-radius:34px;
	background:rgba(255,255,255,.88);
	box-shadow:0 36px 80px rgba(67,27,44,.22);
	backdrop-filter:blur(18px);
	transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)
}
.loyalty-app-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:18px
}
.loyalty-app-top img{
	width:132px
}
.loyalty-app-top span{
	padding:7px 11px;
	border-radius:999px;
	background:#fff1f6;
	color:#e80469;
	font-size:.72rem;
	font-weight:900
}
/* Client cross-border carousel and supplied product imagery */
.country-carousel{
	min-width:0;
	padding:42px 38px 30px;
	background:#65113e;
	color:#fff
}
.country-carousel-track{
	min-height:360px;
	display:grid;
	place-items:center;
	overflow:hidden
}
.country-slide{
	display:none;
	width:min(100%,340px);
	min-height:360px;
	padding:30px 24px;
	place-items:center;
	align-content:center;
	gap:22px;
	border:1px solid rgba(255,255,255,.22);
	border-radius:24px;
	background:#78164a
}
.country-slide[aria-current="true"]{
	display:grid
}
.country-slide[hidden]{
	display:none
}
.country-slide>img{
	width:74px;
	height:48px;
	object-fit:cover;
	border-radius:9px;
	border:2px solid rgba(255,255,255,.75)
}
.country-slide strong{
	font-size:1.12rem
}
.dummy-qr{
	width:148px;
	aspect-ratio:1;
	border:12px solid #fff;
	border-radius:12px;
	background-color:#fff;
	background-image:linear-gradient(90deg,#e80469 14%,transparent 14%,transparent 28%,#e80469 28%,#e80469 42%,transparent 42%,transparent 56%,#e80469 56%,#e80469 70%,transparent 70%,transparent 84%,#e80469 84%),linear-gradient(#e80469 14%,transparent 14%,transparent 28%,#e80469 28%,#e80469 42%,transparent 42%,transparent 56%,#e80469 56%,#e80469 70%,transparent 70%,transparent 84%,#e80469 84%);
	background-size:100% 100%
}
.country-carousel-controls{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin-top:24px
}
.country-carousel-controls button{
	min-width:100px;
	padding:11px 15px;
	border:1px solid rgba(255,255,255,.4);
	border-radius:999px;
	background:transparent;
	color:#fff;
	font:inherit;
	font-weight:800;
	cursor:pointer
}
.country-carousel-controls span{
	min-width:50px;
	text-align:center;
	font-weight:900
}
.service-grid.has-four{
	grid-template-columns:repeat(2,minmax(0,1fr))
}
.service-grid.has-four .illustrated-card,.service-grid.has-four .illustrated-card:nth-child(1),.service-grid.has-four .illustrated-card:nth-child(2){
	grid-column:auto
}
.illustrated-card.product-card>img{
	object-fit:contain;
	padding:26px;
	background:#fff5f8;
	opacity:1
}
.story-visual img[src*="assets/products/jomkumpul-soundbox"]{
	object-fit:contain;
	padding:34px;
	background:#fff5f8
}
.story-visual img[src*="assets/products/jomkumpul-app-community"]{
	object-position:center
}
.illustrated-card small{
	position:relative;
	z-index:2;
	display:block;
	margin-top:12px;
	color:#d5d9e2;
	line-height:1.5
}
@media(max-width:900px){
	.reach-card{
		grid-template-columns:1fr
}
	.country-carousel{
		padding:34px 26px
}
	.service-grid.has-four{
		grid-template-columns:1fr 1fr
}
}
@media(max-width:620px){
	.country-carousel{
		padding:28px 18px
}
	.country-carousel-track,.country-slide{
		min-height:330px
}
	.service-grid.has-four{
		grid-template-columns:1fr
}
}
.member-card{
	position:relative;
	overflow:hidden;
	padding:26px;
	border-radius:25px;
	background:linear-gradient(130deg,#111724,#252b38);
	color:#fff
}
.member-card::after{
	content:"★";
	position:absolute;
	right:-16px;
	top:-38px;
	color:rgba(255,255,255,.06);
	font-size:10rem
}
.member-card small{
	display:block;
	color:#abb1be
}
.member-card>strong{
	display:block;
	margin:8px 0 24px;
	font-size:2.7rem;
	line-height:1
}
.member-card strong em{
	font-size:.9rem;
	font-style:normal;
	color:#ff9abc
}
.tier-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:.76rem
}
.tier-row b{
	padding:5px 9px;
	border-radius:999px;
	background:linear-gradient(110deg,#ffb15e,#ff6a00);
	color:#fff
}
.points-progress{
	height:8px;
	margin:12px 0 9px;
	border-radius:999px;
	background:rgba(255,255,255,.12);
	overflow:hidden
}
.points-progress i{
	display:block;
	width:74%;
	height:100%;
	border-radius:inherit;
	background:linear-gradient(90deg,#ff6a00,#e80469)
}
.member-card p{
	margin:0;
	color:#bfc4ce;
	font-size:.68rem
}
.reward-preview{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:center;
	gap:18px;
	margin:15px 0;
	padding:17px;
	border:1px solid #f0dde4;
	border-radius:19px;
	background:#fff8fb
}
.reward-preview div:first-child{
	display:grid;
	gap:4px
}
.reward-preview span,.reward-preview small{
	color:#777d8c;
	font-size:.68rem
}
.reward-preview strong{
	font-size:.98rem
}
.reward-stamp{
	width:62px;
	height:62px;
	display:grid;
	place-items:center;
	border:2px dashed #e80469;
	border-radius:50%;
	color:#e80469;
	font-size:.55rem;
	font-weight:900;
	transform:rotate(8deg)
}
.loyalty-tabs{
	display:flex;
	justify-content:space-around;
	padding-top:3px;
	color:#777d8c;
	font-size:.72rem;
	font-weight:800
}
.loyalty-tabs .active{
	color:#e80469
}
.phone-chart{
	position:relative;
	height:18px;
	margin:18px 0 20px;
	border:0;
	border-radius:999px;
	background:#272e39;
	clip-path:none;
	overflow:hidden
}
.phone-chart::after{
	content:"";
	position:absolute;
	inset:0 24% 0 0;
	border-radius:inherit;
	background:linear-gradient(90deg,#ff6a00,#e80469)
}
.phone-list>div:last-child b{
	color:#ff8ab6
}
@media(max-width:620px){
	.loyalty-app-shell{
		padding:17px;
		border-radius:26px
}
	.member-card{
		padding:21px
}
	.member-card>strong{
		font-size:2.15rem
}
	.reward-preview{
		padding:14px
}
	.reward-stamp{
		width:52px;
		height:52px
}
}
/* Homepage Media feed */
.media-home{
	padding-top:105px;
	padding-bottom:120px
}
.media-home-heading{
	align-items:end
}
.media-home-heading>div:last-child{
	display:grid;
	justify-items:start;
	gap:20px
}
.media-home-heading>div:last-child>p{
	margin:0
}
.media-all{
	white-space:nowrap
}
.media-home-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:23px
}
.media-home-card{
	position:relative;
	overflow:hidden;
	min-width:0;
	border:1px solid #eadfe4;
	border-radius:25px;
	background:#fff;
	box-shadow:0 18px 50px rgba(45,27,36,.08);
	transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-radius .45s ease
}
.media-home-card>a{
	display:block;
	height:100%
}
.media-home-card img{
	display:block;
	width:100%;
	height:235px;
	object-fit:cover;
	transition:transform .75s cubic-bezier(.22,1,.36,1),filter .45s ease
}
.media-home-card>a>div{
	position:relative;
	z-index:2;
	padding:27px
}
.media-home-card span{
	display:block;
	color:#e80469;
	font-size:.72rem;
	font-weight:900;
	letter-spacing:.08em;
	text-transform:uppercase
}
.media-home-card h3{
	margin:13px 0 11px;
	font-size:1.35rem;
	line-height:1.22
}
.media-home-card p{
	margin:0 0 20px;
	color:#626879;
	line-height:1.65
}
.media-home-card b{
	color:#e80469;
	font-size:.86rem
}
.media-home-card:hover,.media-home-card:focus-within{
	transform:translateY(-10px);
	border-radius:35px;
	box-shadow:0 30px 70px rgba(60,17,36,.16)
}
.media-home-card:hover img,.media-home-card:focus-within img{
	transform:scale(1.075);
	filter:saturate(1.08)
}
@media(max-width:900px){
	.media-home-grid{
		grid-template-columns:1fr 1fr
}
	.media-home-card:last-child{
		grid-column:1/-1
}
	.media-home-card:last-child img{
		height:300px
}
}
@media(max-width:620px){
	.media-home{
		padding-top:75px;
		padding-bottom:85px
}
	.media-home-grid{
		grid-template-columns:1fr
}
	.media-home-card:last-child{
		grid-column:auto
}
	.media-home-card img,.media-home-card:last-child img{
		height:220px
}
}
/* Download panel refinement */
.download-panel{
	position:relative;
	grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
	gap:64px;
	background:linear-gradient(132deg,#551136 0%,#741344 54%,#a31359 100%);
	box-shadow:0 28px 70px rgba(78,17,49,.16)
}
.download-panel::before{
	content:"";
	position:absolute;
	right:-150px;
	top:-190px;
	width:430px;
	height:430px;
	border:90px solid rgba(255,255,255,.055);
	border-radius:50%;
	pointer-events:none
}
.download-copy{
	position:relative;
	z-index:2
}
.download-copy .store-link:not(.is-pending){
	border-color:#fff;
	background:#fff;
	color:#65123e;
	box-shadow:0 15px 34px rgba(52,7,31,.24)
}
.download-copy .store-link:not(.is-pending):hover{
	transform:translateY(-3px);
	box-shadow:0 20px 40px rgba(52,7,31,.3)
}
.download-copy .store-link.is-pending{
	background:rgba(76,10,45,.28)
}
.download-showcase{
	position:relative;
	z-index:2;
	width:100%;
	padding:18px;
	border:1px solid rgba(255,255,255,.72);
	border-radius:30px;
	background:rgba(255,255,255,.93);
	color:#351427;
	box-shadow:0 34px 70px rgba(48,5,29,.3);
	transform:rotate(1.25deg);
	transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.download-showcase:hover{
	transform:rotate(0deg) translateY(-6px)
}
.download-logo-card{
	min-height:86px;
	padding:13px 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #f3e2e9;
	border-radius:20px;
	background:#fff
}
.download-logo-card img{
	display:block;
	width:min(245px,84%);
	height:auto
}
.download-points-card{
	position:relative;
	overflow:hidden;
	margin-top:14px;
	padding:25px;
	border-radius:22px;
	background:linear-gradient(128deg,#5a1239 0%,#8f1551 58%,#d41469 100%);
	color:#fff
}
.download-points-card::after{
	content:"★";
	position:absolute;
	right:-14px;
	top:-47px;
	color:rgba(255,255,255,.075);
	font-size:10rem;
	line-height:1
}
.download-points-card small{
	display:block;
	color:#ffd6e6;
	font-size:.74rem;
	font-weight:800;
	letter-spacing:.04em
}
.download-points-card>strong{
	position:relative;
	z-index:1;
	display:block;
	margin:7px 0 23px;
	font-size:clamp(2.35rem,4vw,3.25rem);
	line-height:1;
	letter-spacing:-.045em
}
.download-points-card strong em{
	font-size:.82rem;
	font-style:normal;
	letter-spacing:0;
	color:#ffc0d8
}
.download-tier{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	font-size:.72rem
}
.download-tier span{
	padding:6px 10px;
	border-radius:999px;
	background:linear-gradient(115deg,#ff9b38,#ff5b31);
	font-weight:900
}
.download-tier b{
	color:#ffd6e6;
	font-weight:700
}
.download-progress{
	position:relative;
	z-index:1;
	height:8px;
	margin-top:12px;
	overflow:hidden;
	border-radius:999px;
	background:rgba(255,255,255,.16)
}
.download-progress i{
	display:block;
	width:74%;
	height:100%;
	border-radius:inherit;
	background:linear-gradient(90deg,#ff9b38,#ffdc72)
}
.download-reward-row{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:14px;
	margin-top:14px;
	padding:15px 16px;
	border:1px solid #f0dbe4;
	border-radius:19px;
	background:#fff8fb
}
.download-reward-icon{
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	border-radius:14px;
	background:linear-gradient(135deg,#ff6a00,#e80469);
	color:#fff;
	font-size:1rem;
	box-shadow:0 9px 20px rgba(232,4,105,.2)
}
.download-reward-row div{
	display:grid;
	gap:3px
}
.download-reward-row small{
	color:#8b687a;
	font-size:.68rem;
	font-weight:700
}
.download-reward-row strong{
	font-size:.9rem
}
.download-reward-row>b{
	color:#e80469;
	font-size:.72rem;
	white-space:nowrap
}
@media(max-width:900px){
	.download-panel{
		grid-template-columns:1fr
}
	.download-showcase{
		max-width:540px;
		margin:0 auto
}
}
@media(max-width:620px){
	.download-panel{
		padding:38px 24px;
		gap:38px
}
	.download-showcase{
		padding:13px;
		border-radius:24px;
		transform:none
}
	.download-showcase:hover{
		transform:translateY(-4px)
}
	.download-logo-card{
		min-height:72px
}
	.download-logo-card img{
		width:min(210px,84%)
}
	.download-points-card{
		padding:21px
}
	.download-tier{
		align-items:flex-start;
		flex-direction:column;
		gap:8px
}
	.download-reward-row{
		grid-template-columns:auto 1fr
}
	.download-reward-row>b{
		grid-column:2
}
}
/* Source-approved brand content inside the established layout */
.brand-showcase{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:24px
}
.brand-showcase>img:first-child{
	width:min(300px,62%);
	height:auto;
	position:relative;
	z-index:2
}
.brand-showcase-logo{
	width:min(330px,72%);
	height:auto;
	position:relative;
	z-index:2
}
.brand-phone{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:16px
}
.brand-phone img{
	width:145px;
	height:auto
}
.brand-phone strong{
	font-family:"Poppins",sans-serif;
	font-size:1.35rem;
	color:#130F10
}
.brand-phone p{
	max-width:210px;
	color:#4A4958
}
.app-brand-panel{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px;
	min-height:330px;
	transform:none
}
.app-brand-panel:hover{
	transform:none
}
.app-brand-panel img:first-child{
	width:150px;
	height:auto
}
.app-brand-panel img:last-child{
	width:min(330px,88%);
	height:auto
}
/* Client spacing preference */
.download-app{
	padding:105px 0 0
}
/* Editorial redesign based on the latest client review */
body{
	background:#fff9f6
}
.hero-product-shot{
	position:relative;
	overflow:visible;
	min-height:570px;
	background:#f6dfe6;
	border-radius:4px
}
.hero-product-shot::before{
	content:"";
	position:absolute;
	inset:24px -22px -22px 24px;
	z-index:0;
	background:#f7cfdc
}
.hero-product-shot>img{
	position:absolute;
	z-index:1;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	border-radius:4px
}
.hero-product-shot figcaption{
	position:absolute;
	z-index:2;
	left:50%;
	bottom:18px;
	display:flex;
	gap:6px;
	transform:translateX(-50%);
	white-space:nowrap
}
.hero-product-shot figcaption span{
	padding:8px 13px;
	background:#fff9f6;
	color:#281724;
	font-size:.72rem;
	font-weight:900;
	border:1px solid rgba(40,23,36,.16)
}
.client-flow{
	gap:0;
	border-top:1px solid #e9cdd7;
	border-bottom:1px solid #e9cdd7
}
.client-flow span{
	padding:22px 14px;
	border:0;
	border-right:1px solid #e9cdd7;
	border-radius:0;
	background:transparent;
	text-align:left
}
.client-flow span:last-child{
	border-right:0
}
.client-flow span::after{
	display:none!important
}
.client-benefits{
	width:100%;
	padding:105px 0
}
.client-benefits-head,.benefit-editorial{
	width:min(1180px,calc(100% - 48px));
	margin-left:auto;
	margin-right:auto
}
.client-benefits-head{
	display:grid;
	grid-template-columns:minmax(0,.8fr) minmax(300px,.55fr);
	column-gap:80px;
	align-items:end
}
.client-benefits-head .eyebrow{
	grid-column:1/-1
}
.client-benefits-head h2{
	margin-bottom:0
}
.client-benefits-head>p:last-child{
	margin:0
}
.benefit-editorial{
	margin-top:52px;
	border-top:1px solid #e9cdd7
}
.benefit-story{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	min-height:520px;
	border-bottom:1px solid #e9cdd7
}
.benefit-story-image{
	min-height:520px;
	overflow:hidden
}
.benefit-story-image img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover
}
.benefit-story-copy{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:60px 7vw;
	background:#fff2f2
}
.benefit-story-copy>span{
	color:#e80469;
	font-size:.72rem;
	font-weight:900;
	letter-spacing:.14em;
	text-transform:uppercase
}
.benefit-story-copy h3{
	margin:16px 0 30px;
	font-size:clamp(2rem,3.8vw,4rem);
	line-height:1.02;
	letter-spacing:-.045em
}
.benefit-story-copy dl{
	margin:0
}
.benefit-story-copy dl>div{
	padding:18px 0;
	border-top:1px solid #dfc5cf
}
.benefit-story-copy dt{
	font-weight:900
}
.benefit-story-copy dd{
	margin:7px 0 0;
	color:#626879;
	line-height:1.6
}
.benefit-story-reverse .benefit-story-image{
	order:2
}
.benefit-story-reverse .benefit-story-copy{
	order:1;
	background:#f9e8ee
}
.download-app{
	width:100%;
	padding: 0px
}
.download-editorial{
	display:grid;
	grid-template-columns:minmax(0,1fr) 260px minmax(260px,.78fr);
	align-items:stretch;
	width:min(1320px,calc(100% - 48px));
	min-height:500px;
	margin:0 auto;
	background:unset
}
.download-editorial .download-copy{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:64px
}
.download-editorial .download-copy h2{
	font-size:clamp(2.7rem,5vw,5.4rem)
}
.download-editorial .download-copy p{
	color:#5e5660
}
.download-editorial .store-link{
	align-self:flex-start;
	border:0;
	border-radius:2px;
	background:#281724!important;
	color:#fff!important;
	box-shadow:none!important
}
.download-phone{
	align-self:center;
	min-height:330px;
	margin:40px 0;
	padding:38px 24px;
	display:flex;
	flex-direction:column;
	border:7px solid #281724;
	border-radius:34px;
	background:#fff9f6;
	box-shadow:16px 16px 0 #f6ccda
}
.download-phone img{
	width:48px;
	height:48px;
	object-fit:contain;
	margin-bottom:18px
}
.download-phone small{
	color:#e80469;
	font-weight:900
}
.download-phone strong{
	margin-top:18px;
	font-size:2rem;
	line-height:1.1
}
.download-phone span{
	margin-top:auto;
	padding-top:25px;
	border-top:1px solid #ead8df;
	color:#6b6470;
	font-size:.8rem
}
.download-photo{
	margin:0;
	min-height:500px;
	overflow:hidden
}
.download-photo img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover
}
.cross-border-band{
	position:relative;
	overflow:hidden;
	width:100%;
	padding:92px max(24px,calc((100% - 1180px)/2));
	background:#fff0ee;
	border-top:1px solid #f0cfd7;
	border-bottom:1px solid #f0cfd7
}
.cross-border-band::before{
	content:"";
	position:absolute;
	left:-90px;
	top:-110px;
	width:260px;
	height:260px;
	border:38px solid rgba(232,4,105,.09);
	border-radius:50%
}
.cross-border-heading{
	position:relative;
	z-index:1;
	max-width:780px;
	margin:0 auto 50px;
	text-align:center
}
.cross-border-heading h2{
	margin:8px 0 12px;
	font-size:clamp(2.6rem,5vw,5rem);
	line-height:1;
	letter-spacing:-.05em;
	color:#4f1236
}
.cross-border-heading>p:last-child{
	margin:0;
	color:#626879;
	line-height:1.65
}
.country-rail{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:repeat(6,1fr);
	border-top:1px solid #e5bcc9;
	border-bottom:1px solid #e5bcc9
}
.country-rail>div{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:13px;
	min-height:130px;
	padding:20px 10px;
	border-right:1px solid #e5bcc9;
	text-align:center
}
.country-rail>div:last-child{
	border-right:0
}
.country-rail img{
	width:54px;
	height:36px;
	object-fit:cover;
	border:1px solid #d7c5cb
}
.country-rail span{
	font-size:.86rem;
	font-weight:900
}
.cross-border-band>small{
	position:relative;
	z-index:1;
	display:block;
	margin-top:20px;
	color:#7e7079;
	text-align:center
}
.service-ledger{
	border-top:1px solid #dfc5cf
}
.service-ledger article{
	display:grid;
	grid-template-columns:70px minmax(0,1fr) minmax(260px,.62fr);
	gap:34px;
	align-items:center;
	min-height:310px;
	padding:34px 0;
	border-bottom:1px solid #dfc5cf
}
.service-ledger-number{
	align-self:start;
	padding-top:8px;
	color:#e80469;
	font-size:.78rem;
	font-weight:900;
	letter-spacing:.12em
}
.service-ledger h3{
	margin:0 0 12px;
	font-size:clamp(1.8rem,3vw,3rem);
	line-height:1.05
}
.service-ledger p{
	max-width:690px;
	margin:0;
	color:#626879;
	line-height:1.7
}
.service-ledger a{
	display:inline-block;
	margin-top:18px;
	color:#e80469;
	font-weight:900;
	text-decoration:underline;
	text-underline-offset:5px
}
.service-ledger small{
	display:block;
	margin-top:12px;
	color:#7b7078
}
.service-ledger img{
	width:100%;
	height:240px;
	display:block;
	object-fit:cover
}
.service-ledger .service-product-image{
	object-fit:contain;
	padding:24px;
	background:#fff0f2
}
.media-home-grid{
	gap:0;
	border-top:1px solid #dfc5cf;
	border-bottom:1px solid #dfc5cf
}
.media-home-card{
	border:0;
	border-right:1px solid #dfc5cf;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	transition:none
}
.media-home-card:last-child{
	border-right:0
}
.media-home-card img{
	height:220px;
	transition:none
}
.media-home-card:hover,.media-home-card:focus-within{
	transform:none;
	border-radius:0;
	box-shadow:none
}
.media-home-card:hover img,.media-home-card:focus-within img{
	transform:none;
	filter:none
}
.vision-grid>div{
	border-radius:0!important;
	box-shadow:none!important;
	background:transparent!important;
	border-top:2px solid #e80469!important
}
@media(max-width:900px){
	.hero-product-shot{
		min-height:480px
}
	.client-benefits-head{
		grid-template-columns:1fr;
		gap:18px
}
	.benefit-story{
		grid-template-columns:1fr
}
	.benefit-story-image{
		min-height:420px
}
	.benefit-story-reverse .benefit-story-image,.benefit-story-reverse .benefit-story-copy{
		order:initial
}
	.download-editorial{
		grid-template-columns:1fr 240px
}
	.download-editorial .download-copy{
		grid-column:1/-1;
		padding:52px
}
	.download-photo{
		min-height:420px
}
	.country-rail{
		grid-template-columns:repeat(3,1fr)
}
	.country-rail>div:nth-child(3){
		border-right:0
}
	.country-rail>div:nth-child(-n+3){
		border-bottom:1px solid #e5bcc9
}
	.service-ledger article{
		grid-template-columns:54px 1fr
}
	.service-ledger img{
		grid-column:2;
		height:320px
}
	.media-home-grid{
		grid-template-columns:1fr 1fr
}
	.media-home-card:last-child{
		border-top:1px solid #dfc5cf;
		border-right:0
}
}
@media(max-width:620px){
	.hero-product-shot{
		min-height:420px
}
	.hero-product-shot::before{
		inset:14px -10px -10px 14px
}
	.hero-product-shot figcaption span{
		padding:7px 9px;
		font-size:.64rem
}
	.client-benefits{
		padding:70px 0
}
	.client-benefits-head,.benefit-editorial{
		width:min(100% - 30px,1180px)
}
	.benefit-story-image{
		min-height:310px
}
	.benefit-story-copy{
		padding:38px 24px
}
	.download-editorial{
		width:100%;
		grid-template-columns:1fr;
		padding-bottom:0
}
	.download-editorial .download-copy{
		padding:42px 24px
}
	.download-phone{
		width:220px;
		margin:10px auto 45px
}
	.download-photo{
		min-height:420px
}
	.country-rail{
		grid-template-columns:1fr 1fr
}
	.country-rail>div,.country-rail>div:nth-child(3){
		border-right:1px solid #e5bcc9;
		border-bottom:1px solid #e5bcc9
}
	.country-rail>div:nth-child(even){
		border-right:0
}
	.country-rail>div:nth-last-child(-n+2){
		border-bottom:0
}
	.service-ledger article{
		grid-template-columns:38px 1fr;
		gap:18px;
		padding:30px 0
}
	.service-ledger img{
		height:240px
}
	.media-home-grid{
		grid-template-columns:1fr
}
	.media-home-card{
		border-right:0;
		border-bottom:1px solid #dfc5cf
}
	.media-home-card:last-child{
		border-bottom:0
}
}
/* Client-approved homepage hero reference */
.hero{
	width:min(1180px,calc(100% - 48px));
	min-height:620px;
	padding:48px 0;
	grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
	gap:72px;
	overflow:hidden;
	border:0;
	border-radius:0;
	background:unset
}
.hero::after{
	display:none
}
.hero-copy{
	max-width:650px
}
.hero .eyebrow{
	margin-bottom:28px;
	font-size:.72rem;
	letter-spacing:.16em
}
.hero h1{
	max-width:650px;
	color:#241925;
	font-size:clamp(4rem,6vw,6rem);
	line-height:.91;
	letter-spacing:-.065em
}
.hero h1::after{
	display:none
}
.hero h1 span{
	display:block;
	color:#e80469;
	background:linear-gradient(100deg,#f43d75 0%,#ff6a00 92%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	line-height: 1.05;
  padding-bottom: 0.06em
}
.hero-lede{
	max-width:610px;
	margin:28px 0 26px;
	color:#626879;
	font-size:1.08rem;
	line-height:1.55
}
.hero-actions{
	gap:12px
}
.hero-actions .button{
	min-height:54px;
	padding:14px 24px;
	border-radius:999px;
	background:linear-gradient(100deg,#f43d75,#ff6a00);
	box-shadow:none
}
.hero-actions .button-secondary{
	background:#fff9f6;
	color:#241925;
	border:1px solid #e7d9de
}
.hero-proof{
	gap:22px;
	margin-top:25px;
	font-size:.78rem
}
.hero-proof span::before{
	content:"✓";
	width:auto;
	height:auto;
	margin-right:7px;
	border-radius:0;
	background:transparent;
	color:#e80469;
	font-weight:900
}
.hero-product-shot{
	min-height:540px;
	margin-right:22px;
	border-radius:26px;
	background:#f8d2de
}
.hero-product-shot::before{
	inset:20px -20px -20px 20px;
	border-radius:26px;
	background:#f8d2de
}
.hero-product-shot>img{
	border-radius:26px
}
.hero-product-shot figcaption{
	bottom:16px;
	gap:6px
}
.hero-product-shot figcaption span{
	padding:8px 14px;
	border:0;
	border-radius:999px;
	background:#fff9f6;
	color:#241925;
	font-size:.7rem
}
@media(max-width:980px){
	.hero{
		grid-template-columns:1fr minmax(340px,.8fr);
		gap:40px
}
	.hero h1{
		font-size:clamp(3.5rem,7vw,5rem)
}
	.hero-product-shot{
		min-height:500px
}
}
@media(max-width:780px){
	.hero{
		width:min(100% - 30px,1180px);
		grid-template-columns:1fr;
		gap:42px;
		padding:60px 0
}
	.hero-copy{
		max-width:none
}
	.hero h1{
		max-width:680px;
		font-size:clamp(3.5rem,12vw,5.2rem)
}
	.hero-product-shot{
		width:min(calc(100% - 20px),440px);
		min-height:570px;
		margin:0 12px 20px auto
}
	.hero-actions{
		align-items:flex-start
}
	.hero-actions .button{
		width:auto
}
	.hero-proof{
		align-items:flex-start
}
}
@media(max-width:480px){
	.hero{
		padding:48px 0
}
	.hero h1{
		font-size:clamp(3rem,14vw,4.1rem)
}
	.hero-lede{
		font-size:1rem
}
	.hero-actions{
		display:grid
}
	.hero-actions .button{
		width:100%
}
	.hero-proof{
		display:grid;
		gap:10px
}
	.hero-product-shot{
		min-height:480px
}
	.hero-product-shot::before{
		inset:12px -10px -10px 12px
}
	.hero-product-shot figcaption{
		left:12px;
		right:12px;
		justify-content:center;
		transform:none
}
	.hero-product-shot figcaption span{
		padding:7px 10px;
		font-size:.64rem
}
}
/* Client-approved About and JomKumpul Idea references */
.about-reference{
	width:min(1220px,calc(100% - 48px));
	padding:110px 0 100px;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	column-gap:96px;
	row-gap:72px
}
.about-reference h2{
	max-width:600px;
	font-size:clamp(3.25rem,5.2vw,5.4rem);
	line-height:.96;
	letter-spacing:-.06em
}
.about-reference .client-intro-copy{
	padding-top:0
}
.about-reference .client-intro-copy p{
	font-size:1.05rem;
	line-height:1.72
}
.about-principles{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px
}
.about-principles article{
	min-height:210px;
	padding:30px 26px;
	border-top:3px solid #e80469;
	background:#fff;
	box-shadow:0 16px 36px rgba(54,28,41,.09)
}
.about-principles span{
	color:#e80469;
	font-weight:900
}
.about-principles h3{
	margin:22px 0 16px;
	font-size:1.2rem
}
.about-principles p{
	margin:0;
	color:#3e3540;
	line-height:1.6
}
.kumpul-idea{
	width:100%;
	padding:34px max(24px,calc((100% - 1148px)/2));
	display:grid;
	grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
	align-items:center;
	gap:62px;
	border-top:1px solid #f0d8df;
	border-bottom:1px solid #f0d8df;
	background:#fff4f6
}
.kumpul-idea-art{
	min-height:230px;
	display:grid;
	place-items:center
}
.kumpul-idea-art img{
	display:block;
	width:min(410px,100%);
	height:auto
}
.kumpul-idea-copy .eyebrow{
	margin-bottom:20px
}
.kumpul-idea-copy h2{
	max-width:670px;
	margin:0;
	font-size:clamp(2.6rem,4.2vw,4.5rem);
	line-height:1.02;
	letter-spacing:-.055em
}
.kumpul-idea-copy>p:last-child{
	max-width:720px;
	margin:30px 0 0;
	color:#403744;
	font-size:1rem;
	line-height:1.6
}
@media(max-width:900px){
	.about-reference{
		column-gap:52px
}
	.about-principles article{
		min-height:190px
}
	.kumpul-idea{
		grid-template-columns:minmax(260px,.8fr) 1.2fr;
		gap:34px
}
	.kumpul-idea-art{
		min-height:190px
}
}
@media(max-width:720px){
	.about-reference{
		grid-template-columns:1fr;
		gap:34px;
		padding:74px 0
}
	.about-reference .client-intro-copy{
		padding:0
}
	.about-principles{
		grid-column:auto;
		grid-template-columns:1fr;
		gap:16px
}
	.kumpul-idea{
		grid-template-columns:1fr;
		padding-top:46px;
		padding-bottom:54px;
		gap:20px
}
	.kumpul-idea-art{
		min-height:0
}
	.kumpul-idea-art img{
		width:min(360px,90%)
}
	.kumpul-idea-copy{
		text-align:center
}
	.kumpul-idea-copy .eyebrow{
		margin-top:8px
}
	.kumpul-idea-copy h2,.kumpul-idea-copy>p:last-child{
		margin-left:auto;
		margin-right:auto
}
}
@media(max-width:480px){
	.about-reference{
		width:min(100% - 30px,1220px)
}
	.about-reference h2{
		font-size:clamp(2.9rem,13vw,4rem)
}
	.about-principles article{
		padding:26px 20px
}
	.kumpul-idea{
		padding-left:20px;
		padding-right:20px
}
	.kumpul-idea-copy h2{
		font-size:2.5rem
}
}
/* Homepage audience sections supplied in the client reference */
.audience-section{
	width:100%;
	padding:92px 24px
}
.audience-inner{
	width:min(1148px,100%);
	margin:0 auto
}
.audience-section h2,.merchant-tools-reference h2{
	margin:0;
	color:#241b28;
	font-size:clamp(3rem,5.2vw,5rem);
	line-height:1.02;
	letter-spacing:-.055em
}
.audience-users{
	background:#fff5f7
}
.audience-users h2{
	max-width:900px;
	margin-top:24px
}
.user-benefit-grid,.business-benefit-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:18px;
	margin-top:48px
}
.user-benefit-grid article,.business-benefit-grid article{
	min-height:275px;
	padding:36px 28px;
	border:1px solid #eadbe0;
	border-radius:20px;
	background:#fff
}
.user-benefit-grid span{
	display:block;
	margin-bottom:34px;
	color:#f5c4d4;
	font-size:2rem;
	font-weight:900
}
.user-benefit-grid h3,.business-benefit-grid h3,.merchant-tools-list h3{
	margin:0 0 18px;
	color:#1f1822;
	font-size:1.18rem;
	line-height:1.15
}
.user-benefit-grid p,.business-benefit-grid p,.merchant-tools-list p{
	margin:0;
	color:#403744;
	font-size:1rem;
	line-height:1.55
}
.audience-business{
	background:#fff;
	padding-top:110px;
	padding-bottom:84px
}
.business-heading{
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
	gap:90px;
	align-items:start
}
.business-heading h2{
	max-width:610px;
	margin-top:24px
}
.business-heading>p{
	max-width:500px;
	margin:42px 0 0;
	color:#5e5664;
	font-size:1.05rem;
	line-height:1.6
}
.business-benefit-grid{
	padding-bottom:66px;
	border-bottom:1px solid #eadfe3
}
.business-benefit-grid article{
	min-height:290px;
	padding-top:40px
}
.business-benefit-grid article>span{
	display:block;
	height:24px;
	margin-bottom:28px;
	color:#e80469;
	font-size:1.3rem;
	font-weight:900
}
.merchant-tools-reference{
	width:100%;
	padding:76px 24px 104px;
	background:#fff
}
.merchant-tools-inner{
	width:min(1148px,100%);
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(320px,.9fr) minmax(0,1.15fr);
	gap:74px;
	align-items:center
}
.merchant-tools-reference figure{
	min-height:360px;
	margin:0;
	padding:26px;
	display:grid;
	place-items:center;
	background:#fff5f7
}
.merchant-tools-reference figure img{
	display:block;
	width:min(430px,100%);
	height:330px;
	object-fit:contain
}
.merchant-tools-copy h2{
	max-width:690px;
	margin-top:22px
}
.merchant-tools-list{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin-top:40px
}
.merchant-tools-list article{
	min-height:205px;
	padding:30px 24px;
	border:1px solid #f0cfd9;
	border-radius:16px;
	background:#fff6f8
}
@media(max-width:980px){
	.user-benefit-grid,.business-benefit-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))
}
	.business-heading{
		gap:48px
}
	.merchant-tools-inner{
		gap:42px
}
	.merchant-tools-reference figure img{
		height:290px
}
}
@media(max-width:720px){
	.audience-section{
		padding:70px 20px
}
	.audience-section h2,.merchant-tools-reference h2{
		font-size:clamp(2.65rem,12vw,4rem)
}
	.user-benefit-grid,.business-benefit-grid{
		grid-template-columns:1fr;
		margin-top:36px
}
	.user-benefit-grid article,.business-benefit-grid article{
		min-height:0
}
	.business-heading{
		grid-template-columns:1fr;
		gap:8px
}
	.business-heading>p{
		margin-top:18px
}
	.business-benefit-grid{
		padding-bottom:48px
}
	.merchant-tools-reference{
		padding:60px 20px 78px
}
	.merchant-tools-inner{
		grid-template-columns:1fr;
		gap:42px
}
	.merchant-tools-reference figure{
		min-height:300px;
		padding:18px
}
	.merchant-tools-reference figure img{
		height:270px
}
	.merchant-tools-list{
		grid-template-columns:1fr
}
	.merchant-tools-list article{
		min-height:0
}
}
/* RHB DuitNow QR and cross-border payment feature */
.visually-hidden{
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	padding:0!important;
	margin:-1px!important;
	overflow:hidden!important;
	clip:rect(0,0,0,0)!important;
	white-space:nowrap!important;
	border:0!important
}
.payment-ecosystem{
	position:relative;
	overflow:hidden;
	width:100%;
	padding:86px max(24px,calc((100% - 1180px)/2)) 86px;
	background:#291d2c;
	color:#fff
}
.payment-ecosystem::before{
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:5px;
	background:linear-gradient(90deg,#ff6a00,#fb3613,#e80469)
}
.payment-ecosystem-top{
	display:grid;
	grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
	gap:86px;
	align-items:start;
	padding-bottom:54px
}
.payment-ecosystem-copy .eyebrow{
	color:#ff769f
}
.payment-ecosystem-copy h2{
	max-width:760px;
	margin:24px 0 34px;
	color:#fff;
	font-size:clamp(3.2rem,5.3vw,5.6rem);
	line-height:.98;
	letter-spacing:-.06em
}
.payment-ecosystem-copy>p:not(.eyebrow){
	max-width:650px;
	margin:0;
	color:#f3eaf1;
	font-size:1.04rem;
	line-height:1.65
}
.payment-ecosystem-copy ul{
	display:grid;
	gap:14px;
	margin:30px 0 0;
	padding:0;
	list-style:none
}
.payment-ecosystem-copy li{
	position:relative;
	padding-left:36px;
	color:#fff;
	font-weight:700
}
.payment-ecosystem-copy li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:-2px;
	width:24px;
	height:24px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:linear-gradient(135deg,#ff6a00,#e80469);
	color:#fff;
	font-size:.8rem
}
.duitnow-qr-card{
	width:min(320px,100%);
	min-height:390px;
	margin:0 auto;
	padding:34px 34px 30px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius:38px;
	background:#fff;
	color:#291d2c;
	text-align:center
}
.duitnow-qr-card>span{
	margin-bottom:25px;
	color:#7f7180;
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.18em;
	text-transform:uppercase
}
.duitnow-qr-card img{
	width:174px;
	height:174px;
	display:block
}
.duitnow-qr-card strong{
	margin-top:24px;
	font-size:1.08rem
}
.duitnow-qr-card small{
	margin-top:5px;
	color:#8b6679;
	letter-spacing:.12em
}
.cross-border-carousel{
	position:relative;
	margin:0 -12px;
	padding:22px 86px 32px;
	border-radius:24px 24px 0 0;
	background:linear-gradient(105deg,#fff1f4 0%,#fff7f3 56%,#ffe0b9 100%);
	color:#291d2c
}
.cross-border-carousel::before{
	content:"";
	position:absolute;
	left:-70px;
	top:-34px;
	width:210px;
	height:210px;
	border-radius:50%;
	background:linear-gradient(145deg,rgba(232,4,105,.22),rgba(255,106,0,.13))
}
.cross-border-carousel-heading{
	position:relative;
	z-index:1;
	text-align:center
}
.cross-border-carousel-heading .eyebrow{
	margin:0;
	color:#e80469
}
.cross-border-carousel-heading h3{
	margin:4px 0 3px;
	background:linear-gradient(90deg,#e80469,#ff6a00);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	font-size:clamp(1.7rem,3.2vw,2.7rem);
	line-height:1.05;
	letter-spacing:-.04em
}
.cross-border-carousel-heading>p:last-child{
	margin:0;
	color:#4e4050;
	font-size:.92rem
}
.country-carousel-viewport{
	position:relative;
	z-index:1;
	overflow:hidden;
	margin:20px 0 0
}
.country-carousel-track{
	--country-visible:3;
	display:flex;
	column-gap:18px;
	transition:transform .65s cubic-bezier(.22,.61,.36,1);
	will-change:transform
}
.country-card{
	flex:0 0 calc((100% - (var(--country-visible) - 1)*18px)/var(--country-visible));
	min-width:0;
	height:82px;
	padding:13px 18px;
	display:flex;
	align-items:center;
	gap:14px;
	border:1px solid rgba(232,4,105,.25);
	border-radius:14px;
	background:#fff;
	color:#291d2c
}
.country-card img{
	width:48px;
	height:48px;
	flex:0 0 48px;
	border-radius:50%;
	border:1px solid #ead8de;
	object-fit:cover
}
.country-card span{
	font-size:.92rem;
	font-weight:900
}
.country-arrow{
	position:absolute;
	z-index:2;
	top:calc(50% + 38px);
	width:42px;
	height:42px;
	padding:0;
	display:grid;
	place-items:center;
	border:0;
	border-radius:50%;
	background:#fff;
	color:#5a4860;
	font:900 1.7rem/1 Arial,sans-serif;
	cursor:pointer
}
.country-arrow-previous{
	left:23px
}
.country-arrow-next{
	right:23px
}
.country-carousel-dots{
	position:relative;
	z-index:1;
	height:9px;
	margin-top:17px;
	display:flex;
	justify-content:center;
	gap:7px
}
.country-carousel-dots i{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#f4b5c9;
	transition:width .25s ease,background .25s ease
}
.country-carousel-dots i.is-active{
	width:22px;
	border-radius:999px;
	background:#e80469
}
@media(max-width:900px){
	.payment-ecosystem-top{
		grid-template-columns:1fr;
		gap:48px
}
	.duitnow-qr-card{
		width:min(310px,100%)
}
	.cross-border-carousel{
		padding-left:74px;
		padding-right:74px
}
	.country-carousel-track{
		--country-visible:2
}
	.country-arrow-previous{
		left:18px
}
	.country-arrow-next{
		right:18px
}
}
@media(max-width:620px){
	.payment-ecosystem{
		padding:68px 18px 0
}
	.payment-ecosystem-top{
		gap:38px;
		padding-bottom:42px
}
	.payment-ecosystem-copy h2{
		font-size:clamp(3rem,14vw,4.3rem)
}
	.payment-ecosystem-copy li{
		font-size:.92rem
}
	.duitnow-qr-card{
		min-height:350px;
		padding:28px;
		border-radius:30px
}
	.duitnow-qr-card img{
		width:156px;
		height:156px
}
	.cross-border-carousel{
		margin:0;
		padding:26px 62px 30px
}
	.cross-border-carousel-heading>p:last-child{
		font-size:.82rem
}
	.country-carousel-track{
		--country-visible:1
}
	.country-card{
		height:90px
}
	.country-arrow{
		top:calc(50% + 52px);
		width:38px;
		height:38px
}
	.country-arrow-previous{
		left:14px
}
	.country-arrow-next{
		right:14px
}
}
/* Explicit widths avoid relying on CSS arithmetic division in older mobile browsers. */
.country-card{
	flex-basis:calc((100% - 36px)/3)
}
.country-card{
	justify-content:center;
	text-align:center
}
.country-carousel-track{
	min-height:0;
	overflow:visible
}
@media(max-width:900px){
	.country-card{
		flex-basis:calc((100% - 18px)/2)
}
}
@media(max-width:620px){
	.country-card{
		flex-basis:100%
}
}
/* Official app-store badges */
.app-store-badge{
	width:210px;
	height:66px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border-radius:8px;
	background:#111;
	line-height:0
}
.app-store-badge img{
	width:100%;
	height:100%;
	display:block;
	object-fit:fill
}
.app-store-badge-coming{
	cursor:default
}
.download-badge-layout{
	grid-template-columns:minmax(0,1fr) 300px;
	max-width:1120px;
	min-height:500px
}
.download-badge-layout .app-links{
	align-items:center
}
.download-badge-layout .download-phone{
	margin-right:52px
}
.footer-app-links{
	align-items:center
}
.footer-app-links .app-store-badge{
	width:154px;
	height:48px;
	border-radius:5px
}
@media(max-width:900px){
	.download-badge-layout{
		grid-template-columns:minmax(0,1fr) 250px
}
	.download-badge-layout .download-copy{
		grid-column:auto
}
	.download-badge-layout .download-phone{
		margin-right:36px
}
}

@media(max-width:900px){
	.download-badge-layout{
		grid-template-columns:minmax(0,1fr) 250px
}
	.download-badge-layout .download-copy{
		grid-column:auto
}
	.download-badge-layout .download-phone{
		margin-right:36px
}
}
@media(max-width:720px){
	.download-badge-layout{
		grid-template-columns:1fr
}
	.download-badge-layout .download-copy{
		grid-column:auto
}
	.download-badge-layout .download-phone{
		margin:10px auto 46px
	}
	.download-badge-layout:has(.download-points-preview){
		grid-template-columns:1fr;
		padding:0 24px 48px
	}
	.download-badge-layout:has(.download-points-preview) .download-copy{
		padding-right:0;
		padding-left:0
	}
	.download-points-preview{
		max-width:620px;
		margin:0 auto;
		border-radius:20px
	}
	.download-badge-layout .app-links{
		justify-content:flex-start
}
	.app-store-badge{
		width:190px;
		height:59px
}
}
@media(max-width:440px){
	.download-badge-layout .app-links{
		display:grid;
		grid-template-columns:1fr
}
	.app-store-badge{
		width:200px;
		height:62px
}
}
.download-badge-layout:has(.download-points-preview){
	grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
	max-width:1240px;
	align-items:center
}
.download-points-preview{
	width:100%;
	aspect-ratio:3/1;
	margin:0;
	overflow:hidden;
	border-radius:28px;
	background:#fff;
	box-shadow:0 24px 60px rgba(58,19,41,.13)
}
.download-points-preview img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	object-position:center top
}

/* Keep the orange points panel readable after the desktop rule above. */
@media(max-width:720px){
	.download-badge-layout:has(.download-points-preview){
		width:100%;
		max-width:100%;
		grid-template-columns:minmax(0,1fr);
		padding:0 24px 48px
	}
	.download-badge-layout:has(.download-points-preview) .download-copy{
		min-width:0;
		grid-column:1;
		padding:42px 0 32px
	}
	.download-badge-layout:has(.download-points-preview) .download-copy h2,
	.download-badge-layout:has(.download-points-preview) .download-copy p{
		max-width:100%
	}
	.download-badge-layout:has(.download-points-preview) .download-points-preview{
		grid-column:1;
		min-width:0;
		max-width:620px;
		margin:0 auto;
		border-radius:20px
	}
}

@media(max-width:440px){
	.download-badge-layout:has(.download-points-preview){
		padding-right:18px;
		padding-left:18px
	}
	.download-badge-layout:has(.download-points-preview) .download-copy h2{
		font-size:clamp(2.45rem,13vw,3.4rem);
		line-height:.98
	}
}