An error occurred while processing the template.
The following has evaluated to null or missing:
==> clientProfileList?first [in template "10154#10192#18387089" at line 62, column 26]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign clientProfile = clientProfile... [in template "10154#10192#18387089" at line 62, column 1]
----
1<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
2<#assign oadURL = propsUtil.get('elan.oad.url') >
3<#assign serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext() >
4<#assign themeDisplay = serviceContext.getThemeDisplay() />
5<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
6<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
7<#assign url404 = '/error/404.html' >
8<#assign environment = url?replace('/11t3.*','','r')>
9
10<#assign text_to_apply_source = "vanity url" >
11<#if qstringmap["sms"]?has_content>
12 <#assign sms = 1 >
13 <#assign text_to_apply_source = "sms" >
14</#if>
15<#if qstringmap["qrCode"]?has_content>
16 <#assign text_to_apply_source = "qr code" >
17</#if>
18
19<#assign lc = qstringmap["ecdma-lc"]?first>
20<#assign lc = htmlUtil.escape(lc)>
21<#assign lc = htmlUtil.escapeJS(lc)>
22
23<#assign prefix = "00000" >
24<#assign lcWithPrefix = prefix + lc >
25<#assign withPrefixLength = lcWithPrefix?length >
26<#assign startHere = withPrefixLength - 5>
27<#assign lc = lcWithPrefix?substring(startHere)>
28
29<#if qstringmap["ecid"]?has_content>
30 <#assign ecidExt = qstringmap["ecid"]?first>
31 <#assign ecidExt = htmlUtil.escape(ecidExt)>
32 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
33 <#assign ecidExt = "&ecid=" + ecidExt>
34
35
36 <#assign campaignId = qstringmap["ecid"]?first >
37 <#assign campaignId = htmlUtil.escape(campaignId)>
38 <#assign campaignId = htmlUtil.escapeJS(campaignId)>
39<#else>
40 <#assign ecidExt="">
41 <#assign campaignId = "" >
42</#if>
43
44<#assign isFromDCOLink = false>
45<#assign dcoSourceCode = ''>
46<#if qstringmap["sourcecode"]?has_content>
47 <#assign dcoSourceCode = qstringmap["sourcecode"]?first>
48 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
49 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
50<#elseif qstringmap["sourceCode"]?has_content>
51 <#assign dcoSourceCode = qstringmap["sourceCode"]?first>
52 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
53 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
54</#if>
55
56<#if dcoSourceCode?has_content>
57 <#assign isFromDCOLink = true>
58</#if>
59
60<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! />
61<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
62<#assign clientProfile = clientProfileList?first>
63<#assign partnerName = clientProfile.getMarketingNameLong()>
64<#assign pbu = clientProfile.getPbu()>
65<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
66
67<#assign logoFileName = clientProfile.getLogoBFormat1()?replace(".", "-")?replace("-([^-]*)$", ".$1", "r")?lower_case>
68<#assign cdnLogoUrl = (propsUtil.get('rackspace.cdn.web.url'))!>
69<#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+pbu+'&'+subbu)>
70
71 <#assign clientDataService = (serviceLocator.findService("com.elan.crc.user.service.CrcPbuLocalService"))! />
72<#assign clientProfileDataList = clientDataService.getByPbuAndSubBu(pbu,subbu)>
73<#assign partnerUrl = clientProfileDataList.getPartnerMainUrl()>
74<script>
75//console.log('Partner URL', ${partnerUrl});
76</script>
77<#if partnerUrl?has_content && !partnerUrl?matches(r"(?i)^https?\:\/\/.*")>
78 <#assign partnerUrl = 'https://' + partnerUrl>
79</#if>
80<script>
81//console.log('Partner URL', ${partnerUrl});
82
83</script>
84<#-- Begin: filter duplicated cards-->
85<#assign temp = []>
86<#assign offerTypeList = []>
87<#if (fiCardsData?size > 0)>
88
89
90<!-- redirect to PANO start -->
91<!-- parse URL for page to determine product -->
92<#if (fiCardsData?first.redirectToPANO == "1")>
93 <#assign pageend = url?index_of("?") - 1 >
94 <#assign urlwoquery = url[0..pageend] >
95 <#assign pagestart = urlwoquery?last_index_of("/") + 1 >
96 <#assign productURL = urlwoquery[pagestart..] >
97 <#assign qstringonly = httpUtil.getQueryString(url) >
98
99 <#if (productURL == "consumer-platinum")>
100 <#assign PANOofferType = "108">
101 <#elseif (productURL == "zero-plus")>
102 <#assign PANOofferType = "109">
103 <#elseif (productURL == "zero-plus-business")>
104 <#assign PANOofferType = "132">
105 <#elseif (productURL == "max-cash")>
106 <#assign PANOofferType = "104">
107 <#elseif (productURL == "consumer-edr")>
108 <#assign PANOofferType = "101">
109 <!-- PANOofferType = "103" -->
110 <#elseif (productURL == "secured")>
111 <#assign PANOofferType = "115">
112 <#elseif (productURL == "smart-business-rewards")>
113 <#assign PANOofferType = "144">
114 <#elseif (productURL == "business-cash-preferred")>
115 <#assign PANOofferType = "128">
116 <#elseif (productURL == "business-real-rewards")>
117 <#assign PANOofferType = "143">
118 <#elseif (productURL == "business-platinum")>
119 <#assign PANOofferType = "121">
120 <#elseif (productURL == "max-cash-secured")>
121 <#assign PANOofferType = "147">
122 <#elseif (productURL == "college-real-rewards")>
123 <#assign PANOofferType = "141">
124 <#elseif (productURL == "travel-rewards-plus")>
125 <#assign PANOofferType = "138">
126 <#elseif (productURL == "reserve-rewards-plus")>
127 <#assign PANOofferType = "154">
128 <#else>
129 <#assign PANOofferType = "0">
130 </#if>
131 <#assign redirectToPANO = 'https://www.mycardapply.com/synindex?' + qstringonly + "&offertype=" + PANOofferType >
132 <script>
133 console.log('${productURL}');
134 console.log('${PANOofferType}');
135 console.log('${redirectToPANO}');
136 <!-- append #business to PANO Redirect URL if current URL contains #business. PANO uses this to show business tab as selected -->
137 if(window.location.href.includes('#business')){
138 location.href = '${redirectToPANO}'+'#business';
139 } else {
140 location.href = '${redirectToPANO}';
141 }
142 </script>
143</#if>
144<!-- redirect to PANO end -->
145
146
147 <#assign index = 0>
148 <#list fiCardsData as fib>
149 <#if (fib.offerType?has_content && !(offerTypeList?seq_contains(fib.offerType)))>
150 <#assign offerTypeList = offerTypeList + [fib.offerType]>
151 <#assign temp = temp + fiCardsData[index..index]>
152 </#if>
153 <#assign index = index + 1>
154 </#list>
155 <#assign fiCardsData = temp>
156 <#if (fiCardsData?size > 0)>
157 <div class="content-container content-container-main">
158 <#if url?contains("index")>
159 <#assign product="All Cards">
160 <h1 class="sr-only">${partnerName!'Elan'} Credit Cards</h1>
161 <header class="page-header">
162 <div class="page-header__logo">
163 <#if partnerUrl?has_content>
164 <a href="${partnerUrl!''}">
165 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo">
166 </a>
167 <#else>
168 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo">
169 </#if>
170 </div>
171 </header>
172 <#else>
173 <header class="page-header">
174 <#if !isFromDCOLink>
175 <div class="back-overview hide-desktop">
176 <a href="${environment}/11t3/index?ecdma-lc=${lc}${ecidExt}">Home</a>
177 </div>
178 </#if>
179
180 <div class="header-main-logo">
181 <#if partnerUrl?has_content>
182 <a href="${partnerUrl!''}">
183 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo">
184 </a>
185 <#else>
186 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo">
187 </#if>
188 </div>
189 <#if !isFromDCOLink>
190 <div class="styled-select slate">
191 <nav class="styled-select__dropdown">
192 <div class="back-overview hide-mobile-flex">
193 <a href="${environment}/11t3/index?ecdma-lc=${lc}${ecidExt}">Home</a>
194 </div>
195 <a href="javascript:void(0)" class="dropdown-select" aria-expanded="false">
196 <span class="selected-option"></span>
197 <div class="jn-arrow arrow arrow-right"></div>
198 </a>
199 <a href="javascript:void(0)" aria-label="Open page navigation menu" class="jn-hamburger hamburger" aria-expanded="false">
200 <div class="first-line transform transformed1"></div>
201 <div></div>
202 <div class="transform transformed2"></div>
203 <div></div>
204 </a>
205 <ul>
206 <#list fiCardsData as fib>
207 <#switch fib.offerType>
208 <#case "101">
209 <#assign productURL = "202302/consumer-edr">
210 <#assign productName = "Everyday Rewards+">
211 <#break>
212 <#case "103">
213 <#assign productURL = "202302/consumer-edr">
214 <#assign productName = "Everyday Rewards+">
215 <#break>
216 <#case "104">
217 <#assign productURL = "max-cash">
218 <#assign productName = "Max Cash Preferred Card">
219 <#break>
220 <#case "108">
221 <#assign productURL="202308/consumer-platinum">
222 <#assign productName="Platinum Card">
223 <#break>
224 <#case "109">
225 <#assign productURL="202308/consumer-platinum">
226 <#assign productName="Platinum Card">
227 <#break>
228 <#case "115">
229 <#assign productURL = "secured">
230 <#assign productName = "Secured Card" >
231 <#break>
232 <#case "138">
233 <#assign productURL = "202305/travel-rewards-plus">
234 <#assign productName = "Travel Rewards+" >
235 <#break>
236 <#case "141">
237 <#assign productURL = "college-real-rewards">
238 <#assign productName = "College Real Rewards" >
239 <#break>
240 <#case "147">
241 <#assign productURL = "max-cash-secured">
242 <#assign productName = "Max Cash Secured Card" >
243 <#break>
244 <#case "154">
245 <#assign productURL = "202305/reserve-rewards-plus">
246 <#assign productName = "Reserve Rewards+" >
247 <#break>
248 <#case "121">
249 <#assign productURL = "202208/business-platinum">
250 <#assign productName = "Business Card" >
251 <#break>
252 <#case "128">
253 <#assign productURL = "business-cash-preferred">
254 <#assign productName = "Business Cash Preferred" >
255 <#break>
256 <#case "143">
257 <#assign productURL = "business-real-rewards">
258 <#assign productName = "Business Real Rewards Card" >
259 <#break>
260 <#case "144">
261 <#assign productURL = "smart-business-rewards">
262 <#assign productName = "Smart Business Rewards Card" >
263 <#break>
264 <#default>
265 </#switch>
266 <#if url?matches(".*/${productURL}\\?.*")>
267 <li class="selected" data-value="${productName}" selected="selected"><a href="javascript:void(0)">${productName}</a></li>
268 <#else>
269 <li class="dropdown-item" data-value="${productName}">
270 <a href="${environment}/11t3/${productURL}?ecdma-lc=${lc}${ecidExt}">
271 ${productName}
272 </a>
273 </li>
274 </#if>
275 </#list>
276 </ul>
277 </nav>
278
279 </div>
280 </#if>
281 </header>
282 <script>
283 function toggleFlyOutMenu() {
284 $('.styled-select').toggleClass('show-select');
285 var ariaExpanded = $('.styled-select__dropdown .dropdown-select').attr('aria-expanded');
286 if(ariaExpanded !== null) {
287 var isAriaExpanded;
288 if(ariaExpanded === "true") {
289 isAriaExpanded = true;
290 } else {
291 isAriaExpanded = false
292 }
293 $('.styled-select__dropdown .dropdown-select').attr('aria-expanded', !isAriaExpanded);
294 const ariaLabel = isAriaExpanded? "Open page navigation menu" : "Close page navigation menu";
295 $('.styled-select__dropdown .jn-hamburger').attr('aria-expanded', !isAriaExpanded).attr('aria-label', ariaLabel);
296 }
297 }
298 AUI().ready(function () {
299 var pageSelected = $('.selected').attr('data-value');
300 $('.jn-hamburger, .dropdown-select').click(function () {
301 toggleFlyOutMenu();
302 });
303 $('.styled-select__dropdown').keydown(function(event) {
304 var firstNavigationLink = $('.styled-select__dropdown ul li:visible a').first();
305 var lastNavigationLink = $('.styled-select__dropdown ul li:visible a').last();
306
307 if(event.keyCode === 9 ) {
308 // if they tab outside of the nav close the navigation
309 //shift + tab pressed
310 if(event.shiftKey && firstNavigationLink.is(document.activeElement)) {
311 toggleFlyOutMenu();
312 } else if(!event.shiftKey && lastNavigationLink.is(document.activeElement)) {
313 toggleFlyOutMenu();
314 }
315 }
316 });
317 $('.selected-option').text(pageSelected);
318 });
319 </script>
320 </#if>
321 </div>
322 <script>
323 var reportingData = {};
324
325 //document.addEventListener('DOMContentLoaded', function() {
326 AUI().ready(function () {
327 //console.log('inside ready');
328 var page = location.pathname.split('/')[location.pathname.split('/').length-1];
329 var hostName = location.hostname;
330 function getDomainFromHostname(hostname) {
331 var parts = hostname.split('.');
332 return parts.length === 3 ? parts[1] : parts[0];
333 }
334 var domain = getDomainFromHostname(hostName);
335 var partnerName = "${partnerName!''}";
336 var product = "All Cards";
337 var title = "";
338 var metaDesc = "";
339 var m = document.createElement('meta');
340 switch(page) {
341 case "max-cash-secured":
342 product="Max Cash Secured Card";
343 title = "Earn more on the categories you pick | "+partnerName+" Max Cash Secured Card";
344 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
345 break;
346 case "max-cash":
347 product="Max Cash Preferred Card";
348 title = "Earn a $150 Bonus and 5% cash back | "+partnerName+" Max Cash Preferred Card";
349 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn a $150 Bonus and 5% cash back on the two categories you select.";
350 break;
351 case "consumer-platinum":
352 product="Platinum Card";
353 title = "The purchasing power of Zero | "+partnerName+" Platinum Card";
354 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Limited Time Offer. 0% Intro APR on Purchases and Balance Transfers for 18 Billing Cycles Consolidate your Balances with the "+partnerName+" Intro APR Card.";
355 break;
356 case "consumer-edr":
357 product="Everyday Rewards+";
358 title = "Sign up and earn bonus points | "+partnerName+" Everyday Rewards+";
359 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn 15,000 when you spend $500 within the first 90 days.";
360 break;
361 case "secured":
362 product="Secured Card";
363 title = "Strengthen your finances | "+partnerName+" Secured Card";
364 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
365 break;
366 case "college-real-rewards":
367 product="College Real Rewards";
368 title = "Sign up and earn bonus points. | "+partnerName+" College Real Rewards";
369 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
370 break;
371 case "smart-business-rewards":
372 product="Smart Business Rewards Card";
373 title = "2X rewards in your top 2 spend categories | "+partnerName+" Business Smart Business Rewards Card";
374 metaDesc = "Apply Today for a "+partnerName+" Credit Card. More choices. More value for your business. Earn a $200 Bonus and 2x Rewards on your top 2 spend categories each month with the "+partnerName+" Credit Card.";
375 break;
376 case "business-cash-preferred":
377 product="Business Cash Preferred";
378 title = "Flexible rewards for your business | "+partnerName+" Business Cash Preferred";
379 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn Cash back on common business expenses.";
380 break;
381 case "business-real-rewards":
382 product="Business Real Rewards Card";
383 title = "Earn up to 1.5X points with no caps | "+partnerName+" Business Real Rewards Card";
384 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Get more rewards in the categories you spend the most on." ;
385 break;
386 case "business-platinum":
387 product="Business Card";
388 title = "Pay down your other credit card balances faster | "+partnerName+" Business Card";
389 metaDesc = "Apply Today for a "+partnerName+" Business Card. 0% Intro APR on Purchases and Balance Transfers for 18 Billing Cycles.";
390 break;
391 case "travel-rewards-plus":
392 product="Travel Rewards+"
393 title = partnerName + " | Travel Rewards+ Card";
394 metaDesc = "Make travel more rewarding with unlimited 4x points on travel and frequent popular categories."
395 break;
396 case "reserve-rewards-plus":
397 product="Reserve Rewards+"
398 title = partnerName + " | Reserve Rewards+ Card";
399 metaDesc = "Get exceptional rewards on travel and frequent purchases with this exclusive metal card.";
400 break;
401 default:
402 product = "All Cards";
403 title = partnerName + " Credit Card Index Page";
404 metaDesc = "Apply Today for a "+partnerName+" Credit Card.";
405 }
406 document.title = title;
407 m.name = 'description';
408 m.content = metaDesc;
409 document.head.appendChild(m);
410
411 var lc = "${lc!'0'}";
412
413 /* update SiteCatalyst data object */
414 reportingData.current_page = "microsite:${partnerName}:" + domain + ':' + page.replace('-',' ');
415 reportingData.page_type = 'product';
416 reportingData.site_section = 'credit cards';
417 reportingData.platform = 'microsite';
418 reportingData.campaign_id = '${campaignId}';
419 reportingData.location_code = lc;
420 reportingData.partner_name = partnerName;
421 reportingData.product = product;
422 reportingData.text_to_apply_source = '${text_to_apply_source}';
423 reportingData.visitor_type = 'prospect';
424 reportingData.Banker_id = '0';
425 reportingData.Banker_code = '0';
426
427
428 /* SiteCatalyst pageView tracking */
429 AUI().ready(function() {
430 if (window.publisherFW) {
431 //console.log("pageView");
432 window.publisherFW.publishEvent("pageView", reportingData);
433 }
434 });
435
436 jQuery('.jn-button, .applyNowLink').on('click', function(e){
437 var buttonName = $(this).data('button-name');
438 var productName = $(this).data('product-name');
439 /* SiteCatalyst onClick tracking */
440 reportingData.applyButton = buttonName;
441 reportingData.product = productName;
442
443 if (window.publisherFW) {
444 //console.log('clicked', reportingData);
445 window.publisherFW.publishEvent("onClick", reportingData);
446 }
447
448 });
449
450 jQuery('.applyNowLink').on('click', function(e){
451 ga("send", {
452 hitType: "event",
453 eventAction: "ApplyNow",
454 eventCategory: "click",
455 eventLabel: "BottomButton"
456 });
457 });
458
459 });
460 </script>
461 <#else>
462 <script>
463 console.log("Empty card list");
464 location.href = '${url404}';
465 </script>
466 </#if>
467<#else>
468 <script>
469 console.log("FI Cards Data empty", "pbu:", "${pbu}", ",subbu:","${subbu}");
470 location.href = '${url404}';
471 </script>
472</#if>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> clientProfileList?first [in template "10154#10192#18372552" at line 28, column 26]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign clientProfile = clientProfile... [in template "10154#10192#18372552" at line 28, column 1]
----
1<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()>
2<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
3<#assign basePath = "/web/creditcardlearnmore">
4<#assign environment = url?substring(0, url?index_of(basePath) + basePath?length)>
5<#assign oadURL = propsUtil.get('elan.oad.url')>
6<#assign oadURL_TC = propsUtil.get('elan.oad.tac.url') >
7<#assign prcaURL = propsUtil.get('elan.prca.url') >
8<#assign rewardsCalculatorURL = propsUtil.get('cclm.rewards.calculator.url') >
9<#assign applyNowText = "Apply Now" >
10<#assign learnMoreText = "Learn More" >
11
12<#assign lc= qstringmap["ecdma-lc"]?first>
13<#assign lc = htmlUtil.escape(lc)>
14<#assign lc = htmlUtil.escapeJS(lc)>
15
16<#assign prefix = "00000" >
17<#assign lcWithPrefix = prefix + lc >
18<#assign withPrefixLength = lcWithPrefix?length >
19<#assign startHere = withPrefixLength - 5>
20<#assign lc = lcWithPrefix?substring(startHere)>
21
22<#assign calculatorOfferTypes = ["101", "104", "138", "154", "144", "143", "128"] >
23<#assign balanceTransferCalculatorOfferTypes = ["108", "109"] >
24
25<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! >
26<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
27<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
28<#assign clientProfile = clientProfileList?first>
29<#assign partnerName = clientProfile.getMarketingNameLong()>
30<#assign pbu = clientProfile.getPbu()>
31<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
32<#assign cdnCardArtUrl = (propsUtil.get('rackspace.cdn.cardart.url'))!>
33<#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu + '&'+subbu + '&' + lc)>
34
35
36<#assign synExclusionMessageService = (serviceLocator.findService("com.elan.crc.quicklink.service.SYNExclusionMessageLocalService"))! />
37<#assign synExclusionMessageData = synExclusionMessageService.getClientProfileAndSyndicatedExclusionMsg(lc) />
38<#assign synExclusionDefaultMessageData = synExclusionMessageService.getSyndicatedDefaultMsg() />
39<#assign synExclusionMsg = "" />
40<#assign synExclusionMsgURL = "" />
41<#assign synExclusionMsgAriaLabel = "" />
42<#assign synExclusionDefaultMsg = "" />
43
44<#if synExclusionDefaultMessageData?exists && synExclusionDefaultMessageData?has_content >
45 <#assign synExclusionDefaultMsg = synExclusionDefaultMessageData!""/>
46</#if>
47
48<#if synExclusionMessageData?exists && synExclusionMessageData?has_content >
49 <#assign synExclusionMsgObj = synExclusionMessageData[0] />
50 <#assign synExclusionMsg = synExclusionMsgObj[4]!"" />
51 <#assign synExclusionMsgURL = synExclusionMsgObj[5]!"" />
52 <#assign synExclusionMsgAriaLabel = synExclusionMsgObj[6]!"" />
53</#if>
54
55<#assign fultonBankpbu = "0727491">
56<#if pbu == fultonBankpbu>
57 <style>
58 #hideFultonInfo {
59 display: none;
60 }
61 </style>
62</#if>
63
64<#function getOfferIdByOfferType offerType>
65 <#list fiCardsData as fiData>
66 <#if fiData.offerType == offerType>
67 <#return fiData.offerId>
68 </#if>
69 </#list>
70 <#return "" />
71</#function>
72
73<#function getFileNameByOfferType offerType>
74 <#list fiCardsData as fiData>
75 <#if fiData.offerType == offerType>
76 <#return fiData.filename>
77 </#if>
78 </#list>
79 <#return "" />
80</#function>
81
82<#function isOfferExcluded offerType>
83 <#list fiCardsData as fiData>
84 <#if fiData.offerType == offerType>
85 <#return fiData.dmaexclude!"">
86 </#if>
87 </#list>
88 <#return "" />
89</#function>
90
91<#function getUsePRCA offerType>
92 <#list fiCardsData as fiData>
93 <#if fiData.offerType == offerType>
94 <#return fiData.useprca!"">
95 </#if>
96 </#list>
97 <#return "" />
98</#function>
99
100<#function replacePlaceholders(input, APRValue, AMFValue, BALValue, TCLinkValue)>
101 <#return input
102 ?replace("{APR}", APRValue)
103 ?replace("{AMF}", AMFValue)
104 ?replace("{BAL}", BALValue)
105 ?replace("{TC}", TCLinkValue)>
106</#function>
107
108<#assign productOfferTypeValue = "">
109<#assign productOfferTypeName = "">
110<#if (productOfferType.getData())??>
111 <#assign productOfferTypeValue = productOfferType.getData()>
112 <#assign productOfferTypeName = productOfferType.optionsMap[productOfferType.getData()]>
113</#if>
114
115<#assign productOfferTypeName = productOfferTypeName?substring(productOfferTypeName?index_of(" - ") + 3)?upper_case!>
116
117
118
119<#assign offerId = getOfferIdByOfferType(productOfferTypeValue)>
120<#assign cardArtImage = cdnCardArtUrl + "/" + getFileNameByOfferType(productOfferTypeValue) + ".png" >
121<#assign cardArtImageAlt = cdnCardArtUrl + "/" + getFileNameByOfferType(productOfferTypeValue) + ".jpg" >
122<#assign cardArtImageAltText = partnerName + " " + productOfferTypeName?capitalize>
123
124<#assign hasBalanceTransferCalculator = balanceTransferCalculatorOfferTypes?seq_contains(productOfferTypeValue)>
125<#assign hasCalculatorRewards = calculatorOfferTypes?seq_contains(productOfferTypeValue)>
126<#assign isExcluded = isOfferExcluded(productOfferTypeValue)>
127<#assign prcaValue = getUsePRCA(productOfferTypeValue)>
128
129<#assign APR="" AMF="" BAL="">
130<#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', offerId)>
131<#if scrapedData?? && scrapedData?has_content && (scrapedData?size > 0)>
132
133<#list scrapedData as sItem>
134 <#if sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases") && sItem.scrapedValue?has_content>
135 <#if !APR?has_content><#assign APR = sItem.scrapedValue></#if>
136 <#elseif sItem.scrapedLabel?contains("Annual Membership Fee") && sItem.scrapedValue?has_content>
137 <#if !AMF?has_content><#assign AMF = sItem.scrapedValue></#if>
138 <#elseif sItem.scrapedLabel?contains("APR for Balance Transfers") && sItem.scrapedValue?has_content>
139 <#if !BAL?has_content><#assign BAL = sItem.scrapedValue></#if>
140 </#if>
141 <#if APR?has_content && AMF?has_content && BAL?has_content>
142 <#break>
143 </#if>
144 </#list>
145</#if>
146
147 <#assign APRValue = APR!'' />
148 <#assign AMFValue = AMF!'' />
149 <#assign BALValue = BAL!'' />
150
151 <#assign termsAndConditionsLink =
152 '<a href="' + oadURL_TC + '?step=display&offerId=' + offerId + '&locationCode=' + lc +
153 '" target="_blank" class="t_c_link">' +
154 'See Terms & Conditions' +
155 '</a>'
156 />
157 <#assign TCLinkValue = termsAndConditionsLink!'' />
158
159 <#assign benefits = []>
160 <#if benefit.getSiblings()?has_content>
161 <#list benefit.getSiblings() as benefit>
162 <#assign primaryBenefitCopyRaw = benefit.primaryBenefitCopy.getData()!'' />
163 <#assign updatedPrimaryBenefitCopy = replacePlaceholders(primaryBenefitCopyRaw, APRValue, AMFValue, BALValue, TCLinkValue) />
164
165 <#assign benefitObject = {
166 "svgIcon": benefit.primaryBenefitSVGIcon.getData(),
167 "primaryBenefitCopy": updatedPrimaryBenefitCopy
168 } />
169 <#assign benefits += [benefitObject] />
170 </#list>
171</#if>
172
173<#assign additionalBenefits = []>
174<#if additionalBenefit.getSiblings()?has_content>
175 <#list additionalBenefit.getSiblings() as additionalBenefit>
176 <#assign additionalBenefitCopyRaw = additionalBenefit.additionalBenefitCopy.getData()!'' />
177 <#assign updatedAdditionalBenefitCopy = replacePlaceholders(additionalBenefitCopyRaw, APRValue, AMFValue, BALValue, TCLinkValue) />
178
179 <#assign additionalBenefitObject = {
180 "additionalBenefitSVGIcon": additionalBenefit.additionalBenefitSVGIcon.getData(),
181 "additionalBenefitCopy": updatedAdditionalBenefitCopy
182 } />
183 <#assign additionalBenefits += [additionalBenefitObject] />
184 </#list>
185</#if>
186
187<#assign offerCopyRaw = offerCopy.getData()!'' />
188<#assign updatedOfferCopy = replacePlaceholders(offerCopyRaw, APRValue, AMFValue, BALValue, TCLinkValue) />
189
190<#assign renderApplyNowButtonCount = 0>
191<#macro renderApplyNowButton>
192 <#assign renderApplyNowButtonCount = renderApplyNowButtonCount +1>
193 <#if isExcluded == "0">
194 <#if prcaValue == "1">
195 <a
196 class="apply-now-link"
197 data-button-name="apply-now-link"
198 data-product-name="${productOfferTypeName!''}"
199 href=""
200 offerId="${offerId}"
201 onclick="submitForm(event)"
202 >
203 ${applyNowText}
204 </a>
205 <form aria-hidden="true" id="applyForm" action="${prcaURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer" method="post">
206 <input type="hidden" name="locationCode" value="${lc}" id="locationCode">
207 <input type="hidden" name="offerId" value="${offerId}" id="offerId">
208 <input type="hidden" name="preparerType" value="customer">
209 </form>
210 <#else>
211 <a
212 href="${oadURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer"
213 class="apply-now-link"
214 data-button-name="apply-now-link"
215 data-product-name="${productOfferTypeName!''}"
216 >
217 ${applyNowText}
218 </a>
219 </#if>
220 <#else>
221 <a
222 class="apply-now-link"
223 data-button-name="apply-now-link"
224 data-product-name="${productOfferTypeName!''}"
225 data-micromodal-trigger="modal-tabs-${productOfferTypeValue}"
226 href="javascript:void(0);"
227 >
228 ${applyNowText}
229 </a>
230 </#if>
231</#macro>
232
233<div id="product-card-id" class="Tier3-Syn-Product-Detail-2024">
234 <div class="tab-card">
235 <div class="tab-card__left">
236 <h1 class="super-head">
237 ${productOfferTypeName}
238 <#if (cardNameFootnotes.getData())??>
239 <sup class="super-head--super-script">${cardNameFootnotes.getData()}</sup>
240 </#if>
241 </h1>
242 <img src="${cardArtImage}" alt="${cardArtImageAltText!''}" onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'"/>
243 <@renderApplyNowButton />
244 <#if (hasBalanceTransferCalculator)>
245 <a href="javascript:void(0);" class="transfer-modal-link" data-micromodal-trigger="modal-2">See how much you could save with a balance transfer</a>
246 </#if>
247 <#if (hasCalculatorRewards)>
248 <a class="reward-calculator-link" target="_blank" href="${rewardsCalculatorURL}?ecdma-lc=${lc}">Calculate Rewards</a>
249 </#if>
250 </div>
251
252 <div class="tab-card__right">
253 <h1 class="super-head">
254 ${productOfferTypeName}
255 <#if (cardNameFootnotes.getData())??>
256 <sup class="super-head--super-script">${cardNameFootnotes.getData()}</sup>
257 </#if>
258 </h1>
259 <div class="offer-copy">${updatedOfferCopy}</div>
260 <div class="benefits">
261 <#list benefits as benefit>
262 <div class="benefits__item">
263 <#if benefit.svgIcon?has_content>
264 <div class="svg-container">
265 <img loading="lazy" src="${benefit.svgIcon}" alt="" class="<#if benefit.svgIcon?contains('svg')>dynamic-svg</#if>" />
266 </div>
267 </#if>
268 <div>
269 ${benefit.primaryBenefitCopy}
270 </div>
271 </div>
272 </#list>
273 </div>
274 </div>
275
276 </div>
277
278 <div class="additional-benefit-container">
279 <div class="additional-benefit">
280 <h2 class="additional-benefit__header">Additional Benefits </h2>
281 <div class="additional-benefit__layout">
282 <#list additionalBenefits as additionalBenefit>
283 <div class="additional-benefit__item">
284 <#if additionalBenefit.additionalBenefitSVGIcon?has_content>
285 <div class="svg-container">
286 <img loading="lazy" src="${additionalBenefit.additionalBenefitSVGIcon}" alt="" class="dynamic-svg" />
287 </div>
288 </#if>
289 <div>${additionalBenefit.additionalBenefitCopy}</div>
290 </div>
291 </#list>
292 </div>
293 <div class="additional-benefit__button">
294 <@renderApplyNowButton />
295 </div>
296 </div>
297 </div>
298</div>
299
300
301<#if isExcluded == "1">
302 <div aria-hidden="true" class="modal micromodal-slide" id="modal-tabs-${productOfferTypeValue}" >
303 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1" >
304 <div
305 aria-modal="true"
306 aria-labelledby="modal-tabs-title-${productOfferTypeValue}"
307 class="excludeModal__container"
308 role="dialog"
309 >
310 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
311 <header class="excludeModal__header">
312 <div>
313 <h2 class="excludeModal__title" id="modal-tabs-title-${productOfferTypeValue}">
314 <#if synExclusionMsg?has_content>
315 ${synExclusionMsg}
316 <#else>
317 ${synExclusionDefaultMsg}
318 </#if>
319 </h2>
320 </div>
321 <div id="excludeModalDivLink">
322 <#if synExclusionMsgURL?has_content>
323 <p>
324 <a href="${synExclusionMsgURL}" target="_blank" aria-label="${synExclusionMsgAriaLabel!''}" class="excludeModal__link">
325 ${learnMoreText}
326 </a>
327 </p>
328 </#if>
329 </div>
330 </header>
331 </div>
332 </div>
333 </div>
334</#if>
335
336<!-- https://micromodal.vercel.app/ -->
337<script src="https://unpkg.com/micromodal/dist/micromodal.min.js" async></script>
338<script async>
339 function submitForm(event) {
340 event.preventDefault();
341 var offerId = event.target.getAttribute("offerId");
342 console.log("offerId::::::::::::::"+offerId);
343 var lc = document.getElementById('locationCode').value;
344
345 var url = "${prcaURL}?locationCode=" + lc + "&offerId=" + offerId + "&preparerType=customer";
346
347 document.getElementById('applyForm').action = url;
348 postCreditcardLearnMore(url);
349
350 }
351
352 function postCreditcardLearnMore(path, method='post') {
353 const form = document.createElement('form');
354 form.method = method;
355 //form.target = '_blank';
356 form.action = path;
357 document.body.appendChild(form);
358 form.submit();
359 }
360 AUI().ready(function() {
361 MicroModal.init();
362
363 setTimeout(() => {
364 const svgImages = document.querySelectorAll(".Tier3-Syn-Product-Detail-2024 .dynamic-svg");
365 svgImages.forEach(function (image) {
366 const svgUrl = image.src;
367 fetch(svgUrl)
368 .then(response => response.text())
369 .then(svgContent => {
370 const parser = new DOMParser();
371 const svgElement = parser.parseFromString(svgContent, "image/svg+xml").querySelector("svg");
372 if (svgElement) {
373 image.replaceWith(svgElement); // Replace <img> with the <svg>
374 }
375 })
376 .catch(err => console.error("Error loading SVG:", err));
377
378 });
379 }, 1);
380 });
381</script>
382
383<style>
384 .excludeModal__overlay {
385 position: fixed;
386 top: 0;
387 left: 0;
388 right: 0;
389 bottom: 0;
390 background: rgba(0,0,0,0.6);
391 display: flex;
392 justify-content: center;
393 align-items: center;
394 }
395
396 .excludeModal__container {
397 background-color: #fff;
398 padding: 30px;
399 min-width: 500px;
400 max-width: 500px;
401 max-height: 100vh;
402 border-radius: 4px;
403 overflow-y: auto;
404 box-sizing: border-box;
405 }
406
407 .excludeModal__header {
408 display: block;
409 justify-content: space-between;
410 align-items: center;
411 }
412
413 .modal .excludeModal__container .excludeModal__title {
414 margin-top: 0;
415 margin-bottom: 0;
416 font-weight: normal;
417 font-size: 20px !important;
418 line-height: 1.5 !important;
419 color: #000;
420 box-sizing: border-box;
421 }
422
423 .excludeModal__close {
424 background: transparent;
425 border: 1px solid white;
426 padding: 4px 8px;
427 float: right;
428 }
429
430 .excludeModal__close:hover {
431 border: 1px solid black;
432 }
433
434 .excludeModal__close:before { content: "\2715"; }
435
436 @keyframes mmfadeIn {
437 from { opacity: 0; }
438 to { opacity: 1; }
439 }
440
441 @keyframes mmfadeOut {
442 from { opacity: 1; }
443 to { opacity: 0; }
444 }
445
446 @keyframes mmslideIn {
447 from { transform: translateY(15%); }
448 to { transform: translateY(0); }
449 }
450
451 @keyframes mmslideOut {
452 from { transform: translateY(0); }
453 to { transform: translateY(-10%); }
454 }
455
456 .micromodal-slide {
457 display: none;
458 }
459
460 .micromodal-slide.is-open {
461 display: block;
462 }
463
464 .micromodal-slide[aria-hidden="false"] .excludeModal__overlay {
465 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
466 }
467
468 .micromodal-slide[aria-hidden="false"] .excludeModal__container {
469 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
470 }
471
472 .micromodal-slide[aria-hidden="true"] .excludeModal__overlay {
473 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
474 }
475
476 .micromodal-slide[aria-hidden="true"] .excludeModal__container {
477 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
478 }
479
480 .micromodal-slide .excludeModal__container,
481 .micromodal-slide .excludeModal__overlay {
482 will-change: transform;
483 }
484
485 .excludeModal__link {
486 font-size: 18px !important;
487 font-weight: normal;
488 text-decoration: underline !important;
489 }
490
491 .excludeModal__link a:hover {
492 text-decoration: underline !important;
493 }
494
495 #excludeModalDivLink {
496 margin-top: 20px;
497 }
498</style>
499
500<style>
501 :root {
502 --card-image-size: 280px;
503 --left-padding: 30px;
504 --left-width: calc(var(--card-image-size) + var(--left-padding) );
505 --addition-benefits-gap-desktop: 30px;
506 }
507 .Tier3-Syn-Product-Detail-2024 .tab-card {
508 align-items: flex-start;
509 display: flex;
510 flex-wrap: wrap;
511 justify-content: center;
512 max-width: 1336px;
513 margin: 0 20px;
514 }
515 @media (min-width: 870px) {
516 .Tier3-Syn-Product-Detail-2024 .tab-card {
517 flex-wrap: nowrap;
518 padding-bottom: 45px;
519 }
520 }
521 @media (min-width: 1376px) {
522 .Tier3-Syn-Product-Detail-2024 .tab-card {
523 margin: 0 auto;
524 }
525 }
526 @media (min-width: 1336px) {
527 .Tier3-Syn-Product-Detail-2024 .tab-card {
528 align-items: stretch;
529 }
530 }
531
532 .Tier3-Syn-Product-Detail-2024 .tab-card__left {
533 display: flex;
534 align-items: center;
535 flex-direction: column;
536 flex-shrink: 0;
537 width: 100%;
538 padding: 40px 0 10px 0;
539 }
540 @media (min-width: 870px) {
541 .Tier3-Syn-Product-Detail-2024 .tab-card__left {
542 display: block;
543 width: var(--left-width);
544 padding-right: var(--left-padding);
545 }
546 .Tier3-Syn-Product-Detail-2024 .tab-card__left .super-head {
547 display: none;
548 }
549 }
550 .Tier3-Syn-Product-Detail-2024 .tab-card__left img {
551 height: auto;
552 margin: auto;
553 margin-bottom: 20px;
554 display: block;
555 max-height: var(--card-image-size);
556 object-fit: contain;
557 max-width: var(--card-image-size);
558 }
559 #content .Tier3-Syn-Product-Detail-2024 .apply-now-link {
560 width: 168px;
561 padding: 10px 30px;
562 margin-right: auto;
563 margin-left: auto;
564 background-color: var(--ecdma-btn-color);
565 color: #fff;
566 text-transform: capitalize;
567 text-align: center;
568 text-decoration: none;
569 }
570 #content .Tier3-Syn-Product-Detail-2024 .apply-now-link:hover {
571 background-color: var(--ecdma-hover-color);
572 }
573 .Tier3-Syn-Product-Detail-2024 .apply-now-link,
574 .Tier3-Syn-Product-Detail-2024 .reward-calculator-link,
575 .Tier3-Syn-Product-Detail-2024 .transfer-modal-link {
576 display: block;
577 text-align: center;
578 margin-bottom: 10px;
579 }
580
581 .Tier3-Syn-Product-Detail-2024 .tab-card__right {
582 flex-grow: 1;
583 padding: 0 0 40px 0;
584 }
585 @media (min-width: 870px) {
586 .Tier3-Syn-Product-Detail-2024 .tab-card__right {
587 padding: 30px 0 30px 0;
588 }
589 }
590 .Tier3-Syn-Product-Detail-2024 .tab-card__right .super-head {
591 display: none;
592 }
593 @media (min-width: 870px) {
594 .Tier3-Syn-Product-Detail-2024 .tab-card__right .super-head {
595 display: block;
596 }
597 }
598 #content .Tier3-Syn-Product-Detail-2024 .super-head {
599 color: #000;
600 margin-bottom: 18px;
601 }
602 #content .Tier3-Syn-Product-Detail-2024 .super-head--super-script {
603 font-size: 10px;
604 line-height: 13px;
605 }
606 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy p {
607 margin-bottom: 10px;
608 }
609 .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy {
610 color: #000;
611 margin-bottom: 20px;
612 }
613 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h1,
614 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h2,
615 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h3,
616 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h4,
617 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h5,
618 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h6 {
619 color: var(--ecdma-text-color);
620 font-size: 25px;
621 font-style: normal;
622 font-weight: 400;
623 line-height: 1.3;
624 margin-bottom: 8px;
625 }
626 .Tier3-Syn-Product-Detail-2024 .benefits {
627 display: flex;
628 flex-wrap: wrap;
629 gap: 20px;
630 }
631 .Tier3-Syn-Product-Detail-2024 .benefits__item {
632 display: flex;
633 flex-wrap: none;
634 gap: 10px;
635 flex: 1;
636 flex-basis: 100%;
637 }
638 @media (min-width: 870px) {
639 .Tier3-Syn-Product-Detail-2024 .benefits__item {
640 flex-basis: calc(50% - 20px);
641 }
642 }
643 .Tier3-Syn-Product-Detail-2024 .benefits__item .benefitfootnote {
644 font-size: 85%;
645 }
646 .Tier3-Syn-Product-Detail-2024 .benefits__item img {
647 width: 20px;
648 height: 20px;
649 margin-right: 5px;
650 }
651 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h1,
652 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h2,
653 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h3,
654 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h4,
655 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h5,
656 #content .Tier3-Syn-Product-Detail-2024 .benefits__item h6 {
657 color: var(--ecdma-text-color);
658 font-size: 20px;
659 font-style: normal;
660 font-weight: 700;
661 line-height: 1.3;
662 margin-bottom: 8px;
663 }
664 .Tier3-Syn-Product-Detail-2024 .svg-container,
665 .Tier3-Syn-Product-Detail-2024 .benefits__item h1,
666 .Tier3-Syn-Product-Detail-2024 .benefits__item h2,
667 .Tier3-Syn-Product-Detail-2024 .benefits__item h3,
668 .Tier3-Syn-Product-Detail-2024 .benefits__item h4,
669 .Tier3-Syn-Product-Detail-2024 .benefits__item h5,
670 .Tier3-Syn-Product-Detail-2024 .benefits__item h6 {
671 display: inline-block;
672 }
673 #content .Tier3-Syn-Product-Detail-2024 .tab-card__right .offer-copy h2 sup, #content .Tier3-Syn-Product-Detail-2024 .benefits__item h3 sup {
674 font-size: 75%;
675 font-weight: normal;
676 }
677 .Tier3-Syn-Product-Detail-2024 .svg-container svg,
678 .Tier3-Syn-Product-Detail-2024 .svg-container svg rect,
679 .Tier3-Syn-Product-Detail-2024 .svg-container svg circle,
680 .Tier3-Syn-Product-Detail-2024 .svg-container svg ellipse,
681 .Tier3-Syn-Product-Detail-2024 .svg-container svg line,
682 .Tier3-Syn-Product-Detail-2024 .svg-container svg polygon,
683 .Tier3-Syn-Product-Detail-2024 .svg-container svg polyline,
684 .Tier3-Syn-Product-Detail-2024 .svg-container svg path,
685 .Tier3-Syn-Product-Detail-2024 .svg-container svg text,
686 .Tier3-Syn-Product-Detail-2024 .svg-container svg tspan,
687 .Tier3-Syn-Product-Detail-2024 .svg-container svg textPath
688 .Tier3-Syn-Product-Detail-2024 .svg-container svg g,
689 .Tier3-Syn-Product-Detail-2024 .svg-container svg use {
690 fill: var(--ecdma-bg-color) !important;
691 stroke: var(--ecdma-bg-color) !important;
692 }
693 .Tier3-Syn-Product-Detail-2024 .svg-container svg,
694 .Tier3-Syn-Product-Detail-2024 .svg-container img {
695 margin: 0;
696 max-width: 30px;
697 height: 30px;
698 }
699 .additional-benefit-container {
700 background-color: #F7F7F7;
701 padding: 30px 0;
702 margin-bottom: 30px
703 }
704 .Tier3-Syn-Product-Detail-2024 .additional-benefit {
705 max-width: 1336px;
706 margin: 0 20px;
707 }
708 @media (min-width: 1376px) {
709 .Tier3-Syn-Product-Detail-2024 .additional-benefit {
710 margin: 0 auto;
711 }
712 }
713 .Tier3-Syn-Product-Detail-2024 .additional-benefit__layout {
714 display: flex;
715 flex-wrap: wrap;
716 margin: 20px 0;
717 gap: 20px;
718 }
719 @media (min-width: 870px) {
720 .Tier3-Syn-Product-Detail-2024 .additional-benefit__layout {
721 margin: 40px 0;
722 gap: var(--addition-benefits-gap-desktop);
723 }
724 }
725 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__header {
726 color: #000;
727 text-align: left;
728 font-size: 25px;
729 font-weight: 400;
730 line-height: 1.4;
731 }
732 @media (min-width: 870px) {
733 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__header {
734 text-align: center;
735 }
736 }
737
738 .Tier3-Syn-Product-Detail-2024 .additional-benefit__item {
739 display: flex;
740 flex-wrap: nowrap;
741 gap: 10px;
742 flex: 1;
743 flex-basis: 100%;
744 }
745 @media (min-width: 870px) {
746 .Tier3-Syn-Product-Detail-2024 .additional-benefit__item {
747 flex-basis: calc(25% - var(--addition-benefits-gap-desktop));
748 }
749 }
750 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h1,
751 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h2,
752 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h3,
753 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h4,
754 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h5,
755 #content .Tier3-Syn-Product-Detail-2024 .additional-benefit__item h6 {
756 color: var(--ecdma-text-color);
757 font-size: 20px;
758 font-style: normal;
759 font-weight: 700;
760 line-height: 1.4;
761 margin-bottom: 10px;
762 }
763 .Tier3-Syn-Product-Detail-2024 .additional-benefit__button .apply-now-link {
764 margin: auto;
765 }
766 @media (min-width: 870px) {
767 .Tier3-Syn-Product-Detail-2024 .additional-benefit__button .apply-now-link {
768 max-width: var(--card-image-size);
769 }
770 }
771</style>