/**
 * Redix Academy: the single-course template (Elementor, "rac-" classes). Loaded on course pages that use
 * the template, and in the Elementor editor of the template. Every rule starts with ".rac-course", the
 * template's outer container, so nothing here reaches other pages.
 *
 * Layout: full-width bands; each band's content sits in ".rac-in", boxed beside the enrol card. The card
 * (".rac-aside") floats over the bands from the hero to the end of the FAQ and sticks below the site header.
 * Nothing here hides content: with no JavaScript everything shows, and motion runs only without
 * "reduce motion".
 */

/* ---------------------------------------------------------------- tokens */
.rac-course {
	--rac-bg: var(--ra-navy-950, #070b1a);
	--rac-cyan: var(--ra-cyan-400, #2fe0e6);
	--rac-cyan-soft: var(--ra-cyan-300, #7df0f4);
	--rac-text: var(--ra-text, #f2f6ff);
	--rac-text-2: var(--ra-text-2, #c2cde8);
	--rac-text-4: #a9b5d6;
	--rac-ink: #041018;
	--rac-ease: cubic-bezier(.16, 1, .3, 1);
	--rac-grid: linear-gradient(rgba(0, 196, 204, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 196, 204, .075) 1px, transparent 1px);
	--rac-top: 24px; /* set by rac-course.js: 24px below the site header */
}

/* ---------------------------------------------------------------- base */
.rac-course {
	position: relative;
	direction: rtl;
	overflow-x: clip;
	background: var(--rac-bg);
	color: var(--rac-text);
	font-family: var(--ra-font, Assistant, "Arial Hebrew", system-ui, sans-serif);
	font-size: 16px;
	line-height: normal;
}
/* Elementor's container spacing is replaced by the design's own spacing, set per element below. */
.rac-course.e-con,
.rac-course .e-con {
	padding: 0;
	gap: 0;
	min-height: 0;
	border-radius: 0;
}
.rac-course .elementor-widget {
	margin: 0;
}
/* The theme's reset gives headings line-height 1.2 and captions italics; the design uses the browser's defaults. */
.rac-course h1,
.rac-course h2,
.rac-course h3 {
	line-height: normal;
}
.rac-course p,
.rac-course h1,
.rac-course h2,
.rac-course h3,
.rac-course ul,
.rac-course ol,
.rac-course figure,
.rac-course blockquote {
	margin: 0;
}
/* Elementor colours and sizes headings and text from the site's global styles (and, in the editor, per
   widget). Here a heading's title takes everything from its widget, which carries the design's classes. */
body .rac-course .elementor-element.elementor-widget-heading .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}
body .rac-course .elementor-element.elementor-widget-text-editor {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.rac-course a {
	color: var(--rac-cyan);
}
.rac-course a:hover {
	color: var(--rac-cyan-soft);
}
.rac-course .elementor-widget-heading .elementor-heading-title a {
	color: var(--rac-cyan);
}
.rac-course .elementor-widget-heading .elementor-heading-title a:hover {
	color: var(--rac-cyan-soft);
}
.rac-course a:focus-visible,
.rac-course button:focus-visible,
.rac-course summary:focus-visible {
	outline: 2px solid var(--rac-cyan);
	outline-offset: 3px;
}
.rac-course .rac-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- shared helpers */
.rac-course .rac-blueprint {
	background-image: var(--rac-grid);
	background-size: 40px 40px;
}
.rac-course .rac-bp-fade {
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 70% 30%, #000, transparent);
	mask-image: radial-gradient(ellipse 75% 80% at 70% 30%, #000, transparent);
}
.rac-course .rac-dots {
	background-image: radial-gradient(rgba(125, 240, 244, .16) 1px, transparent 1.6px);
	background-size: 22px 22px;
}
.rac-course .rac-seam {
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(47, 224, 230, .42), transparent);
}
.rac-course .rac-grain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .09;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.rac-course .rac-gtext {
	background-image: linear-gradient(120deg, #7df0f4 0%, #2fe0e6 42%, #2e8bea 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.rac-course .rac-hl {
	background-image: linear-gradient(90deg, #2fe0e6, #2e8bea);
	background-repeat: no-repeat;
	background-size: 100% .17em;
	background-position: 0 94%;
	padding-bottom: .02em;
}
.rac-course .rac-shine {
	position: relative;
	overflow: hidden;
}
.rac-course .rac-shine::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -75%;
	width: 50%;
	transform: skewX(-20deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
	pointer-events: none;
}
.rac-course .rac-cardfx:hover {
	transform: translateY(-4px);
	border-color: #2a7f86;
	box-shadow: 0 22px 56px rgba(0, 196, 204, .12);
}

/* Spaced eyebrow above a heading, and the band headings. */
.rac-course .elementor-widget.rac-eyb {
	display: block;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .32em;
	color: var(--rac-text-4);
}
.rac-course .elementor-widget.rac-h2 {
	font-size: clamp(28px, 4.4vw, 36px);
	font-weight: 800;
	letter-spacing: -.02em;
}

/* ---------------------------------------------------------------- layout: bands, content column, card */
.rac-course .e-con.rac-stack {
	position: relative;
}
.rac-course .e-con.rac-band {
	position: relative;
	overflow: hidden;
}
.rac-course .e-con.rac-in {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline-start: 24px;
	padding-inline-end: 452px;
}
/* Decoration layers (an HTML widget per band) sit behind the content. */
.rac-course .elementor-widget.rac-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.rac-course .elementor-widget.rac-decor > .elementor-widget-container {
	position: absolute;
	inset: 0;
}
.rac-course .rac-decor .rac-fill {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.rac-course .rac-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.rac-course .rac-glow-build {
	inset-inline-start: -160px;
	bottom: -280px;
	width: 760px;
	height: 640px;
	border-radius: 0;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 196, 204, .16) 0%, rgba(0, 196, 204, 0) 70%);
}
.rac-course .rac-glow-after {
	inset-inline-end: -180px;
	top: -120px;
	width: 760px;
	height: 600px;
	border-radius: 0;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46, 139, 234, .13) 0%, rgba(46, 139, 234, 0) 70%);
}
.rac-course .rac-glow-how {
	inset-inline-start: -220px;
	top: 8%;
	width: 760px;
	height: 620px;
	border-radius: 0;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(47, 224, 230, .11) 0%, rgba(47, 224, 230, 0) 70%);
}
.rac-course .rac-glow-teacher {
	inset-inline-start: -120px;
	bottom: -320px;
	width: 900px;
	height: 620px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(47, 224, 230, .16) 0%, rgba(0, 196, 204, .05) 45%, rgba(0, 196, 204, 0) 70%);
}
.rac-course .rac-dots-down {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.rac-course .rac-dots-up {
	-webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(0deg, #000 0%, transparent 70%);
}

.rac-course .e-con.rac-aside {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: max(24px, calc((100% - 1200px) / 2 + 24px));
	width: 380px;
	z-index: 5;
	padding-top: 40px;
	pointer-events: none;
}
.rac-course .e-con.rac-stick {
	position: sticky;
	top: var(--rac-top);
	pointer-events: auto;
}

/* ---------------------------------------------------------------- hero */
.rac-course .e-con.rac-b-hero {
	background: #070b1a;
	padding: 40px 0 64px;
}
.rac-course .rac-blob {
	position: absolute;
	inset-inline-start: -220px;
	top: -240px;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 196, 204, .2) 0%, rgba(0, 196, 204, 0) 66%);
	pointer-events: none;
}
.rac-course .rac-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	font-size: 14.5px;
	color: var(--rac-text-4);
}
.rac-course .rac-crumbs a {
	display: inline-block;
	min-height: 24px; /* a big enough target for a finger */
	padding-block: 2px;
	color: var(--rac-text-4);
	text-decoration: none;
}
.rac-course .rac-crumbs a:hover {
	color: var(--rac-text);
}
.rac-course .rac-crumbs .rac-crumbs-here {
	color: var(--rac-text-2);
}
.rac-course .e-con.rac-titlerow {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 22px;
}
.rac-course .rac-titlerow > .elementor-widget {
	width: auto;
	max-width: 100%;
}
.rac-course .rac-ring {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid var(--rac-cyan);
	box-shadow: 0 0 18px rgba(47, 224, 230, .45);
	flex-shrink: 0;
}
.rac-course .elementor-widget.rac-h1 {
	font-size: 19px;
	font-weight: 800;
}
.rac-course .elementor-widget.rac-levelph {
	font-size: 18px;
	font-weight: 300;
	color: var(--rac-text-2);
}
.rac-course .elementor-widget.rac-hook {
	margin: 0 0 26px;
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.03em;
}
/* The instructor line at the bottom of the enrol card: photo, "עם רועי דוד" and the tools. Roei moved it here
   from the hero (28.10.2026) to keep the first screen calm. */
.rac-course .e-con.rac-card-teacher {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 12px;
	row-gap: 2px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(125, 240, 244, .14);
}
.rac-course .rac-card-teacher > .elementor-widget {
	width: auto;
	min-width: 0;
	grid-column: 2;
}
.rac-course .rac-card-teacher > .elementor-widget.rac-ir-img {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.rac-course .rac-ir-img img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 10%;
	background: #121a3a;
	border: 1px solid #27345f;
}
.rac-course .elementor-widget.rac-ir-name {
	font-size: 15px;
	font-weight: 700;
}
.rac-course .elementor-widget.rac-ir-tools {
	font-size: 14px;
	color: var(--rac-text-2);
}
.rac-course .rac-ir-tools strong {
	color: var(--rac-cyan);
}
body .rac-course .e-con > .elementor-widget.rac-def {
	margin: 0 0 22px;
	max-width: 36em;
	font-size: 19.5px;
	line-height: 1.7;
	color: var(--rac-text-2);
}
.rac-course .rac-def p {
	margin: 0;
}
.rac-course .rac-def strong {
	color: var(--rac-text);
}
.rac-course .rac-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15.5px;
	color: var(--rac-text-2);
}
.rac-course .rac-rating .rac-ico-star {
	flex-shrink: 0;
	color: #f5c451;
}
.rac-course .rac-rating strong {
	color: var(--rac-text);
}

/* ---------------------------------------------------------------- the enrol card */
.rac-course .e-con.rac-card {
	position: relative;
	background: #0c1430;
	border: 1px solid #1f6f76;
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
/* The light running around the card's edge (the card itself does not clip, so the edge stays visible).
   rac-course.js adds <span class="rac-beam"><i></i></span>: the span is a still 1px ring (a mask), and the <i>
   inside it is a conic light turned by transform, so the graphics card turns it without repainting the page.
   The <i> is a square as wide as the card's diagonal, so its corners never show while it turns. */
.rac-course .rac-beam {
	position: absolute;
	inset: -1px;
	z-index: 2;
	overflow: hidden;
	border-radius: inherit;
	padding: 1px;
	container-type: size;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.rac-course .rac-beam i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250%;
	width: hypot(100cqw, 100cqh);
	aspect-ratio: 1;
	translate: -50% -50%;
	background: conic-gradient(transparent 0%, #2fe0e6 13%, transparent 27%);
}
.rac-course .rac-cover {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 21px 21px 0 0;
	background: radial-gradient(ellipse 70% 90% at 25% 40%, rgba(0, 196, 204, .28), rgba(0, 196, 204, 0) 70%), linear-gradient(160deg, #0d1a3a 0%, #081022 100%);
}
.rac-course .rac-cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rac-course .rac-cover--video {
	aspect-ratio: auto;
	background: #000;
}
.rac-course .rac-cover--video .tutor-video-player,
.rac-course .rac-cover--video .tutor-video-player-wrapper {
	margin: 0;
	border-radius: 0;
}
.rac-course .e-con.rac-card-body {
	padding: 24px;
}
.rac-course .rac-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}
.rac-course .rac-price {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	color: var(--rac-cyan);
}
.rac-course .rac-was {
	font-size: 19px;
	color: var(--rac-text-4);
}
.rac-course .rac-was del {
	text-decoration: line-through;
}
.rac-course .rac-pay-note {
	margin: 0 0 20px;
	font-size: 14.5px;
	color: var(--rac-text-4);
}
.rac-course .rac-buy {
	margin: 0;
}
.rac-course .rac-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	margin: 0 0 22px;
	padding: 16px 22px;
	border: 0;
	border-radius: 14px;
	background: var(--rac-cyan);
	color: var(--rac-ink);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.rac-course a.rac-btn:hover,
.rac-course .rac-btn:hover {
	background: var(--rac-cyan);
	color: var(--rac-ink);
}
.rac-course .rac-btn-sep {
	opacity: .45;
}
.rac-course .rac-enrol--learn .rac-btn {
	margin-top: 4px;
}
/* A student who finished the course: a quiet note, the way back to the lessons, and the personal area. */
.rac-course .rac-done {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid rgba(47, 224, 230, .35);
	border-radius: 14px;
	background: rgba(47, 224, 230, .08);
	color: var(--rac-cyan-soft);
	font-size: 17px;
	font-weight: 800;
}
.rac-course .rac-done .rac-ico {
	flex-shrink: 0;
}
.rac-course .rac-enrol--learn .rac-done + .rac-btn {
	margin: 0 0 12px;
}
.rac-course .rac-btn-2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 48px;
	margin: 0 0 12px;
	padding: 12px 20px;
	border: 1px solid rgba(194, 205, 232, .3);
	border-radius: 14px;
	background: transparent;
	color: var(--rac-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.rac-course .rac-btn-2:hover {
	border-color: rgba(47, 224, 230, .55);
	color: var(--rac-cyan-soft);
}
.rac-course .rac-btn-link {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 44px;
	margin: 0 0 18px;
	color: var(--rac-cyan-soft);
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.rac-course .rac-enrol--closing .rac-done {
	justify-content: center;
	width: fit-content;
	margin-inline: auto;
}
.rac-course .rac-full {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rac-text-2);
}
.rac-course .elementor-widget.rac-incl-h {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
}
.rac-course .rac-list--materials {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--rac-text-2);
}
.rac-course .rac-list--materials li {
	display: flex;
	gap: 10px;
	align-items: center;
}
.rac-course .rac-list .rac-ico {
	flex-shrink: 0;
	color: var(--rac-cyan);
}

/* ---------------------------------------------------------------- portfolio strip */
.rac-course .e-con.rac-b-pf {
	background: #0b1027;
	padding: 64px 0 76px;
}
.rac-course .elementor-widget.rac-pf-h2 {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.6vw, 30px);
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.25;
	text-wrap: balance;
}
.rac-course .elementor-widget.rac-pf-note {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--rac-text-2);
}
.rac-course .rac-pf-stage {
	position: relative;
	height: 330px;
	margin-top: 30px;
}
.rac-course .rac-pf-words {
	position: absolute;
	inset-inline: -10%;
	top: 50%;
	transform: translateY(-50%) rotate(-4deg);
	direction: ltr;
	overflow: hidden;
	pointer-events: none;
}
.rac-course .rac-pf-wtrack {
	display: flex;
	width: max-content;
	gap: 40px;
	white-space: nowrap;
	font-size: 124px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(125, 240, 244, .17);
}
.rac-course .rac-pf-tilt {
	position: absolute;
	inset-inline: -80px;
	top: 34px;
	transform: rotate(-4deg);
}
.rac-course .rac-pf-track {
	display: flex;
	gap: 0;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* The space between the pictures is a margin, not a gap: the strip moves by exactly half its length, and a
   gap would make it jump by half a gap at the turn. */
.rac-course .rac-pf-track li {
	flex-shrink: 0;
	margin-inline-end: 22px;
	width: 350px;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #2a3a72;
	background: #0f1838;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.rac-course .rac-pf-track img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* ---------------------------------------------------------------- what you'll learn */
.rac-course .e-con.rac-b-learn {
	background: #0b1230;
	padding: 72px 0;
}
.rac-course .rac-b-learn .elementor-widget.rac-h2 {
	margin: 0 0 22px;
}
.rac-course .rac-list--benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px 28px;
	padding: 28px;
	list-style: none;
	background: #0f1838;
	border: 1px solid #23306a;
	border-radius: 20px;
}
.rac-course .rac-list--benefits li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.6;
	color: var(--rac-text-2);
}
.rac-course .rac-list--benefits .rac-ico {
	margin-top: 3px;
}

/* ---------------------------------------------------------------- what you'll build */
.rac-course .e-con.rac-b-build {
	background: #08161f;
	padding: 80px 0 92px;
}
.rac-course .rac-b-build .rac-drift {
	opacity: .9;
}
/* While the blueprint drifts (rac-course.js) it is 80px taller than its band, on its own layer; the band clips it. */
.rac-course .rac-decor .rac-drift.is-moving {
	top: -80px;
	will-change: transform;
}
.rac-course .e-con.rac-head {
	margin-bottom: 34px;
}
.rac-course .rac-bn-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}
.rac-course .rac-bn-grid > :nth-child(2) {
	margin-top: 56px;
}
.rac-course .rac-bn-grid > :nth-child(3) {
	margin-top: 112px;
}
.rac-course .rac-bn-num {
	display: block;
	font-size: 108px;
	font-weight: 800;
	line-height: .84;
	letter-spacing: -.05em;
}
.rac-course .rac-bn-eyb {
	position: relative;
	margin: 2px 0 12px;
	font-size: 14px;
	letter-spacing: .3em;
	color: var(--rac-text-2);
}
.rac-course .rac-bn-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
}
.rac-course .rac-bn-text {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--rac-text-2);
}

/* ---------------------------------------------------------------- curriculum: the syllabus
   As it was on the home page until 29.10.2026: every lesson numbered through the course, the stages one under
   the other, and a bar that stays under the header with the stage in view and one mark per lesson.
   rac-course.js adds "is-live" and lights each lesson as it passes the middle of the screen; without it every
   lesson is lit and the bar stays hidden. */
/* Plain navy (no dot pattern), with dim light coming in from the sides (Roei, 29.10.2026). */
.rac-course .e-con.rac-b-curr {
	background:
		radial-gradient(ellipse 34% 30% at 100% 18%, rgba(47, 224, 230, .09), rgba(47, 224, 230, 0) 72%),
		radial-gradient(ellipse 32% 34% at 0% 56%, rgba(120, 170, 255, .095), rgba(120, 170, 255, 0) 72%),
		radial-gradient(ellipse 30% 26% at 100% 88%, rgba(120, 170, 255, .065), rgba(120, 170, 255, 0) 72%),
		#0b1129;
	padding: 84px 0 92px;
	overflow: clip; /* not "hidden", which would stop the bar from sticking */
}
.rac-course .rac-b-curr .rac-dots {
	display: none;
}
.rac-course .rac-b-curr .e-con.rac-head {
	margin-bottom: 30px;
}
.rac-course .elementor-widget.rac-curr-h2 {
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.rac-course .rac-curr-h2 strong {
	font-weight: 800;
}
.rac-course .rac-sy {
	--rac-line: rgba(194, 205, 232, .12);
	--rac-line-2: rgba(194, 205, 232, .24);
}
.rac-course .rac-sy-bar {
	display: none;
}
.rac-course .rac-sy.is-live .rac-sy-bar {
	position: sticky;
	top: calc(var(--rac-top) - 12px);
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 12px;
	padding: 14px 18px;
	border: 1px solid rgba(47, 224, 230, .32);
	border-radius: 16px;
	background: rgba(11, 17, 41, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	/* A soft cyan halo, so the bar reads as its own layer over the lessons. */
	box-shadow:
		0 0 0 1px rgba(47, 224, 230, .08),
		0 0 26px -2px rgba(47, 224, 230, .3),
		0 0 70px -10px rgba(47, 224, 230, .18),
		0 22px 44px -26px rgba(0, 0, 0, .95);
}
.rac-course .rac-sy-now {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rac-course .rac-sy-now b {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}
.rac-course .rac-sy-now span {
	color: var(--rac-text-4);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.rac-course .rac-sy-meter {
	display: flex;
	align-items: flex-end;
	min-height: 28px;
}
.rac-course .rac-sy-meter span {
	display: flex;
	gap: 3px;
	align-items: flex-end;
}
.rac-course .rac-sy-meter span + span {
	margin-inline-start: 8px;
}
.rac-course .rac-sy-meter i {
	width: 9px;
	height: 20px;
	border-radius: 3px;
	background: rgba(194, 205, 232, .14);
	transition: background-color 350ms ease, box-shadow 350ms ease, height 350ms var(--rac-ease);
}
.rac-course .rac-sy-meter i.on {
	height: 28px;
	background: var(--rac-cyan);
	box-shadow: 0 0 10px rgba(47, 224, 230, .5);
}
.rac-course .rac-sy-stages {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 0;
	list-style: none;
}
.rac-course .rac-sy-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rac-line-2);
}
.rac-course .rac-sy-name {
	color: var(--rac-cyan-soft);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .1em;
}
.rac-course .rac-sy-count {
	color: var(--rac-text-4);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.rac-course .rac-sy-ls {
	padding: 0;
	list-style: none;
}
.rac-course .rac-sy-ls li {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: baseline;
	gap: 14px;
	padding-block: 18px;
	border-bottom: 1px solid var(--rac-line);
}
.rac-course .rac-sy-n {
	font-size: 34px;
	font-weight: 200;
	line-height: 1;
	color: var(--rac-cyan);
	font-variant-numeric: tabular-nums;
	transition: color 450ms ease;
}
.rac-course .rac-sy-t {
	font-size: clamp(18px, 1.6vw, 20px);
	font-weight: 600;
	line-height: 1.45;
	color: var(--rac-text);
	transition: color 450ms ease;
}
.rac-course .rac-sy.is-live .rac-sy-ls li:not(.on) .rac-sy-n {
	color: rgba(194, 205, 232, .32);
}
.rac-course .rac-sy.is-live .rac-sy-ls li:not(.on) .rac-sy-t {
	color: var(--rac-text-2);
}

/* ---------------------------------------------------------------- what happens once you are in
   The steps beside a drawing of the personal area (computer and phone). As a step reaches the middle of the
   screen it lights, and so does its place in the drawing (rac-course.js adds "is-live"). */
.rac-course .e-con.rac-b-how {
	background: #070b1a;
	padding: 84px 0 92px;
	overflow: clip;
}
.rac-course .rac-b-how .e-con.rac-head {
	margin-bottom: 30px;
}
.rac-course .rac-hw {
	--rac-line: rgba(194, 205, 232, .12);
	--rac-line-2: rgba(194, 205, 232, .24);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 40px;
	align-items: start;
}
.rac-course .rac-hw-steps {
	display: flex;
	flex-direction: column;
	padding: 0;
	list-style: none;
}
.rac-course .rac-hw-step {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	padding-block: 24px;
	border-top: 1px solid var(--rac-line);
	transition: opacity 450ms ease;
}
.rac-course .rac-hw-step:first-child {
	padding-top: 6px;
	border-top: 0;
}
.rac-course .rac-hw.is-live .rac-hw-step {
	opacity: .6; /* .6 keeps the text at 4.9:1 */
}
.rac-course .rac-hw.is-live .rac-hw-step.is-on {
	opacity: 1;
}
.rac-course .rac-hw-n {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rac-line-2);
	color: var(--rac-text-2);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}
.rac-course .rac-hw-step.is-on .rac-hw-n {
	background: var(--rac-cyan);
	border-color: var(--rac-cyan);
	color: var(--rac-ink);
}
.rac-course .rac-hw-title {
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}
.rac-course .rac-hw-text {
	max-width: 46ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--rac-text-2);
}
.rac-course .rac-hw-stage {
	position: sticky;
	top: calc(var(--rac-top) + 16px);
	padding-bottom: 86px;
}
.rac-course .rac-hw-devices {
	position: relative;
	margin-inline-end: 34px;
}
.rac-course .rac-hw-browser {
	position: relative;
	border-radius: 14px;
	background: #0b1126;
	border: 1px solid var(--rac-line-2);
	box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), 0 0 0 6px rgba(255, 255, 255, .02);
}
.rac-course .rac-hw-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--rac-line);
	border-radius: 14px 14px 0 0;
	background: #0e1530;
	direction: ltr;
}
.rac-course .rac-hw-bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(194, 205, 232, .2);
}
.rac-course .rac-hw-url {
	margin-inline: auto;
	padding: 3px 12px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .05);
	color: var(--rac-text-4);
	font-size: 11px;
	font-weight: 600;
}
.rac-course .rac-hw-acc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	font-size: 12px;
	line-height: 1.5;
}
.rac-course .rac-hw-hero {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	border-radius: 10px;
	background: radial-gradient(120% 140% at 100% 0%, rgba(47, 224, 230, .12), transparent 60%), #0d1430;
}
.rac-course .rac-hw-k {
	color: var(--rac-cyan-soft);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
}
.rac-course .rac-hw-hello {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 800;
}
.rac-course .rac-hw-name {
	width: 64px;
	height: 16px;
	border-radius: 6px;
	background: rgba(194, 205, 232, .2);
}
.rac-course .rac-hw-card {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--rac-line-2);
	background: #0d1430;
}
.rac-course .rac-hw-card img,
.rac-course .rac-hw-noimg {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 7px;
	background: #16204a;
}
.rac-course .rac-hw-card b {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.3;
}
.rac-course .rac-hw-prog {
	height: 6px;
	border-radius: 999px;
	background: rgba(194, 205, 232, .14);
	overflow: hidden;
}
.rac-course .rac-hw-prog i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--rac-cyan-soft), var(--rac-cyan));
	transform-origin: right;
}
.rac-course .rac-hw-meta {
	margin-top: 5px;
	color: var(--rac-text-4);
	font-size: 11px;
	font-weight: 600;
}
.rac-course .rac-hw-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 5px 12px;
	border-radius: 7px;
	background: var(--rac-cyan);
	color: var(--rac-ink);
	font-size: 11px;
	font-weight: 800;
}
.rac-course .rac-hw-help {
	position: relative;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px dashed var(--rac-line-2);
	color: var(--rac-text-2);
	font-size: 12px;
}
.rac-course .rac-hw-help b {
	display: block;
	margin-bottom: 2px;
	color: var(--rac-text);
	font-size: 13px;
}
.rac-course .rac-hw-phone {
	position: absolute;
	top: 46%;
	inset-inline-end: -34px;
	width: 122px;
	padding: 7px;
	border-radius: 22px;
	background: #050814;
	border: 1px solid var(--rac-line-2);
	box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .95);
}
.rac-course .rac-hw-phone-in {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 9px 12px;
	border-radius: 16px;
	overflow: hidden;
	background: #0b1126;
	font-size: 9px;
}
.rac-course .rac-hw-phone-in .rac-hw-hello {
	font-size: 13px;
}
.rac-course .rac-hw-phone-in .rac-hw-name {
	width: 36px;
	height: 10px;
}
.rac-course .rac-hw-phone-in img,
.rac-course .rac-hw-phone-in .rac-hw-noimg {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}
.rac-course .rac-hw-phone-in b {
	font-size: 9.5px;
	line-height: 1.3;
}
.rac-course .rac-hw-zone {
	transition: box-shadow 450ms ease;
}
.rac-course .rac-hw-zone.is-on {
	box-shadow: 0 0 0 2px var(--rac-cyan), 0 0 26px rgba(47, 224, 230, .35);
}
.rac-course .rac-hw-hot {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #070b1a;
	border: 1px solid var(--rac-line-2);
	color: var(--rac-text-4);
	font-size: 11px;
	font-weight: 800;
	transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, transform 400ms var(--rac-ease);
}
.rac-course .rac-hw-hot.is-on {
	background: var(--rac-cyan);
	border-color: var(--rac-cyan);
	color: var(--rac-ink);
	transform: scale(1.12);
}
.rac-course .rac-hw-hot-1 {
	top: -12px;
	inset-inline-end: -12px;
}
.rac-course .rac-hw-hot-2 {
	top: -13px;
	inset-inline-start: 34%;
}
.rac-course .rac-hw-hot-3 {
	top: -13px;
	inset-inline-start: 16px;
}
/* On a phone the bar keeps to one row: smaller marks, shorter lines. */
@media (max-width: 720px) {
	.rac-course .rac-sy.is-live .rac-sy-bar {
		flex-wrap: nowrap;
		gap: 12px;
		padding: 10px 16px;
	}
	.rac-course .rac-sy-now b {
		font-size: 17px;
	}
	.rac-course .rac-sy-now span {
		font-size: 12.5px;
	}
	.rac-course .rac-sy-meter {
		flex: none;
		min-height: 20px;
	}
	.rac-course .rac-sy-meter span {
		gap: 2px;
	}
	.rac-course .rac-sy-meter span + span {
		margin-inline-start: 5px;
	}
	.rac-course .rac-sy-meter i {
		width: 6px;
		height: 14px;
		border-radius: 2px;
	}
	.rac-course .rac-sy-meter i.on {
		height: 20px;
	}
}
/* Beside the enrol card the column is narrow until the screen is 1200px wide: the drawing goes on top. */
@media (max-width: 1199px) {
	.rac-course .rac-hw {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.rac-course .rac-hw-stage {
		order: -1;
		position: relative;
		top: auto;
		width: min(100%, 520px);
		padding-bottom: 70px;
	}
	.rac-course .rac-hw.is-live .rac-hw-step {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------- after the course */
.rac-course .e-con.rac-b-after {
	background: #070b1a;
	padding: 84px 0;
}
.rac-course .rac-after-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.rac-course .rac-after-title {
	margin: 0 0 8px;
	font-size: clamp(25px, 3.4vw, 32px);
	font-weight: 400;
	line-height: 1.25;
}
.rac-course .rac-after-text {
	max-width: 38em;
	font-size: 17px;
	line-height: 1.7;
	color: var(--rac-text-2);
}

/* ---------------------------------------------------------------- the instructor's line, with BUILD behind it */
.rac-course .e-con.rac-b-quote {
	background: #0b1027;
	padding: 110px 0;
}
.rac-course .rac-ghost {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	margin-top: -.4em;
	text-align: center;
	direction: ltr;
	font-size: clamp(150px, 25vw, 340px);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.04em;
	color: rgba(125, 240, 244, .05);
	pointer-events: none;
	user-select: none;
}
/* The word is drawn from data-word, so it stays out of the page's text (it is decoration). */
.rac-course .rac-ghost[data-word]::before {
	content: attr(data-word);
}
.rac-course .rac-quote {
	text-align: center;
}
.rac-course .rac-quote blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-style: normal;
}
.rac-course .rac-quote blockquote p {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 300;
	line-height: 1.35;
	text-wrap: balance;
}
.rac-course .rac-quote .rac-gtext {
	font-weight: 600;
}
.rac-course .rac-quote figcaption {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: .2em;
	color: var(--rac-text-4);
}

/* ---------------------------------------------------------------- who it is for, what you need */
.rac-course .e-con.rac-b-who {
	background: linear-gradient(135deg, #0b1f2a 0%, #0e2a3c 55%, #0b1f2a 100%);
	padding: 80px 0;
}
.rac-course .rac-b-who .rac-bp-side {
	opacity: .45;
	-webkit-mask-image: radial-gradient(ellipse 50% 70% at 85% 50%, #000, transparent);
	mask-image: radial-gradient(ellipse 50% 70% at 85% 50%, #000, transparent);
}
.rac-course .e-con.rac-who-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}
.rac-course .e-con.rac-who-card {
	padding: 28px;
	border-radius: 20px;
	background: #11193d;
	border: 1px solid #23306a;
}
.rac-course .e-con.rac-need-card {
	background: #081822;
	border-color: #1b4152;
}
.rac-course .elementor-widget.rac-who-h {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 800;
}
.rac-course .rac-list--audience,
.rac-course .rac-list--requirements {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--rac-text-2);
}
.rac-course .rac-list--audience strong {
	color: var(--rac-text);
}
.rac-course .rac-list--requirements li {
	display: flex;
	gap: 12px;
}
.rac-course .rac-list--requirements .rac-ico {
	margin-top: 2px;
}

/* ---------------------------------------------------------------- the instructor */
.rac-course .e-con.rac-b-teacher {
	background: #070b1a;
	padding: 88px 0;
}
.rac-course .e-con.rac-teacher-card {
	position: relative;
	overflow: hidden;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	padding: clamp(22px, 4vw, 34px);
	border-radius: 24px;
	background: linear-gradient(135deg, #0e2a3c 0%, #0c2033 70%);
	border: 1px solid #1b4152;
}
.rac-course .rac-teacher-card > .elementor-widget.rac-teacher-img {
	width: auto;
	flex-shrink: 0;
}
.rac-course .rac-teacher-img img {
	display: block;
	width: 132px;
	height: 132px;
	border-radius: 22px;
	object-fit: cover;
	object-position: 50% 10%;
	background: #0f2d3f;
}
.rac-course .e-con.rac-teacher-text {
	flex: 999 1 300px;
	min-width: 0;
}
.rac-course .rac-teacher-text .elementor-widget.rac-eyb {
	color: var(--rac-cyan-soft);
}
.rac-course .elementor-widget.rac-teacher-name {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 800;
}
body .rac-course .elementor-widget.rac-teacher-bio {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rac-text-2);
}
.rac-course .rac-teacher-bio p {
	margin: 0;
}
.rac-course .e-con.rac-chips {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.rac-course .rac-chips > .elementor-widget {
	width: auto;
}
.rac-course .elementor-widget.rac-chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #23506a;
	border-radius: 999px;
	font-size: 14px;
	color: var(--rac-text-2);
}
/* The students count leads the chips. */
.rac-course .elementor-widget.rac-chip.rac-chip-hl {
	border-color: rgba(47, 224, 230, .55);
	background: rgba(47, 224, 230, .08);
	color: #7df0f4;
	font-weight: 700;
}

/* ---------------------------------------------------------------- FAQ */
.rac-course .e-con.rac-b-faq {
	background: #0b1027;
	padding: 80px 0 96px;
}
.rac-course .rac-b-faq .e-con.rac-head {
	margin-bottom: 22px;
}
.rac-course .rac-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rac-course .rac-faq-item {
	background: #10173a;
	border: 1px solid #222e62;
	border-radius: 16px;
}
.rac-course .rac-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 700;
}
.rac-course .rac-faq-item summary::-webkit-details-marker {
	display: none;
}
.rac-course .rac-faq-item .rac-ico-chevron {
	flex-shrink: 0;
	color: var(--rac-text-4);
}
.rac-course .rac-faq-item[open] .rac-ico-chevron {
	transform: rotate(180deg);
}
.rac-course .rac-faq-a {
	padding: 0 22px 18px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rac-text-2);
}

/* ---------------------------------------------------------------- closing band */
.rac-course .e-con.rac-b-close {
	position: relative;
	overflow: hidden;
	padding: 100px 0 112px;
	background: linear-gradient(180deg, #0b1027 0%, #0c2433 55%, #0e3442 100%);
}
.rac-course .rac-b-close .rac-bp-center {
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, #000, transparent);
	mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, #000, transparent);
}
.rac-course .rac-sunrise {
	position: absolute;
	inset-inline-start: 50%;
	bottom: -420px;
	width: 1200px;
	height: 760px;
	margin-inline-start: -600px;
	border-radius: 50%;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(47, 224, 230, .34) 0%, rgba(0, 196, 204, .10) 45%, rgba(0, 196, 204, 0) 70%);
	pointer-events: none;
}
.rac-course .e-con.rac-close-in {
	position: relative;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 24px;
	text-align: center;
}
.rac-course .elementor-widget.rac-close-h2 {
	margin: 0 0 18px;
	font-size: clamp(34px, 6.4vw, 58px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	text-wrap: balance;
}
.rac-course .elementor-widget.rac-close-sum {
	margin: 0 0 26px;
	font-size: 17px;
	color: var(--rac-text-2);
}
.rac-course .rac-enrol--closing .rac-price-row {
	justify-content: center;
	margin-bottom: 26px;
}
.rac-course .rac-enrol--closing .rac-price {
	font-size: 52px;
}
.rac-course .rac-enrol--closing .rac-was {
	font-size: 20px;
	color: var(--rac-text-2);
}
.rac-course .rac-enrol--closing .rac-btn {
	display: inline-flex;
	width: auto;
	margin: 0;
	padding: 18px 48px;
	font-size: 19px;
}
/* Under the buy button: the payment is safe (the card), and the refund too (the closing band). */
.rac-course .rac-trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin: -10px 0 22px;
	font-size: 14px;
	color: var(--rac-text-4);
}
.rac-course .rac-trust .rac-ico {
	flex-shrink: 0;
	color: var(--rac-cyan);
}
.rac-course .rac-enrol--closing .rac-trust {
	margin: 16px 0 0;
}
.rac-course .elementor-widget.rac-close-note {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--rac-text-2);
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 960px) {
	.rac-course .e-con.rac-in {
		padding-inline-end: 24px;
	}
	.rac-course .e-con.rac-aside {
		position: static;
		width: auto;
		padding: 0 24px 44px;
		background: #070b1a;
		pointer-events: auto;
	}
	.rac-course .e-con.rac-stick {
		position: static;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
	.rac-course .rac-sy.is-live .rac-sy-bar {
		top: calc(var(--rac-top) - 24px);
		margin-inline: -24px;
		border-radius: 0;
		border-inline: 0;
	}
	.rac-course .rac-sy-ls li {
		grid-template-columns: 48px minmax(0, 1fr);
	}
	.rac-course .rac-sy-n {
		font-size: 28px;
	}
}
@media (max-width: 720px) {
	.rac-course .rac-bn-grid {
		grid-template-columns: 1fr;
	}
	.rac-course .rac-bn-grid > :nth-child(2),
	.rac-course .rac-bn-grid > :nth-child(3) {
		margin-top: 0;
	}
	.rac-course .rac-bn-num {
		font-size: 84px;
	}
	.rac-course .rac-pf-stage {
		height: 250px;
	}
	.rac-course .rac-pf-track li {
		width: 250px;
	}
	.rac-course .rac-pf-wtrack {
		font-size: 76px;
	}
}
/* ---------------------------------------------------------------- motion (never with "reduce motion") */
@media (prefers-reduced-motion: no-preference) {
	.rac-course .rac-shine::after {
		transition: inset-inline-start .6s ease;
	}
	.rac-course .rac-shine:hover::after {
		inset-inline-start: 125%;
	}
	.rac-course .rac-cardfx {
		transition: transform .35s var(--rac-ease), border-color .35s ease, box-shadow .35s ease;
	}
	.rac-course .rac-faq-item .rac-ico-chevron {
		transition: transform .3s ease;
	}
	.rac-course .rac-blob {
		animation: rac-blob 24s ease-in-out infinite alternate;
	}
	@keyframes rac-blob {
		from { transform: translate3d(0, 0, 0) scale(1); }
		to { transform: translate3d(-5rem, 3rem, 0) scale(1.2); }
	}
	.rac-course .rac-sunrise {
		animation: rac-sunrise 9s ease-in-out infinite alternate;
	}
	@keyframes rac-sunrise {
		from { opacity: .75; transform: scale(1); }
		to { opacity: 1; transform: scale(1.08); }
	}
	/* The large glows hold still while the page scrolls (html.rac-scrolling, redix-academy.js). */
	html.rac-scrolling .rac-course .rac-blob,
	html.rac-scrolling .rac-course .rac-sunrise {
		animation-play-state: paused;
	}
	.rac-course .rac-beam i {
		animation: rac-beam 5.5s linear infinite;
	}
	@keyframes rac-beam {
		from { rotate: 0deg; }
		to { rotate: 360deg; }
	}
	.rac-course .rac-pf-track {
		animation: rac-pf-move 64s linear infinite;
	}
	.rac-course .rac-pf-tilt:hover .rac-pf-track {
		animation-play-state: paused;
	}
	@keyframes rac-pf-move {
		to { transform: translateX(50%); }
	}
	.rac-course .rac-pf-wtrack {
		animation: rac-pf-words 80s linear infinite;
	}
	@keyframes rac-pf-words {
		to { transform: translateX(-50%); }
	}
}

/* ---------------------------------------------------------------- the bar that follows the reader (phone, tablet)
   includes/course-bar.php: the price and "לרכישת הקורס", or the progress and the way into the lessons. It is out of
   the way (hidden) while the page's own button is on screen. The page keeps room at the bottom for it. */
.rac-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(47, 224, 230, .28);
	background: rgba(9, 14, 33, .94);
	box-shadow: 0 -20px 40px -22px rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	font-family: "Assistant", system-ui, sans-serif;
	transform: translateY(110%);
	transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.rac-bar[hidden] { display: none; }
.rac-bar.is-on { transform: none; }
.rac-bar-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	margin: 0;
	line-height: 1.15;
}
.rac-bar-price { color: #f2f6ff; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rac-bar-was { color: #8b99bc; font-size: 14px; }
.rac-bar-k { color: #8b99bc; font-size: 13.5px; font-weight: 600; }
.rac-bar-v { color: #f2f6ff; font-size: 17px; font-weight: 800; }
.rac-bar-form { display: contents; margin: 0; }
body .rac-bar .rac-bar-btn {
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 0;
	padding: 14px 22px;
	border: 0;
	border-radius: 14px;
	background: #2fe0e6;
	box-shadow: 0 12px 30px -14px rgba(47, 224, 230, .8);
	color: #041018;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
body .rac-bar .rac-bar-btn:hover,
body .rac-bar .rac-bar-btn:focus { background: #7df0f4; color: #041018; }
body .rac-bar .rac-bar-btn:active { transform: scale(.97); }
body .rac-bar .rac-bar-btn:focus-visible { outline: 3px solid #f2f6ff; outline-offset: 3px; }
.rac-bar-arrow { flex: 0 0 auto; }
@media (max-width: 1024px) {
	body.rac-has-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1025px) {
	.rac-bar { display: none !important; }
}
@media (max-width: 360px) {
	.rac-bar { gap: 10px; padding-inline: 12px; }
	.rac-bar-price { font-size: 22px; }
	body .rac-bar .rac-bar-btn { padding-inline: 16px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.rac-bar { transition: none; }
}

/* "ביטול סיום הקורס", under a finished course's buttons. */
.rac-course .rac-undo-form { display: flex; justify-content: center; margin: -8px 0 12px; }
.rac-course button.rac-undo-btn {
	min-height: 44px;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--rac-text-2);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.rac-course button.rac-undo-btn:hover,
.rac-course button.rac-undo-btn:focus { background: transparent; color: var(--rac-text); }
.rac-course button.rac-undo-btn:focus-visible { outline: 2px solid var(--rac-cyan-soft); outline-offset: 2px; }