/* Sponsored offer deck on guides and /best/ pages. Dark card, blue glow,
   matching the offer band. Without JS the cards sit in a scrollable row;
   .is-stack (set by deck.js) piles them up as a deck. */
.cf-deck {
	margin: 28px 0 36px; padding: 18px 18px 16px;
	background: #111; border-radius: 20px; color: #fff;
	background-image: radial-gradient(420px 220px at 85% 0%, rgb(52 80 209 / .35), transparent 70%);
	max-width: 620px;
}
.rs-prose .cf-deck p { margin: 0; }
.rs-prose .cf-deck { max-width: 620px; }
.cf-deck__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 36px; }
.cf-deck__label {
	display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
	border: 1px solid rgb(220 227 255 / .3); font-size: 12px; font-weight: 600; color: #C8D2FF;
}
.cf-deck__nav { display: flex; align-items: center; gap: 8px; }
.cf-deck__nav[hidden] { display: none; }
.cf-deck__count { font-size: 13px; color: #B5B5B5; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.cf-deck__arrow {
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2);
	background: rgb(255 255 255 / .06); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
	display: grid; place-items: center; padding: 0 0 3px; transition: background .16s ease, border-color .16s ease;
}
.cf-deck__arrow:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4); }
.cf-deck__arrow:focus-visible, .cf-deck__cta:focus-visible, .cf-deck__foot a:focus-visible { outline: 2px solid #9DB2FF; outline-offset: 3px; }

/* No-JS / fallback: a horizontal scroll row. */
.cf-deck__stack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 86%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.cf-deck__card {
	scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 14px;
	padding: 20px; border-radius: 16px; background: #1A1A1D; border: 1px solid rgb(255 255 255 / .1);
	box-shadow: 0 18px 40px rgb(0 0 0 / .45);
}

/* The deck: every card in one grid cell, so the box is as tall as the tallest. */
.cf-deck.is-stack .cf-deck__stack { display: grid; grid-template: 1fr / 1fr; overflow: visible; padding: 0 6px 24px 0; perspective: 1200px; touch-action: pan-y; }
.cf-deck.is-stack .cf-deck__card {
	grid-area: 1 / 1; transform-origin: 50% 85%; will-change: transform;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s ease, opacity .45s ease;
	user-select: none; -webkit-user-select: none;
}
.cf-deck.is-stack .cf-deck__card[data-pos="0"] { z-index: 3; transform: none; cursor: grab; }
.cf-deck.is-stack .cf-deck__card[data-pos="1"] { z-index: 2; transform: translate(8px, 16px) scale(.96) rotate(3deg); filter: brightness(.72); }
.cf-deck.is-stack .cf-deck__card[data-pos="2"] { z-index: 1; transform: translateY(22px) scale(.91) rotate(-1.8deg); filter: brightness(.45); }
.cf-deck.is-stack .cf-deck__card[data-pos="3"] { z-index: 0; transform: translateY(22px) scale(.91); opacity: 0; }
.cf-deck.is-stack .cf-deck__card.is-dragging { transition: none; cursor: grabbing; }
.cf-deck.is-stack .cf-deck__card.is-moving { transition: none; }
.cf-deck.is-stack .cf-deck__card.is-lifted { z-index: 6; }

.cf-deck__top { display: flex; align-items: center; gap: 14px; }
.rs-prose .cf-deck img.cf-deck__logo, .cf-deck__logo { margin: 0; width: 64px; height: 64px; border-radius: 12px; flex: none; background: #0A0A0A; border: 1px solid rgb(255 255 255 / .1); }
.cf-deck__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-deck__name { font-size: 19px; font-weight: 700; color: #fff; }
.cf-deck__kicker { font-size: 13px; color: #B5B5B5; }
.cf-deck__bonus { font-size: clamp(22px, 3.4vw, 27px); font-weight: 700; line-height: 1.15; letter-spacing: -.4px; color: #fff; }
.cf-deck__bonus b { color: #fff; text-shadow: 0 0 16px rgb(140 170 255 / .95), 0 0 36px rgb(110 140 255 / .55); }
.cf-deck__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cf-deck__facts div { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .05); min-width: 0; }
.cf-deck__facts dt { font-size: 12px; color: #9A9A9A; margin: 0 0 2px; }
.cf-deck__facts dd { margin: 0; font-size: 14px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.rs-prose .cf-deck a.cf-deck__cta, .cf-deck__cta {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 999px;
	background: #fff; color: #2238B8; font-size: 16px; font-weight: 700; text-decoration: none;
	box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 0 22px rgb(150 175 255 / .6), 0 10px 26px rgb(10 20 90 / .45);
	transition: box-shadow .16s ease, transform .16s ease;
}
.rs-prose .cf-deck a.cf-deck__cta:hover, .cf-deck__cta:hover { color: #1A2C99; transform: translateY(-1px); box-shadow: 0 0 0 1px #fff, 0 0 34px rgb(170 195 255 / .9), 0 12px 30px rgb(10 20 90 / .5); }
.rs-prose .cf-deck .cf-deck__small { font-size: 12px; color: #9A9A9A; text-align: center; }
.rs-prose .cf-deck .cf-deck__foot { font-size: 12.5px; line-height: 1.5; color: #9A9A9A; margin-top: 2px; }
.rs-prose .cf-deck .cf-deck__foot a { color: #C8D2FF; text-decoration: underline; text-underline-offset: 2px; }
.rs-prose .cf-deck .cf-deck__foot a:hover { color: #fff; }

/* Desktop: the deck spans the article column like the tables do, and each
   card lies on its side (offer on the left, facts and button on the right),
   so it is half the height and leaves no empty space beside it. */
@media (min-width: 600px) { .cf-deck, .rs-prose .cf-deck { max-width: none; } }
@media (min-width: 900px) {
	.cf-deck, .rs-prose .cf-deck { max-width: none; padding: 20px 22px 18px; }
	.cf-deck__card {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		grid-template-areas: "top facts" "bonus cta" "bonus small";
		column-gap: 32px; row-gap: 12px; align-items: center; padding: 24px 26px;
	}
	.cf-deck__top { grid-area: top; }
	.cf-deck__bonus { grid-area: bonus; align-self: start; font-size: 30px; }
	.cf-deck__facts { grid-area: facts; }
	.cf-deck__cta, .rs-prose .cf-deck a.cf-deck__cta { grid-area: cta; }
	.cf-deck__small, .rs-prose .cf-deck .cf-deck__small { grid-area: small; }
	.cf-deck:not(.is-stack) .cf-deck__stack { grid-auto-columns: minmax(560px, 92%); }
}

/* On narrow screens a flicked card must not widen the page: clip it at the
   screen edge (the deck sits one gutter in from it). */
@media (max-width: 760px) { .cf-deck { overflow-x: clip; overflow-clip-margin: 20px; } }
@media (max-width: 520px) {
	.cf-deck { padding: 14px 12px 14px; border-radius: 18px; margin-inline: 0; }
	.cf-deck__card { padding: 16px; }
	.cf-deck__facts { grid-template-columns: 1fr 1fr; }
	.cf-deck__facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.cf-deck.is-stack .cf-deck__card { transition: opacity .2s ease; }
}