@media (max-width: 767px) {
  .sec {
    padding-top: 70px!important; /* match your navbar height */
  }
}

@media (min-width: 768px) {
  .sec {
    padding-top: 80px; /* match your desktop navbar height */
  }
}

.prodfeat {
	border-radius:0px!important;	
	padding-top:60px;
	padding-left:20px!important;
}	

.prodfeat__img img {    
    width: 110%;      /* scale beyond container */
    max-width: 120%;
    height: auto;
    transform: scale(1.1);	
}

@media (max-width: 767px) {
	.prodfeat__img img {    
		width: 110%;      /* scale beyond container */
		max-width: 120%;
		height: auto;
		transform: scale(1.1);
		margin-top: -28px;	
	}
}



/* ===== pricing table ===== */
.signal{
	display:flex;
	align-items:flex-end;
	gap:3px;
	height:16px;
}
.signal i{
	display:block;
	width:4px;
	border-radius:2px;
	background:#DADAE2;
}
.signal i:nth-child(1){ height:25%; }
.signal i:nth-child(2){ height:50%; }
.signal i:nth-child(3){ height:75%; }
.signal i:nth-child(4){ height:100%; }

/* signal bar fill + unlimited dot color, per plan tier */
.c1 .signal.lit-1 i:nth-child(1), .signal.lit-1.c1 i:nth-child(1){ background:#3B6BE0; }
.c1 .signal.lit-2 i:nth-child(-n+2), .signal.lit-2.c1 i:nth-child(-n+2){ background:#3B6BE0; }
.c1 .signal.lit-3 i:nth-child(-n+3), .signal.lit-3.c1 i:nth-child(-n+3){ background:#3B6BE0; }
.c1 .signal.lit-4 i, .signal.lit-4.c1 i{ background:#3B6BE0; }
.c1 .datasimplan-unlimited::before{ color:#3B6BE0; }

.c2 .signal.lit-1 i:nth-child(1), .signal.lit-1.c2 i:nth-child(1){ background:#7C3AED; }
.c2 .signal.lit-2 i:nth-child(-n+2), .signal.lit-2.c2 i:nth-child(-n+2){ background:#7C3AED; }
.c2 .signal.lit-3 i:nth-child(-n+3), .signal.lit-3.c2 i:nth-child(-n+3){ background:#7C3AED; }
.c2 .signal.lit-4 i, .signal.lit-4.c2 i{ background:#7C3AED; }
.c2 .datasimplan-unlimited::before{ color:#7C3AED; }

.c3 .signal.lit-1 i:nth-child(1), .signal.lit-1.c3 i:nth-child(1){ background:#0D9C90; }
.c3 .signal.lit-2 i:nth-child(-n+2), .signal.lit-2.c3 i:nth-child(-n+2){ background:#0D9C90; }
.c3 .signal.lit-3 i:nth-child(-n+3), .signal.lit-3.c3 i:nth-child(-n+3){ background:#0D9C90; }
.c3 .signal.lit-4 i, .signal.lit-4.c3 i{ background:#0D9C90; }
.c3 .datasimplan-unlimited::before{ color:#0D9C90; }

.c4 .signal.lit-1 i:nth-child(1), .signal.lit-1.c4 i:nth-child(1){ background:#E0631F; }
.c4 .signal.lit-2 i:nth-child(-n+2), .signal.lit-2.c4 i:nth-child(-n+2){ background:#E0631F; }
.c4 .signal.lit-3 i:nth-child(-n+3), .signal.lit-3.c4 i:nth-child(-n+3){ background:#E0631F; }
.c4 .signal.lit-4 i, .signal.lit-4.c4 i{ background:#E0631F; }
.c4 .datasimplan-unlimited::before{ color:#E0631F; }

/* ===== Desktop table ===== */
.datasimtable{
	display:none;
	background:#FFFFFF;
	/* border:1px solid #E7E7EC; */
	border-radius:20px;
	overflow:hidden;
	/* box-shadow:0 1px 2px rgba(20,20,30,0.03), 0 20px 40px -24px rgba(20,20,30,0.12); */
}

.datasimrow{ display:grid; grid-template-columns:1.15fr repeat(4,1fr); }
.datasimrow + .datasimrow{ border-top:1px solid #E7E7EC; }

.datasimcell{ padding:15px 20px; display:flex; align-items:center; }

.datasimrow.datasimheader .datasimcell{
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	padding:28px 22px 24px;
	position:relative;
	background-color: #000;
}
.datasimrow.datasimheader .datasimcell:not(:first-child){ /* border-left:1px solid #E7E7EC; */ }

.datasimplan-tag{
	font-size:15px;
	font-weight:500;
	letter-spacing:0.1em;
	text-transform:uppercase;
	/* color:#000; */
	color:#fff;
}

.datasimplan-size{
	font-size:36px;
	font-weight:500;
	/* letter-spacing:-0.02em; */
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.c1 .datasimplan-size{ background:linear-gradient(90deg,#89ABFF,#5B8CFF); -webkit-background-clip:text; background-clip:text; }
.c2 .datasimplan-size{ background:linear-gradient(90deg,#B49CFF,#8B5CF6); -webkit-background-clip:text; background-clip:text; }
.c3 .datasimplan-size{ background:linear-gradient(90deg,#6FE9E0,#22D3C9); -webkit-background-clip:text; background-clip:text; }
.c4 .datasimplan-size{ background:linear-gradient(90deg,#FFB08A,#FF8A5B); -webkit-background-clip:text; background-clip:text; }

.datasimplan-unlimited{
	font-size:18px;
	font-weight:500;
	/* color:#000;*/
	color:#fff;
	margin-top:-15px;
}
.datasimplan-unlimited::before{ content:""; }

.datasimrow-label{ font-weight:500; /* font-size:18px; */ font-size:16px; color:#000;}
.datasimrow-label .datasimdesc{ display:block; font-weight:400; font-size:11.5px; color:#A6A6AF; margin-top:2px; }

.datasimval{ /* font-size:18px; */ font-size:16px; color:#000; }
.datasimval.datasimmuted{ color:#000; }
.datasimx-mark{ color:#A6A6AF;  font-size:13px; }

.datasimprice-row{ background:#FAFAFC; padding:20px 0px;}
.datasimprice-row .datasimcell:not(:first-child){ /* border-left:1px solid #E7E7EC; */ }
.datasimprice{
	font-size:25px;
	font-weight:600;
	color:#131318;
}
.datasimprice .datasimcur{ font-size:30px; font-weight:500; color:#000; margin-right:3px; vertical-align:2px; }

/* ===== Mobile cards ===== */
.datasimcards{ display:grid; gap:16px; }

.datasimcard{
	/* background:#FFFFFF; */
	background: #FAFAFC;
	/* border:1px solid #E7E7EC; */
	border-radius:20px;
	overflow:hidden;
	/* box-shadow:0 1px 2px rgba(20,20,30,0.03), 0 14px 28px -20px rgba(20,20,30,0.14); */
}

.datasimcard-head{
	padding:22px 22px 18px;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	background-color: #000;
}

.datasimcard-head-left{ display:flex; flex-direction:column; gap:8px; }

.datasimcard-body{ padding:2px 22px 6px; }

.datasimspec{
	display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
	padding:13px 0; border-top:1px solid #E7E7EC;
}
.datasimspec-label{ /* font-size:18px; */ font-size:16px; color:#000; flex:0 0 46%; }
.datasimspec-value{ font-size:12.5px; text-align:right; color:#3A3A44; flex:1; text-align:right!important; }

.datasimspec span.spec-value {
    text-align: right;
	font-size: 16px;
}

.datasimcard-foot{
	padding:18px 22px;
	border-top:1px solid #E7E7EC;
	display:flex; justify-content:space-between; align-items:center;
	background:#FAFAFC;
}
.datasimcard-foot .datasimrow-label{ font-size:20px; color:#000; font-weight:600; }

@media (min-width:900px){
	.datasimtable{ display:block; }
	.datasimcards{ display:none; }
}

.foot-note{ margin-top:26px; font-size:16px; color:#000; line-height:1.6; text-align:center; }