/**
 * [rewind-price-slider-v3] - pricing calculator.
 *
 * Own markup, so this is the design and nothing else. Colours and fonts come
 * from the Elementor kit globals with the Figma hex as fallback.
 */

.rw-pricing {
	--rw-ink: var(--e-global-color-primary, #020917);
	--rw-accent: var(--e-global-color-accent, #FDAD0D);
	--rw-accent-hover: var(--e-global-color-10ab63f, #D3910B);
	--rw-muted: var(--e-global-color-445f8b7, #B4B9C4);
	--rw-dim: var(--e-global-color-9ce066a, #5A6478);
	--rw-sand: var(--e-global-color-bd6cb5e, #F5F5F0);
	--rw-check-alt: var(--e-global-color-a307fc8, #7E5808);
	--rw-body: var(--e-global-color-text, #424D62);
	--rw-line: #DEDED4;
	--rw-row-alt: #EBEBE3;
	--rw-field-line: #E2E8F0;
	--rw-field-ink: #1E293B;
	--rw-display: var(--e-global-typography-primary-font-family, "Space Grotesk"), sans-serif;
	--rw-text: var(--e-global-typography-text-font-family, "Inter Tight"), sans-serif;

	position: relative;
	font-family: var(--rw-text);
	color: #fff;
	background: var(--rw-ink);
	padding: 56px 0 0;
}

.rw-pricing *,
.rw-pricing *::before,
.rw-pricing *::after {
	box-sizing: border-box;
}

.rw-pricing > * {
	max-width: 1280px;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.rw-pricing {
		padding: 64px 0 0;
	}
}

/* compact="yes": embedded in a page section, so it pads itself */
.rw-pricing.rw-pricing--compact {
	padding: 40px 20px;
	border-radius: 12px;
}

@media (min-width: 992px) {
	.rw-pricing.rw-pricing--compact {
		padding: 48px 40px;
	}
}

/* ---------- headings ---------- */

.rw-pricing .rw-pricing__title {
	margin: 0 0 32px;
	font-family: var(--rw-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: -0.02em;
	color: #fff;
}

.rw-pricing .rw-pricing__lead {
	margin: 12px 0 0;
	font-size: 20px;
	line-height: 24px;
	color: var(--rw-muted);
}

.rw-pricing .rw-pricing__lead small {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	line-height: 22px;
}

/* ---------- platform tabs ---------- */

.rw-pricing .rw-pricing__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.rw-pricing .rw-pricing__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 37px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 8px;
	font: 400 16px/19px var(--rw-text);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.rw-pricing .rw-pricing__tab:hover {
	background: rgba(255, 255, 255, .08);
}

.rw-pricing .rw-pricing__tab.is-active {
	background: var(--rw-accent);
	border-color: var(--rw-accent);
	color: var(--rw-ink);
}

/* ---------- step 2: intro left, controls right ---------- */

.rw-pricing .rw-pricing__step--plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 64px;
}

.rw-pricing .rw-pricing__step--plan .rw-pricing__title {
	margin: 0;
}

.rw-pricing .rw-pricing__intro {
	flex: 1 1 480px;
}

.rw-pricing .rw-pricing__controls {
	display: flex;
	align-items: center;
	gap: 24px;
}

.rw-pricing .rw-pricing__qty {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	line-height: 24px;
	color: #fff;
}

.rw-pricing .rw-field {
	height: 43px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--rw-field-line);
	border-radius: 6px;
	font: 400 18px/23px var(--rw-display);
	color: var(--rw-field-ink);
}

.rw-pricing .rw-field[type="number"] {
	width: 100px;
}

.rw-pricing .rw-field--select {
	padding-right: 36px;
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231E293B' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}

.rw-pricing .rw-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--rw-accent);
	border-radius: 8px;
}

.rw-pricing .rw-toggle__btn {
	padding: 8px 16px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font: 400 16px/19px var(--rw-text);
	color: var(--rw-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s;
}

.rw-pricing .rw-toggle__btn.is-active {
	background: #fff;
	color: var(--rw-field-ink);
}

/* ---------- buttons ---------- */

.rw-pricing .rw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 28px;
	border: 0;
	border-radius: 8px;
	font: 500 18px/30px var(--rw-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.rw-pricing .rw-btn--primary {
	background: var(--rw-accent);
	color: var(--rw-ink);
}

.rw-pricing .rw-btn--primary:hover {
	background: var(--rw-accent-hover);
	color: var(--rw-ink);
}

.rw-pricing .rw-btn--ghost {
	padding: 12px 20px;
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
	font-size: 16px;
	line-height: 19px;
}

.rw-pricing .rw-link {
	padding: 0;
	border: 0;
	background: none;
	font: 400 16px/19px var(--rw-text);
	color: var(--rw-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- plan cards ---------- */

/* Cards are grid items that subgrid their six rows (name, sub, price, meta,
   cta, extra) so those rows align across cards - a title that wraps on one
   card no longer knocks its price out of line with its neighbour's. */
.rw-pricing .rw-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 411px));
	justify-content: center;
	column-gap: 24px;
	margin-top: 40px;
}

.rw-pricing .rw-plan {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	align-content: start;
	padding: 48px 32px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}

.rw-pricing .rw-plan__name {
	margin: 0 0 12px;
	font-family: var(--rw-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: -0.03em;
	color: #fff;
}

.rw-pricing .rw-plan__sub {
	margin: 0 0 20px;
	min-height: 0;
	font-size: 18px;
	line-height: 30px;
	color: var(--rw-muted);
}

.rw-pricing .rw-plan__sub:empty {
	margin: 0;
}

.rw-pricing .rw-plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.rw-pricing .rw-plan__amount {
	font-family: var(--rw-display);
	font-size: 48px;
	font-weight: 300;
	line-height: 61px;
	color: #fff;
}

.rw-pricing .rw-plan__suffix,
.rw-pricing .rw-plan__avg,
.rw-pricing .rw-plan__tier {
	margin: 0;
	font-size: 16px;
	line-height: 19px;
	color: var(--rw-dim);
}

.rw-pricing .rw-plan__avg strong,
.rw-pricing .rw-plan__tier strong {
	font-weight: 400;
	color: var(--rw-dim);
}

.rw-pricing .rw-plan__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.rw-pricing .rw-plan__meta:empty,
.rw-pricing .rw-plan__meta:not(:has(*)) {
	margin: 0;
}

.rw-pricing .rw-plan__cta {
	width: 100%;
	margin-top: 32px;
}

.rw-pricing .rw-plan__note {
	margin-top: 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--rw-muted);
}

.rw-pricing .rw-plan__note img {
	display: none;
}

.rw-pricing .rw-plan__features {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.rw-pricing .rw-plan__features li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 24px;
	color: var(--rw-muted);
}

.rw-pricing .rw-plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background: var(--rw-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm6.4 11.1-7.6 7.6a1.5 1.5 0 0 1-2.1 0l-3.6-3.6a1.5 1.5 0 1 1 2.1-2.1l2.5 2.5 6.6-6.6a1.5 1.5 0 0 1 2.1 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm6.4 11.1-7.6 7.6a1.5 1.5 0 0 1-2.1 0l-3.6-3.6a1.5 1.5 0 1 1 2.1-2.1l2.5 2.5 6.6-6.6a1.5 1.5 0 0 1 2.1 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rw-pricing .rw-plan__features li.no-bullet {
	padding-left: 0;
}

.rw-pricing .rw-plan__features li.no-bullet::before {
	display: none;
}

.rw-pricing .rw-plan__features li p {
	margin: 0;
}

.rw-pricing .rw-plan__features a,
.rw-pricing .rw-plan__note a {
	color: var(--rw-accent);
}

.rw-pricing .rw-plan__groups {
	margin-top: 32px;
}

.rw-pricing .rw-plan__group {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 12px 0;
}

.rw-pricing .rw-plan__group summary {
	cursor: pointer;
	font-weight: 500;
	color: #fff;
}

.rw-pricing .rw-plan__group .rw-plan__features {
	margin-top: 16px;
}

/* dimmed tier outside the current quantity - click selects it */
.rw-pricing .rw-plan.is-greyed > :not(.rw-plan__greyed) {
	opacity: .35;
	pointer-events: none;
}

.rw-pricing .rw-plan__greyed {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 32px;
	text-align: center;
}

.rw-pricing .rw-plan__greyed p {
	margin: 0;
	font-family: var(--rw-display);
	font-size: 24px;
	line-height: 30px;
	color: #fff;
}

.rw-pricing .rw-promo {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--rw-muted);
}

.rw-pricing .rw-tip-text {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

.rw-pricing .rw-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: 12px;
	line-height: 18px;
	color: var(--rw-muted);
	white-space: nowrap;
	vertical-align: 1px;
}

/* Section end: platforms without the sand comparison block end on the last
   card. The Elementor section that follows pulls itself up 150px to overlap
   the sand, so these need that plus breathing room. */
.rw-pricing > [data-rw-panel]:not(:has(.rw-compare)) {
	padding-bottom: 164px;
}

.rw-pricing .rw-compare:last-child {
	padding-bottom: 80px;
}

/* ---------- comparison table ---------- */
/* full-bleed sand section inside the 1280 container */

.rw-pricing .rw-compare {
	max-width: none;
	margin: 80px calc(50% - 50vw) 0;
	padding: 80px calc(50vw - 50%) 0;
	background: var(--rw-sand);
	color: var(--rw-ink);
}

.rw-pricing .rw-compare__title {
	margin: 0;
	font-family: var(--rw-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: -0.02em;
	color: var(--rw-field-ink);
}

.rw-pricing .rw-compare__lead {
	margin: 4px 0 32px;
	font-size: 18px;
	line-height: 26px;
	color: #424D62;
}

.rw-pricing .rw-table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--rw-line);
	border-radius: 12px;
	box-shadow: 0 2px 40px rgba(222, 222, 212, .4);
}

.rw-pricing .rw-table {
	width: 100%;
	min-width: 720px;
	table-layout: fixed;
	border-collapse: collapse;
}

/* the theme styles tables globally (zebra rows, full cell borders) - reset
   every side explicitly rather than inherit any of it */
.rw-pricing .rw-table tr,
.rw-pricing .rw-table th,
.rw-pricing .rw-table td {
	background: #fff;
}

.rw-pricing .rw-table th,
.rw-pricing .rw-table td {
	height: 76px;
	padding: 24px;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--rw-line);
	text-align: center;
	font-family: var(--rw-text);
	color: var(--rw-ink);
}

.rw-pricing .rw-table thead th {
	height: 80px;
}

.rw-pricing .rw-table thead th:first-child {
	width: 300px;
}

.rw-pricing .rw-table tbody tr:last-child th,
.rw-pricing .rw-table tbody tr:last-child td {
	border-bottom: 0;
}

.rw-pricing .rw-table th.rw-table__plan {
	font-family: var(--rw-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.02em;
}

.rw-pricing .rw-table tr.rw-table__category td {
	height: 80px;
	background: var(--rw-row-alt);
	border-bottom-color: var(--rw-row-alt);
	text-align: left;
	font-family: var(--rw-display);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.rw-pricing .rw-table th.rw-table__feature {
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
}

.rw-pricing .rw-nowrap {
	white-space: nowrap;
}

.rw-pricing .rw-tip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 4px;
	color: var(--rw-dim);
	cursor: help;
}

.rw-pricing .rw-tip-text {
	position: relative;
}

.rw-pricing .rw-tip:focus-visible,
.rw-pricing .rw-tip-text:focus-visible {
	outline: 2px solid var(--rw-accent);
	outline-offset: 2px;
}

/* tooltip, as in the client's draft: shown on hover, and on focus - which is
   also what a tap does on touch devices */
.rw-pricing .rw-tip__bubble {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	width: 300px;
	max-width: 72vw;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 8px;
	background: var(--rw-ink);
	box-shadow: 0 12px 30px rgba(2, 9, 23, .35);
	font-family: var(--rw-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s;
	pointer-events: none;
}

.rw-pricing .rw-tip:hover .rw-tip__bubble,
.rw-pricing .rw-tip:focus-within .rw-tip__bubble,
.rw-pricing .rw-tip-text:hover .rw-tip__bubble,
.rw-pricing .rw-tip-text:focus .rw-tip__bubble {
	opacity: 1;
	visibility: visible;
}

.rw-pricing .rw-table__feature a {
	color: inherit;
}

.rw-pricing .rw-info {
	width: 20px;
	height: 20px;
}

.rw-pricing .rw-table__value {
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

.rw-pricing .rw-table__dash {
	color: var(--rw-dim);
}

.rw-pricing .rw-check {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	fill: var(--rw-ink);
}

/* Advanced column ticks are amber-brown in the design */
.rw-pricing .rw-table__value:nth-child(3) .rw-check {
	fill: var(--rw-check-alt);
}

.rw-pricing .rw-table tr.rw-table__notes td {
	height: auto;
	text-align: left;
	font-size: 16px;
	line-height: 28px;
	color: var(--rw-dim);
}

/* ---------- enterprise banner ---------- */
/* continues the sand from the table above */

.rw-pricing .rw-enterprise {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head  cta"
		"tiles tiles";
	column-gap: 32px;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 0;
	padding: 48px;
	color: #fff;
}

.rw-pricing .rw-enterprise::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: -40px calc(50% - 50vw) -80px;
	background: var(--rw-sand);
}

.rw-pricing .rw-enterprise::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--rw-ink);
	border: 1px solid var(--rw-line);
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .02);
}

.rw-pricing .rw-enterprise__head {
	grid-area: head;
}

.rw-pricing .rw-enterprise__title {
	margin: 0 0 8px;
	font-family: var(--rw-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: -0.03em;
	color: #fff;
}

.rw-pricing .rw-enterprise__text {
	margin: 0;
	font-size: 20px;
	line-height: 32px;
	color: var(--rw-muted);
}

.rw-pricing .rw-enterprise__cta {
	grid-area: cta;
	white-space: nowrap;
}

.rw-pricing .rw-enterprise__tiles {
	grid-area: tiles;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.rw-pricing .rw-enterprise__tile {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 32px;
	background: var(--rw-sand);
	border-radius: 12px;
	color: var(--rw-ink);
}

.rw-pricing .rw-enterprise__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	padding: 10px;
	background: var(--rw-ink);
	border-radius: 8px;
	color: var(--rw-accent);
}

.rw-pricing .rw-enterprise__icon svg {
	width: 28px;
	height: 28px;
}

.rw-pricing .rw-enterprise__tile-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
}

.rw-pricing .rw-enterprise__tile-text {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	color: var(--rw-body);
}

/* the sand behind the banner extends 80px below it (::before), so the section
   needs matching space after its last child */
.rw-pricing > [data-rw-panel] > .rw-enterprise {
	margin-bottom: 80px;
}

/* ---------- tiers modal ---------- */

.rw-pricing .rw-modal {
	width: min(560px, calc(100vw - 40px));
	max-height: 80vh;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: var(--rw-ink);
	font-family: var(--rw-text);
}

.rw-pricing .rw-modal::backdrop {
	background: rgba(2, 9, 23, .6);
}

.rw-pricing .rw-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--rw-line);
}

.rw-pricing .rw-modal__head h4 {
	margin: 0;
	font-family: var(--rw-display);
	font-size: 22px;
	font-weight: 400;
}

.rw-pricing .rw-modal__close {
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--rw-dim);
	cursor: pointer;
}

.rw-pricing .rw-tiers {
	width: 100%;
	border-collapse: collapse;
}

.rw-pricing .rw-tiers th,
.rw-pricing .rw-tiers td {
	padding: 12px 24px;
	border-bottom: 1px solid var(--rw-line);
	text-align: left;
	font-size: 15px;
	line-height: 22px;
}

.rw-pricing .rw-tiers thead th {
	background: var(--rw-row-alt);
	font-family: var(--rw-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.rw-pricing .rw-tiers tbody th {
	font-weight: 500;
}

/* ---------- small screens ---------- */

@media (max-width: 767px) {
	.rw-pricing .rw-pricing__step--plan {
		margin-top: 48px;
	}

	.rw-pricing .rw-pricing__controls {
		flex-wrap: wrap;
	}

	.rw-pricing .rw-plans {
		row-gap: 24px;
	}

	.rw-pricing .rw-plan {
		display: block;
		padding: 32px 24px;
	}

	.rw-pricing .rw-plan__name {
		font-size: 36px;
		line-height: 42px;
	}

	.rw-pricing .rw-compare {
		padding-top: 48px;
	}

	/* as in the client's draft: the table keeps 720px and scrolls sideways */
	.rw-pricing .rw-table thead th:first-child {
		width: 28%;
	}

	.rw-pricing .rw-enterprise {
		grid-template-columns: 1fr;
		grid-template-areas: "head" "cta" "tiles";
		padding: 32px 24px;
	}

	.rw-pricing .rw-enterprise__cta {
		justify-self: start;
		margin-top: 24px;
	}
}