/*--------------------------------------------------------------
Bold Black Friday theme for try.simkit.co/black-friday-dark/ (body.sk-bf).

Loaded after simkit.css on that page only. Most of the page follows
from swapping the design tokens to black + Black Friday yellow; the
rest of this file covers white-on-teal details and the Black Friday
pieces (ticker, deal tag, countdown, sticker, display type).
----------------------------------------------------------------
# Tokens
# Base and type
# Buttons
# Header
# Ticker
# Hero
# Sections
# Pricing tiers
# Footer and popup
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
body.sk-bf {
	--bf-yellow: #ffd60a;
	--bf-yellow-soft: rgba(255, 214, 10, 0.12);
	--bf-red: #ff3b3b;
	--bf-on-yellow: #0b0b0d;
	--bf-raised: #1c1c22;
	--bf-display: "Anton", "Impact", "Arial Narrow", sans-serif;

	--sk-teal: var(--bf-yellow);
	--sk-teal-alt: var(--bf-yellow);
	--sk-teal-light-border: var(--bf-yellow);
	--sk-teal-step: var(--bf-yellow);
	--sk-teal-dark: var(--bf-yellow);
	--sk-green: var(--bf-red);
	--sk-red: var(--bf-red);
	--sk-urgent: #ff6b6b;
	--sk-amber-icon: var(--bf-red);
	--sk-mist: #0e0e11;

	--sk-ink: #fff;
	--sk-navy: #fff;
	--sk-black: #fff;
	--sk-text: #f4f4f5;
	--sk-body: #b4b4bd;
	--sk-muted: #a0a0aa;
	--sk-grey: #8b8b95;
	--sk-list: #d8d8de;
	--sk-footer-text: #a0a0aa;
	--sk-copyright: #8b8b95;

	--sk-bg: #09090b;
	--sk-surface: #141418;
	--sk-teal-bg: var(--bf-yellow-soft);
	--sk-footer-bg: #050506;
	--sk-green-bg: var(--sk-surface);
	--sk-border: #3a3a42;
	--sk-card-border: #2a2a31;
	--sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);

	background: var(--sk-bg);
	color: var(--sk-text);
}

/*--------------------------------------------------------------
# Base and type
--------------------------------------------------------------*/
.sk-bf ::selection {
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
}

.sk-bf :focus-visible {
	outline-color: rgba(255, 214, 10, 0.6);
}

/* Condensed, uppercase display type for the big headings. */
.sk-bf .sk-hero__title,
.sk-bf .sk-h2,
.sk-bf .sk-h2--xl,
.sk-bf .sk-faq__title {
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.sk-bf .sk-h2 {
	font-size: 44px;
	line-height: 1.1;
}

.sk-bf .sk-h2--xl {
	font-size: 52px;
}

.sk-bf .sk-eyebrow {
	color: var(--bf-yellow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.sk-bf .sk-btn,
.sk-bf .sk-btn:visited {
	color: var(--bf-on-yellow);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sk-bf .sk-btn--primary,
.sk-bf .sk-btn--primary:visited,
.sk-bf .sk-btn--dark,
.sk-bf .sk-btn--dark:visited {
	border-color: var(--bf-yellow);
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
}

.sk-bf .sk-btn--primary:hover,
.sk-bf .sk-btn--primary:focus-visible,
.sk-bf .sk-btn--dark:hover,
.sk-bf .sk-btn--dark:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--bf-on-yellow);
}

.sk-bf .sk-btn--outline,
.sk-bf .sk-btn--outline:visited {
	border-color: var(--bf-yellow);
	background: transparent;
	color: var(--bf-yellow);
}

.sk-bf .sk-btn--outline:hover,
.sk-bf .sk-btn--outline:focus-visible {
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
}

.sk-bf .sk-hero__offer .sk-btn,
.sk-bf .sk-tier--featured .sk-btn--lg,
.sk-bf .sk-trial-card .sk-btn--lg {
	box-shadow: 0 10px 30px rgba(255, 214, 10, 0.25);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.sk-bf .site-header {
	border-bottom: 1px solid var(--sk-card-border);
	background: var(--sk-bg);
}

/* The logo files are dark; show them white. */
.sk-bf .site-logo img,
.sk-bf .site-footer__logo img {
	filter: brightness(0) invert(1);
}

.sk-bf .main-navigation a:hover,
.sk-bf .main-navigation a:focus-visible {
	color: var(--bf-yellow);
}

/*--------------------------------------------------------------
# Ticker
--------------------------------------------------------------*/
.sk-ticker {
	overflow: hidden;
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
	white-space: nowrap;
}

.sk-ticker__track {
	display: flex;
	width: max-content;
	animation: sk-ticker 40s linear infinite;
}

.sk-ticker__list {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-ticker__list li {
	display: inline-flex;
	align-items: center;
	padding: 9px 0;
	font-family: var(--bf-display);
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sk-ticker__list li::after {
	content: "\2605";
	margin: 0 22px;
	font-size: 13px;
}

@keyframes sk-ticker {
	to {
		transform: translateX(-50%);
	}
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.sk-bf .sk-hero {
	background:
		radial-gradient(820px 460px at 88% -6%, rgba(255, 214, 10, 0.16), transparent 62%),
		radial-gradient(640px 420px at -8% 108%, rgba(255, 59, 59, 0.14), transparent 60%),
		var(--sk-bg);
}

.sk-bf-tag {
	display: inline-flex;
	align-items: center;
	margin: 0 0 22px;
	padding-right: 12px;
	border: 2px solid var(--bf-yellow);
	color: var(--bf-yellow);
	font-family: var(--bf-display);
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.sk-bf-tag span {
	margin-right: 10px;
	padding: 8px 12px;
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
}

.sk-bf .sk-hero__inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.sk-bf .sk-hero__title {
	font-size: 56px;
	line-height: 1.04;
}

.sk-bf .sk-hero__accent {
	margin-top: 8px;
	background: none;
	color: var(--bf-yellow);
	-webkit-text-fill-color: currentColor;
}

/* Countdown to Dec 31. */
.sk-countdown {
	margin-top: 24px;
}

.sk-countdown__label {
	margin: 0 0 10px;
	color: var(--sk-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sk-countdown__units {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-countdown__units li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 78px;
	padding: 10px 8px 8px;
	border: 1px solid var(--sk-card-border);
	border-radius: 12px;
	background: var(--bf-raised);
}

.sk-countdown__units span {
	color: #fff;
	font-family: var(--bf-display);
	font-size: 40px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sk-countdown__units li:first-child span {
	color: var(--bf-yellow);
}

.sk-countdown__units small {
	margin-top: 4px;
	color: var(--sk-grey);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sk-countdown__ended,
.sk-countdown.is-ended .sk-countdown__units,
.sk-countdown.is-ended .sk-countdown__label {
	display: none;
}

.sk-countdown.is-ended .sk-countdown__ended {
	display: block;
	margin: 0;
	color: var(--sk-body);
	font-weight: 600;
}

.sk-bf .sk-hero__offer {
	margin-top: 28px;
}

.sk-bf .sk-hero__alt a {
	color: var(--bf-yellow);
}

/* Video + "Save $200" sticker. */
.sk-hero__media-wrap {
	position: relative;
}

.sk-bf .sk-video {
	border-color: var(--sk-card-border);
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.sk-bf .sk-float {
	background: var(--bf-raised);
}

.sk-bf .sk-float img {
	padding: 3px;
	border-radius: 50%;
	background: #fff;
}

.sk-sticker {
	position: absolute;
	z-index: 3;
	top: -34px;
	right: -22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	margin: 0;
	border-radius: 50%;
	background: var(--bf-red);
	box-shadow: 0 14px 34px rgba(255, 59, 59, 0.4);
	color: #fff;
	font-family: var(--bf-display);
	font-size: 38px;
	line-height: 1;
	text-align: center;
	transform: rotate(10deg);
}

.sk-sticker small {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sk-sticker small:first-child {
	margin-bottom: 2px;
}

.sk-sticker small:last-child {
	margin-top: 4px;
	font-size: 11px;
}

/* Curriculum card. */
.sk-bf .sk-hero__info {
	background: var(--sk-surface);
}

.sk-bf .sk-info-list__icon--num {
	background: var(--bf-yellow);
	color: var(--bf-on-yellow);
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
.sk-bf .sk-struggle .sk-section__head {
	max-width: 1140px;
}

.sk-bf .sk-reel__slide {
	background: var(--bf-raised);
}

.sk-bf .sk-reel__dot::before {
	background: #3a3a42;
}

.sk-bf .sk-reel__dot.is-active::before {
	background: var(--bf-yellow);
}

.sk-bf .sk-pain {
	border-left: 3px solid var(--bf-red);
}

.sk-bf .sk-steps::before {
	border-top-color: #3a3a42;
}

.sk-bf .sk-step__num {
	color: var(--bf-on-yellow);
	box-shadow: 0 0 0 8px var(--sk-bg), 0 6px 16px rgba(255, 214, 10, 0.3);
}

.sk-bf .sk-step__card:hover {
	border-color: rgba(255, 214, 10, 0.5);
}

.sk-bf .sk-media-steps {
	border-block: 1px solid var(--sk-card-border);
	background: var(--sk-mist);
}

.sk-bf .sk-media-steps__item img {
	border-radius: 8px;
}

.sk-bf .sk-pill,
.sk-bf .sk-features__col--right .sk-pill {
	border: 1px solid var(--sk-card-border);
	background: var(--sk-surface);
}

/* Feature and "Includes" icons are dark line art: give them a light disc. */
.sk-bf .sk-feature__row img {
	padding: 6px;
	border-radius: 50%;
	background: #fff;
}

.sk-bf .sk-includes__grid img {
	box-sizing: content-box;
	padding: 8px;
	border-radius: 50%;
	background: #fff;
}

.sk-bf .sk-testimonial {
	border-color: var(--sk-card-border);
}

.sk-bf .sk-faq-item {
	border-color: var(--sk-card-border);
}

.sk-bf .sk-faq-item:hover {
	border-color: rgba(255, 214, 10, 0.5);
}

.sk-bf .sk-faq-item[open] {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.sk-bf .sk-contact {
	border: 1px solid rgba(255, 214, 10, 0.35);
}

/*--------------------------------------------------------------
# Pricing tiers
--------------------------------------------------------------*/
.sk-bf .sk-tier--featured {
	background: linear-gradient(180deg, rgba(255, 214, 10, 0.1), var(--sk-surface) 240px);
	box-shadow: 0 24px 70px rgba(255, 214, 10, 0.14);
}

.sk-bf .sk-tier__badge {
	background: var(--bf-red);
	box-shadow: 0 8px 20px rgba(255, 59, 59, 0.4);
	color: #fff;
}

.sk-bf .sk-tier__amount {
	font-family: var(--bf-display);
	font-size: 56px;
	font-weight: 400;
}

.sk-bf .sk-tier--featured .sk-tier__amount {
	color: var(--bf-yellow);
}

.sk-bf .sk-trial-card__ribbon {
	color: var(--bf-on-yellow);
}

/*--------------------------------------------------------------
# Footer and popup
--------------------------------------------------------------*/
.sk-bf .site-footer {
	border-top: 1px solid var(--sk-card-border);
}

.sk-bf .sk-socials a,
.sk-bf .sk-socials a:hover {
	color: var(--bf-on-yellow);
}

.sk-bf .sk-socials a:hover {
	background: #fff;
}

.sk-bf .sk-modal {
	border: 1px solid var(--sk-card-border);
}

.sk-bf .sk-modal::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

.sk-bf .sk-modal__close {
	border-color: var(--sk-card-border);
	background: var(--bf-raised);
}

.sk-bf .sk-product__thumb {
	border-color: #3a3a42;
}

.sk-bf .sk-product__thumb.is-active,
.sk-bf .sk-product__thumb:hover {
	border-color: var(--bf-yellow);
}

.sk-bf .sk-product__title {
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.sk-bf .sk-sticky-cta {
	border-top-color: var(--bf-yellow);
	background: var(--bf-raised);
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	.sk-bf .sk-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk-bf .sk-hero__title {
		font-size: 54px;
	}

	.sk-sticker {
		right: 8px;
	}
}

@media (max-width: 767px) {
	.sk-bf .sk-hero__title {
		font-size: 42px;
	}

	.sk-bf .sk-h2 {
		font-size: 34px;
	}

	.sk-bf .sk-h2--xl {
		font-size: 38px;
	}

	.sk-bf-tag {
		font-size: 18px;
	}

	.sk-countdown__units {
		gap: 6px;
	}

	.sk-countdown__units li {
		flex: 1 1 0;
		min-width: 0;
	}

	.sk-countdown__units span {
		font-size: 32px;
	}

	.sk-sticker {
		top: -26px;
		right: 4px;
		width: 96px;
		height: 96px;
		font-size: 28px;
	}

	.sk-sticker small {
		font-size: 10px;
	}

	.sk-sticker small:last-child {
		font-size: 9px;
	}

	.sk-ticker__list li {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-ticker__track {
		animation: none;
	}
}