@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

.jnfdi{--di-head:#09487E;--di-amount:#ED7845;--di-panelbg:#09487E;--di-title:#60BB48;--di-fill:#00C4A9;--di-empty:#9db9d6;
	--di-per-lg:4;--di-per:var(--di-per-lg);
	font-family:'DM Sans',system-ui,sans-serif;max-width:1280px;margin:0 auto;padding:0}
.jnfdi *{box-sizing:border-box}

/* ---- heading (Figma: Heading/H3 32px, #09487E, max 873px) ---- */
.jnfdi h2.jnfdi__heading{font-family:'Poppins',sans-serif;font-weight:700;text-align:center;text-transform:none !important;
	color:var(--di-head);font-size:32px !important;line-height:1.3 !important;letter-spacing:-0.02em !important;margin:0 auto 32px;max-width:873px}
@media(max-width:600px){.jnfdi h2.jnfdi__heading{font-size:24px !important;margin-bottom:24px}}
.jnfdi__amount{color:var(--di-amount);white-space:nowrap}

/* ---- slider (Figma: 536 x 16 track, 4px radius, round 24px thumb) ---- */
.jnfdi__sliderwrap{max-width:536px;margin:0 auto 40px;padding:0}
.jnfdi__slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:16px;border-radius:4px;outline:none;cursor:pointer;margin:0;
	background:linear-gradient(90deg,var(--di-fill) 0 var(--di-pct,50%),var(--di-empty) var(--di-pct,50%) 100%)}
.jnfdi__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
	background:var(--di-fill);border:3px solid #fff;box-shadow:0 2px 8px rgba(6,40,72,.35);cursor:grab}
.jnfdi__slider::-webkit-slider-thumb:active{cursor:grabbing}
.jnfdi__slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--di-fill);border:3px solid #fff;
	box-shadow:0 2px 8px rgba(6,40,72,.35);cursor:grab}
.jnfdi__slider::-moz-range-track{height:16px;border-radius:4px;background:transparent}
.jnfdi__slider:focus-visible{box-shadow:0 0 0 3px rgba(0,196,169,.4)}

/* ---- stage / groups ---- */
.jnfdi__stage{position:relative}
.jnfdi__group{display:none}
.jnfdi__group.is-active{display:block;animation:jnfdi-fade .45s ease}
@keyframes jnfdi-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.jnfdi__viewport{overflow:hidden}
.jnfdi__track{display:flex;gap:22px;transition:transform .5s cubic-bezier(.62,.03,.2,1)}
.jnfdi__track.is-fit{justify-content:center;transform:none !important}
.jnfdi__panel{flex:0 0 calc((100% - (var(--di-per) - 1) * 22px) / var(--di-per));
	display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}

/* ---- panel (Figma: 302 x 210 photo, 24px radius; blue base overlaps it by 22px; card 372px tall) ---- */
.jnfdi .jnfdi__img{width:100%;aspect-ratio:302/210;background-size:cover;background-position:center;border-radius:24px;
	margin-bottom:-22px;position:relative;z-index:2}
.jnfdi .jnfdi__body{background:var(--di-panelbg);color:#fff;border-radius:0 0 24px 24px;padding:52px 23px 28px;text-align:center;
	flex:1 1 auto;min-height:184px;display:flex;flex-direction:column;align-items:center}
.jnfdi .jnfdi__title{font-family:'Poppins',sans-serif;font-weight:700;text-transform:uppercase;color:var(--di-title);
	font-size:20px;line-height:1.2;letter-spacing:-0.02em;margin:0 0 9px;max-width:256px;overflow-wrap:anywhere}
.jnfdi .jnfdi__desc{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;color:#fff;margin:0;max-width:242px}

.jnfdi__panel.is-link{transition:transform .2s}
.jnfdi__panel.is-link:hover{transform:translateY(-4px)}
.jnfdi__panel.is-link:hover .jnfdi__title{text-decoration:underline;text-underline-offset:3px}

/* ---- carousel arrows (only when >per_view panels) ----
   padding/min-width reset: the theme's global button style (16px 32px padding) otherwise squashes them into ovals */
.jnfdi .jnfdi__group{position:relative}
.jnfdi .jnfdi__arrow{position:absolute;top:calc(50% - 20px);transform:translateY(-50%);z-index:5;width:44px;height:44px;min-width:0;min-height:0;
	padding:0 !important;margin:0;border:none !important;border-radius:50% !important;background:var(--di-panelbg) !important;color:#fff !important;
	font-size:0;line-height:0;cursor:pointer;display:grid;place-items:center;
	box-shadow:0 10px 22px -10px rgba(6,40,72,.6);transition:transform .18s,opacity .18s}
.jnfdi .jnfdi__arrow:hover,.jnfdi .jnfdi__arrow:focus{background:var(--di-panelbg) !important;color:#fff !important}
.jnfdi .jnfdi__arrow:hover{transform:translateY(-50%) scale(1.07)}
.jnfdi .jnfdi__arrow:focus-visible{outline:3px solid var(--di-fill);outline-offset:2px}
.jnfdi .jnfdi__arrow[disabled]{opacity:.3;cursor:default;transform:translateY(-50%)}
.jnfdi .jnfdi__arrow[hidden]{display:none}
.jnfdi .jnfdi__arrow svg{width:20px;height:20px;flex:none}
.jnfdi .jnfdi__arrow.prev{left:-22px}.jnfdi .jnfdi__arrow.next{right:-22px}

/* ---- dots ---- */
.jnfdi .jnfdi__dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;min-height:16px}
.jnfdi .jnfdi__dots[hidden]{display:none}
.jnfdi .jnfdi__dot{width:10px;height:10px;min-width:0;min-height:0;padding:0 !important;margin:0;border:0 !important;border-radius:999px !important;
	background:rgba(9,72,126,.25) !important;cursor:pointer;transition:width .25s,background .25s}
.jnfdi .jnfdi__dot.is-active{width:28px;background:var(--di-fill) !important}
.jnfdi .jnfdi__dot:focus-visible{outline:2px solid var(--di-fill);outline-offset:3px}

/* ---- responsive ---- */
@media(max-width:980px){.jnfdi{--di-per:2}.jnfdi .jnfdi__arrow.prev{left:-4px}.jnfdi .jnfdi__arrow.next{right:-4px}}
@media(max-width:600px){
	.jnfdi{--di-per:1}.jnfdi__panel.is-nomobile{display:none}
	/* card narrows so the arrows sit beside it, not over it */
	.jnfdi .jnfdi__viewport{max-width:min(302px,calc(100% - 96px));margin:0 auto}
	.jnfdi .jnfdi__arrow{width:40px;height:40px}
	.jnfdi .jnfdi__arrow.prev{left:0}.jnfdi .jnfdi__arrow.next{right:0}
}
@media(prefers-reduced-motion:reduce){.jnfdi__track,.jnfdi__panel,.jnfdi__group{transition:none;animation:none}}