/* Gon Pricing Manager — Frontend Styles */
:root {
	/* Heading / title font */
	--gon-font-heading: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Brand palette */
	--gon-blue: #0d5cab;
	--gon-navy: #071d49;
	--gon-navy-2: #233457;
	--gon-body: #5d6785;
	--gon-gold: #d99519;
	--gon-gold-start: #f1b43b;
	--gon-gold-end: #d99519;
	--gon-gold-hover-s: #f6c051;
	--gon-gold-hover-e: #cf911a;
	--gon-gold-accent: #e4a423;
	--gon-gold-light: #efd39b;
	--gon-gold-light-h: #e4bf6c;
	--gon-gold-icon-bg: rgba(228, 164, 35, .14);
	--gon-off-white: #fdf8ef;
	--gon-off-white-h: #fffaf2;
	--gon-light-blue: #f5f8ff;
	--gon-white: #fff;
	/* Card border gradient */
	--gon-border-grad: linear-gradient(160deg, rgba(13, 92, 171, .35) 0%, rgba(228, 164, 35, .38) 50%, rgba(7, 29, 73, .1) 100%);
	--gon-card-shadow-h: 0 8px 30px rgba(7, 29, 73, .14);
}

/* ── Table Wrapper ── */
.gon-pricing-table {
	text-align: center;
}

.gon-table--align-left {
	text-align: left;
}

.gon-table--align-right {
	text-align: right;
}

.gon-table--align-center {
	text-align: center;
}

.gon-table__header {
	margin-bottom: 32px;
}

.gon-table__title {
	font-family: var(--gon-font-heading);
	font-size: 32px;
	font-weight: 700;
	color: var(--gon-navy);
	margin: 0 0 12px;
}

.gon-table__desc {
	font-size: 16px;
	color: var(--gon-body);
	margin: 0;
}

/* ── Tab Switcher ── */
.gon-tab-switcher {
	position: relative;
	display: grid;
	width: fit-content;
	max-width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--gon-light-blue);
	border-radius: 999px;
	padding: 4px;
	gap: 0;
	margin: 0 auto 40px;
	/* centered by default */
	border: 1px solid rgba(7, 29, 73, .08);
	overflow: hidden;
}

/* Tab switcher follows the table's alignment (Left / Center / Right) */
.gon-table--align-left .gon-tab-switcher {
	margin-left: 0;
	margin-right: auto;
}

.gon-table--align-center .gon-tab-switcher {
	margin-left: auto;
	margin-right: auto;
}

.gon-table--align-right .gon-tab-switcher {
	margin-left: auto;
	margin-right: 0;
}

/* Sliding gold pill behind the active tab */
.gon-tab-switcher::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: #d99519;
	background-image: linear-gradient(180deg, #f1b43b 0%, #d99519 100%);
	box-shadow: 0 2px 6px rgba(217, 149, 25, .3);
	transform: translateX(0);
	transition: transform 200ms ease;
	z-index: 0;
	pointer-events: none;
}

.gon-tab-switcher[data-active-tab="annual"]::before {
	transform: translateX(100%);
}

/* Tab buttons — force transparent so the theme can't paint them */
.gon-tab-switcher .gon-tab, .gon-tab-switcher button.gon-tab, .gon-tab-switcher .gon-tab:hover, .gon-tab-switcher .gon-tab:focus, .gon-tab-switcher .gon-tab:active {
	position: relative;
	z-index: 1;
	padding: 9px 24px !important;
	border-radius: 999px !important;
	border: none !important;
	outline: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	letter-spacing: .03em;
	transition: color 200ms ease !important;
}

.gon-tab-switcher .gon-tab.nitro-lazy, .gon-tab-switcher button.gon-tab.nitro-lazy, .gon-tab-switcher .gon-tab:hover.nitro-lazy, .gon-tab-switcher .gon-tab:focus.nitro-lazy, .gon-tab-switcher .gon-tab:active.nitro-lazy {
	background-image: none !important;
}

/* Inactive tab text */
.gon-tab-switcher .gon-tab, .gon-tab-switcher .gon-tab:link, .gon-tab-switcher .gon-tab:visited {
	color: var(--gon-body) !important;
	-webkit-text-fill-color: var(--gon-body) !important;
}

.gon-tab-switcher .gon-tab:hover {
	color: var(--gon-navy) !important;
	-webkit-text-fill-color: var(--gon-navy) !important;
}

/* Active tab text — white, sits on the gold pill */
.gon-tab-switcher .gon-tab.gon-tab--active, .gon-tab-switcher .gon-tab--active:hover, .gon-tab-switcher .gon-tab--active:focus {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* ── Cards Grid ── */
.gon-cards-grid {
	display: grid;
	gap: clamp(14px, 1.4vw, 24px);
	/* tightens up so 4 columns fit smaller laptops */
	align-items: stretch;
	padding-top: 18px;
}

.gon-cards-grid--1col {
	grid-template-columns: 1fr;
}

.gon-cards-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

.gon-cards-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.gon-cards-grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

/* ── Tab Panels ── */
.gon-tab-panel {
	display: none;
}

.gon-tab-panel--active {
	display: contents;
}

/* ── Card ── */
.gon-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* allow grid tracks to shrink so all 4 columns fit */
	background: linear-gradient(var(--gon-white), var(--gon-white)) padding-box, var(--gon-border-grad) border-box;
	border: 1px solid transparent;
	border-radius: 22px;
	padding: clamp(20px, 1.8vw, 30px) clamp(14px, 1.6vw, 28px);
	/* fluid: comfortable at 4-up; tighter min side padding gives variant tabs room to fit one row */
	position: relative;
	text-align: left;
	box-shadow: 0 4px 18px rgba(7, 29, 73, .06);
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.gon-card:hover {
	box-shadow: 0 14px 40px rgba(7, 29, 73, .14);
	transform: translateY(-4px);
}

/* Highlighted = stronger gradient border + lift, NO inner background fill */
.gon-card--highlighted {
	border: 2px solid transparent;
	box-shadow: 0 0 0 4px rgba(13, 92, 171, .07), 0 16px 44px rgba(7, 29, 73, .14);
}

.gon-card--highlighted:hover {
	box-shadow: 0 0 0 4px rgba(13, 92, 171, .12), 0 20px 50px rgba(7, 29, 73, .18);
}

/* ── Card Header ── */
.gon-card__header {
	margin-bottom: 0;
}

.gon-card__title {
	font-family: var(--gon-font-heading);
	font-size: 21px;
	font-weight: 800;
	color: var(--gon-navy);
	margin: 0;
	letter-spacing: .01em;
}

.gon-card__subtitle {
	font-size: 14px;
	color: var(--gon-body);
	margin: 6px 0 0;
	line-height: 1.5;
}

/* min-height keeps the price + CTA aligned across columns regardless of copy length */
.gon-card__desc {
	font-size: 14px;
	color: var(--gon-body);
	margin: 12px 0 0;
	line-height: 1.6;
	min-height: 67px;
}

/* ── Card Pricing ── */
.gon-card__pricing {
	margin: 22px 0 26px;
}

.gon-card__original-price {
	font-family: var(--gon-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: #e23838;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	margin-bottom: 4px;
}

/* Empty placeholder: hidden on a single card, but reserves the strikethrough line
   inside a pricing table so every main price lines up across the row. */
.gon-card__original-price--placeholder {
	display: none;
	text-decoration: none;
}

.gon-cards-grid .gon-card__original-price--placeholder {
	display: block;
	visibility: hidden;
}

.gon-card__price {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.gon-card__currency {
	font-family: var(--gon-font-heading);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 700;
	color: var(--gon-blue);
	padding-top: 6px;
}

.gon-card__amount {
	font-family: var(--gon-font-heading);
	font-size: clamp(38px, 3.4vw, 52px);
	font-weight: 800;
	color: var(--gon-blue);
	line-height: 1;
}

.gon-card__discount-label {
	display: inline-block;
	background: var(--gon-off-white);
	color: var(--gon-gold);
	border: 1px solid var(--gon-gold-light);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
	margin-top: 6px;
	letter-spacing: .02em;
}

.gon-card__price-desc {
	font-size: 16px;
	font-weight: 500;
	color: var(--gon-body);
	margin: 8px 0 0;
}

/* ── Sub Details (after pricing, before CTA) — no inner background ── */
.gon-card__sub-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	background: none;
	border: none;
}

/* Empty block collapses on a single card, but keeps its space inside a table
   (JS equalizes the height) so buttons stay aligned across columns. */
.gon-card__sub-details--empty {
	margin-bottom: 0;
}

.gon-cards-grid .gon-card__sub-details--empty {
	margin-bottom: 24px;
}

.gon-sub-detail + .gon-sub-detail {
	border-top: 1px solid rgba(7, 29, 73, .07);
	padding-top: 12px;
}

.gon-sub-detail__title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gon-blue);
	margin: 0 0 3px;
}

.gon-sub-detail__desc {
	font-size: 14px;
	color: var(--gon-body);
	margin: 0;
	line-height: 1.6;
}

/* ── Buttons ──
 * Scoped to .gon-card so it applies to BOTH standalone cards
 * ([gon_pricing_card]) and cards inside a .gon-pricing-table.
 * Heavy specificity + !important to beat theme link styles.
 */
.gon-card a.gon-btn, .gon-card a.gon-btn:link, .gon-card a.gon-btn:visited, .gon-card a.gon-btn:hover, .gon-card a.gon-btn:focus, .gon-card a.gon-btn:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	text-align: center !important;
	padding: 16px 28px !important;
	min-height: 60px !important;
	border-radius: 12px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	cursor: pointer !important;
	transition: background-color 180ms ease, background-image 180ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease !important;
	border: 2px solid transparent !important;
	line-height: 1.2 !important;
	letter-spacing: .01em !important;
	box-sizing: border-box !important;
}

/* Primary — gold gradient, white text */
.gon-card a.gon-btn.gon-btn--primary, .gon-card a.gon-btn.gon-btn--primary:link, .gon-card a.gon-btn.gon-btn--primary:visited {
	background: #d99519 !important;
	background-image: linear-gradient(180deg, #f1b43b 0%, #d99519 100%) !important;
	background-color: #d99519 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 10px 24px rgba(217, 149, 25, .24), inset 0 -2px 0 rgba(0, 0, 0, .1) !important;
}

/* Primary hover — black gradient, white text */
.gon-card a.gon-btn.gon-btn--primary:hover, .gon-card a.gon-btn.gon-btn--primary:focus, .gon-card a.gon-btn.gon-btn--primary:active, .gon-card a.gon-btn.gon-btn--primary:visited:hover {
	background: #111 !important;
	background-image: linear-gradient(180deg, #2a2a2a 0%, #000 100%) !important;
	background-color: #111 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .28), inset 0 -2px 0 rgba(255, 255, 255, .06) !important;
	transform: translateY(-1px) !important;
}

/* Secondary — off-white / gold */
.gon-card a.gon-btn.gon-btn--secondary, .gon-card a.gon-btn.gon-btn--secondary:link, .gon-card a.gon-btn.gon-btn--secondary:visited {
	background: #fdf8ef !important;
	background-image: none !important;
	background-color: #fdf8ef !important;
	color: #d99a18 !important;
	-webkit-text-fill-color: #d99a18 !important;
	border-color: #efd39b !important;
	box-shadow: none !important;
}

.gon-card a.gon-btn.gon-btn--secondary.nitro-lazy, .gon-card a.gon-btn.gon-btn--secondary:link.nitro-lazy, .gon-card a.gon-btn.gon-btn--secondary:visited.nitro-lazy {
	background-image: none !important;
}

.gon-card a.gon-btn.gon-btn--secondary:hover, .gon-card a.gon-btn.gon-btn--secondary:focus, .gon-card a.gon-btn.gon-btn--secondary:active {
	background: #fffaf2 !important;
	background-color: #fffaf2 !important;
	border-color: #e4bf6c !important;
	color: #d99a18 !important;
	-webkit-text-fill-color: #d99a18 !important;
}

/* Outline — navy */
.gon-card a.gon-btn.gon-btn--outline, .gon-card a.gon-btn.gon-btn--outline:link, .gon-card a.gon-btn.gon-btn--outline:visited {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	color: #071d49 !important;
	-webkit-text-fill-color: #071d49 !important;
	border-color: rgba(7, 29, 73, .25) !important;
	box-shadow: none !important;
}

.gon-card a.gon-btn.gon-btn--outline.nitro-lazy, .gon-card a.gon-btn.gon-btn--outline:link.nitro-lazy, .gon-card a.gon-btn.gon-btn--outline:visited.nitro-lazy {
	background-image: none !important;
}

.gon-card a.gon-btn.gon-btn--outline:hover, .gon-card a.gon-btn.gon-btn--outline:focus, .gon-card a.gon-btn.gon-btn--outline:active {
	background: #f5f8ff !important;
	background-color: #f5f8ff !important;
	border-color: #0d5cab !important;
	color: #0d5cab !important;
	-webkit-text-fill-color: #0d5cab !important;
}

.gon-card__btn {
	margin-bottom: 24px !important;
}

/* ── Features ──
 * No margin-top:auto — keeps the CTA button aligned across columns.
 * Features flow directly under the button; the card's flex column lets
 * shorter cards simply end sooner (extra space sits at the bottom).
 */
.gon-card__features {
	margin-top: 4px;
	border-top: 1px solid rgba(7, 29, 73, .08);
	padding-top: 22px;
}

.gon-card__features-title {
	font-family: var(--gon-font-heading);
	font-size: 13px;
	font-weight: 800;
	color: var(--gon-navy-2);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 16px;
}

.gon-card__features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gon-feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--gon-navy-2);
	line-height: 1.45;
}

.gon-feature__text {
	display: block;
	flex: 1;
}

.gon-feature__subitems {
	list-style: circle;
	margin: 8px 0 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.gon-feature__subitem {
	font-size: 14px;
	font-weight: 400;
	color: var(--gon-body);
	line-height: 1.5;
}

.gon-feature__subitem::marker {
	color: var(--gon-body);
}

.gon-feature__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-top: 1px;
}

.gon-card__features-footer {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gon-body);
}

.gon-feature--check .gon-feature__icon {
	background: #f8f1e3;
	color: var(--gon-blue);
}

.gon-feature--cross .gon-feature__icon {
	background: #fef2f2;
	color: #ef4444;
}

.gon-feature--dash .gon-feature__icon {
	background: rgba(7, 29, 73, .06);
	color: var(--gon-body);
	font-size: 12px;
}

/* ── Pill (inline label inside the card, outlined, no fill) ── */
.gon-card__pill {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0 0 18px;
	padding: 10px 16px;
	background: none;
	border: 1px solid var(--gon-gold-light);
	border-radius: 999px;
	color: var(--gon-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	box-sizing: border-box;
}

.gon-card__pill::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gon-gold-accent);
}

/* ── Badge (corner ribbon / tag / pill) ──
 * Color is driven by CSS vars so every style shares the same palette.
 */
.gon-badge--gold {
	--bdg-a: #f1b43b;
	--bdg-b: #d99519;
	--bdg-sh: rgba(217, 149, 25, .35);
}

.gon-badge--blue {
	--bdg-a: #3f93dd;
	--bdg-b: #0d5cab;
	--bdg-sh: rgba(13, 92, 171, .35);
}

.gon-badge--green {
	--bdg-a: #13c08a;
	--bdg-b: #059669;
	--bdg-sh: rgba(5, 150, 105, .35);
}

.gon-badge--navy {
	--bdg-a: #33476e;
	--bdg-b: #071d49;
	--bdg-sh: rgba(7, 29, 73, .35);
}

.gon-card__badge {
	position: absolute;
	z-index: 3;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.1;
}

/* Floating pill — hovers over the top edge */
.gon-card__badge--pill {
	top: -16px;
	display: inline-flex;
	align-items: center;
	padding: 9px 22px;
	font-size: 13px;
	letter-spacing: .07em;
	border-radius: 999px;
	background-image: linear-gradient(135deg, var(--bdg-a), var(--bdg-b));
	box-shadow: 0 5px 14px var(--bdg-sh);
}

.gon-card__badge--pill.gon-card__badge--top-right {
	right: 22px;
	left: auto;
	transform: none;
}

.gon-card__badge--pill.gon-card__badge--top-center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* Diagonal ribbon — angles across the top-left corner (needs .gon-card--clip) */
.gon-card__badge--ribbon {
	top: 20px;
	left: -56px;
	width: 184px;
	padding: 7px 0;
	text-align: center;
	transform: rotate(-45deg);
	background-image: linear-gradient(135deg, var(--bdg-a), var(--bdg-b));
	box-shadow: 0 4px 10px var(--bdg-sh);
}

/* Corner tag — fills the top-right corner (needs .gon-card--clip) */
.gon-card__badge--corner {
	top: 0;
	right: 0;
	padding: 9px 16px 11px;
	background-image: linear-gradient(135deg, var(--bdg-a), var(--bdg-b));
	border-bottom-left-radius: 14px;
	box-shadow: -3px 4px 12px var(--bdg-sh);
}

/* Clip card content so ribbon/corner badges respect the rounded corners */
.gon-card--clip {
	overflow: hidden;
}

/* ── Variant Tabs (merged cards inside one card) ── */

/* The plan name (container title) leads; each variant's own title is hidden so it
   doesn't compete with the plan name. */
.gon-card__variant .gon-card__header {
	display: none !important;
}

/* Secondary sub-option toggle — sits just under the plan name. Individual pills,
   compact so they read as options (not plan names). !important beats theme buttons. */
.gon-card__variant-tabs {
	display: flex;
	align-self: flex-start;
	width: 100%;
	max-width: 100%;
	gap: 5px;
	background: none;
	padding: 0;
	margin: 14px 0 22px;
	flex-wrap: nowrap;
}

.gon-card .gon-variant-tab {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	/* allow shrinking below content width */
	text-align: center;
	white-space: nowrap;
	/* one line, never wraps, never truncates */
	border: 1.5px solid rgba(7, 29, 73, .15) !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--gon-body) !important;
	-webkit-text-fill-color: var(--gon-body) !important;
	padding: 7px 10px !important;
	border-radius: 999px !important;
	font-family: var(--gon-font-heading);
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background-color 160ms ease, background-image 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.gon-card .gon-variant-tab.nitro-lazy {
	background-image: none !important;
}

.gon-card .gon-variant-tab:hover {
	border-color: var(--gon-gold) !important;
	color: var(--gon-navy) !important;
	-webkit-text-fill-color: var(--gon-navy) !important;
}

/* Active = gold pill, switches on click */
.gon-card .gon-variant-tab--active, .gon-card .gon-variant-tab--active:hover {
	background: #d99519 !important;
	background-image: linear-gradient(135deg, #f1b43b 0%, #d99519 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 3px 8px rgba(217, 149, 25, .3) !important;
}

/* Premium tooltip — shows the option's plan title on hover/focus.
   Pure CSS (::after bubble + ::before arrow), no layout impact. */
.gon-card .gon-variant-tab[data-tip]::after, .gon-card .gon-variant-tab[data-tip]::before {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
	pointer-events: none;
	z-index: 30;
}

.gon-card .gon-variant-tab[data-tip]::after {
	content: attr(data-tip);
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 7px 12px;
	border-radius: 9px;
	background: linear-gradient(135deg, #0f2a5e 0%, #071d49 100%);
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-family: var(--gon-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	box-shadow: 0 8px 24px rgba(7, 29, 73, .28), 0 2px 6px rgba(7, 29, 73, .18);
}

.gon-card .gon-variant-tab[data-tip]::before {
	content: "";
	bottom: calc(100% + 4px);
	width: 9px;
	height: 9px;
	background: #071d49;
	transform: translateX(-50%) translateY(4px) rotate(45deg);
	border-radius: 2px;
}

.gon-card .gon-variant-tab[data-tip]:hover::after, .gon-card .gon-variant-tab[data-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.gon-card .gon-variant-tab[data-tip]:hover::before, .gon-card .gon-variant-tab[data-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* Stack variants in one grid cell so the card stays as tall as the tallest variant —
   switching Starter/Starter+ swaps which one shows without resizing the card or row.
   Uses opacity (not visibility) so the price-tab visibility rules can't reveal a
   hidden variant's price underneath. */
.gon-card__variants {
	display: grid;
	flex: 1;
}

.gon-card__variant {
	grid-area: 1/1;
	opacity: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gon-card__variant--active {
	opacity: 1;
	pointer-events: auto;
}

/* Strip the inner card's frame so the variant sits seamlessly inside the container */
.gon-card__variant > .gon-card {
	flex: 1;
	min-width: 0;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

/* Keep long feature / detail text inside the card instead of forcing overflow */
.gon-card__variants, .gon-card__variant {
	min-width: 0;
}

.gon-feature__text, .gon-sub-detail__desc, .gon-card__desc {
	overflow-wrap: break-word;
	word-wrap: break-word;
	min-width: 0;
}

.gon-card__variant > .gon-card:hover {
	transform: none !important;
	box-shadow: none !important;
}

.gon-card__variant > .gon-card .gon-card__badge, .gon-card__variant > .gon-card .gon-card__pill {
	display: none !important;
}

/* ── Feature Groups (multiple sections per card) ── */
.gon-card__features-group + .gon-card__features-group {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(7, 29, 73, .06);
}

/* ── Dual Billing (Monthly + Annual) Price Tabs ──
   Both tabs are stacked in one grid cell so the pricing block is always as tall as
   the taller tab. Switching only toggles visibility — nothing moves up/down. */
.gon-card__pricing:has(.gon-price-tab) {
	display: grid;
}

.gon-card__pricing:has(.gon-price-tab) > .gon-price-tab {
	grid-area: 1/1;
}

.gon-price-tab {
	visibility: hidden;
}

.gon-card .gon-price-tab--monthly {
	visibility: visible;
}

.gon-billing-grid .gon-card .gon-price-tab--monthly, .gon-billing-grid .gon-card .gon-price-tab--annual {
	visibility: hidden;
}

.gon-billing-grid.gon-billing--monthly .gon-card .gon-price-tab--monthly {
	visibility: visible;
}

.gon-billing-grid.gon-billing--annual .gon-card .gon-price-tab--annual {
	visibility: visible;
}

/* ── Checkout Overlay (popup-based — works with Stripe) ── */

/*
 * Stripe blocks iframe embedding (X-Frame-Options / CSP).
 * We open checkout in a centred popup window and show this overlay
 * on the parent page so the experience still feels modal.
 */
.gon-checkout-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	background: rgba(7, 29, 73, .52);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 20px;
}

.gon-checkout-overlay--open {
	display: flex;
	animation: gonOverlayIn 220ms ease both;
}

@keyframes gonOverlayIn {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

/* Centre card */
.gon-checkout-overlay__card {
	background: var(--gon-white);
	border-radius: 20px;
	box-shadow: 0 0 0 1px rgba(7, 29, 73, .08), 0 24px 64px rgba(7, 29, 73, .28);
	padding: 48px 40px 40px;
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	animation: gonCardIn 260ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes gonCardIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(.97);
	}
	
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Lock icon */
.gon-checkout-overlay__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--gon-gold-icon-bg);
	color: var(--gon-gold-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	flex-shrink: 0;
}

/* Text */
.gon-checkout-overlay__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--gon-navy);
	margin: 0 0 8px;
	line-height: 1.3;
}

.gon-checkout-overlay__desc {
	font-size: 14px;
	color: var(--gon-body);
	margin: 0;
	line-height: 1.65;
}

/* Animated dots spinner */
.gon-checkout-overlay__spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 28px 0 24px;
}

.gon-checkout-overlay__spinner span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gon-gold-accent);
	animation: gonDot 1.2s ease-in-out infinite;
}

.gon-checkout-overlay__spinner span:nth-child(1) {
	animation-delay: 0s;
}

.gon-checkout-overlay__spinner span:nth-child(2) {
	animation-delay: .2s;
}

.gon-checkout-overlay__spinner span:nth-child(3) {
	animation-delay: .4s;
}

@keyframes gonDot {
	0%, 80%, 100% {
		transform: scale(.6);
		opacity: .35;
	}
	
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Cancel button */
.gon-checkout-overlay__cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	border-radius: 8px;
	border: 1.5px solid rgba(7, 29, 73, .18);
	background: transparent;
	color: var(--gon-navy-2);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 150ms ease;
	font-family: inherit;
}

.gon-checkout-overlay__cancel:hover {
	background: var(--gon-light-blue);
	border-color: var(--gon-blue);
	color: var(--gon-blue);
}

/* ── Responsive ── */

/* Desktop / laptop (≥1000px): the configured columns, up to 4 — keeps MacBook Pro
   and smaller laptops at 4-across. The table fills its parent container instead of
   breaking out to the full viewport, so it fits correctly inside inner/constrained
   containers (e.g. a page-builder column) without overlapping its bounds. */
@media (min-width: 1000px) {
	.gon-pricing-table--4col {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* Tablet (768–999px): 2 columns */
@media (min-width: 768px) and (max-width: 999px) {
	.gon-cards-grid--2col, .gon-cards-grid--3col, .gon-cards-grid--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile (≤767px): 1 column */
@media (max-width: 767px) {
	.gon-cards-grid--1col, .gon-cards-grid--2col, .gon-cards-grid--3col, .gon-cards-grid--4col {
		grid-template-columns: 1fr;
	}
	
	.gon-card {
		padding: 24px;
	}
	
	.gon-card__amount {
		font-size: 44px;
	}
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	.gon-card, .gon-btn, .gon-tab {
		transition: none;
	}
	
	.gon-card:hover, .gon-btn--primary:hover {
		transform: none;
	}
}