/*!
 * Auralink - Marketing Shortcodes (CSS)
 *
 * Scoped under .auralink-marketing-* so it can sit cleanly inside any theme
 * (Bricks, Elementor, Gutenberg). Designed to inherit the host page's font
 * stack and adapt to dark backgrounds via CSS custom properties.
 *
 * Override the look from your theme by setting any of these on a parent:
 *   --al-mkt-accent       (default: #5b6cff)
 *   --al-mkt-accent-ink   (default: #fff)
 *   --al-mkt-fg           (default: inherit)
 *   --al-mkt-muted        (default: rgba(0,0,0,0.55))
 *   --al-mkt-card-bg      (default: rgba(255,255,255,0.06))
 *   --al-mkt-card-border  (default: rgba(0,0,0,0.08))
 *   --al-mkt-radius       (default: 14px)
 */

:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim,.auralink-marketing-featured,.auralink-marketing-stat){line-height:1.6;text-rendering:optimizeLegibility}
:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim,.auralink-marketing-featured,.auralink-marketing-stat) :where(p,li,small,label){max-width:68ch;letter-spacing:.006em;overflow-wrap:break-word}
:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){min-height:48px;font-size:16px;line-height:1.5}
:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim) :where(button,.button,a[role="button"],input[type="submit"]){min-height:44px}
:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim) :where(a,button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--al-mkt-accent,#7c2cff) 48%,transparent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim),:where(.auralink-marketing-pricing,.auralink-marketing-pricing-shell,.auralink-marketing-claim) *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

:where(.auralink-marketing-pricing,
       .auralink-marketing-pricing-shell,
       .auralink-marketing-currency,
       .auralink-marketing-auth-btn,
       .auralink-marketing-claim,
       .auralink-marketing-stat,
       .auralink-marketing-featured,
       .auralink-marketing-price) {
	/* Brand accents */
	--al-mkt-accent:          #7c2cff;
	--al-mkt-accent-2:        #8b5cf6;
	--al-mkt-accent-ink:      #ffffff;
	/* 2.56.192 - brand CTA grammar (matches the dashboard's primary button):
	   lime at rest, purple on hover. Only the primary action button uses
	   these; --al-mkt-accent above stays the general accent everywhere else. */
	--al-mkt-cta-bg:          #d7ff44;
	--al-mkt-cta-ink:         #101319;
	/* Foreground / text */
	--al-mkt-fg:              #f5f7fb;
	--al-mkt-fg-soft:         #d5dae8;
	--al-mkt-muted:           rgba(184, 192, 212, 0.85);
	/* Surfaces */
	--al-mkt-card-bg:         #121520;
	--al-mkt-card-bg-hi:      #1a1f33;
	--al-mkt-card-border:     rgba(255, 255, 255, 0.08);
	--al-mkt-card-border-hi:  rgba(108, 114, 255, 0.55);
	/* Sale state */
	--al-mkt-sale-from:       #f97316;
	--al-mkt-sale-to:         #ef4444;
	--al-mkt-sale-shadow:     rgba(239, 68, 68, 0.42);
	--al-mkt-strike:          rgba(184, 192, 212, 0.55);
	/* Geometry */
	--al-mkt-radius:          14px;
	--al-mkt-shadow:          0 8px 28px rgba(0, 0, 0, 0.40);
	box-sizing: border-box;
}

.auralink-marketing-pricing *,
.auralink-marketing-pricing-shell *,
.auralink-marketing-currency *,
.auralink-marketing-claim *,
.auralink-marketing-featured *,
.auralink-marketing-stat *,
.auralink-marketing-price *,
.auralink-marketing-auth-btn * { box-sizing: border-box; }

/* ── [auralink_price] ─────────────────────────────────────────────── */
.auralink-marketing-price {
	font-variant-numeric: tabular-nums;
}
.auralink-marketing-price--on-sale {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.auralink-marketing-price__original {
	color: var(--al-mkt-strike);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	font-weight: 600;
	opacity: 0.85;
}
.auralink-marketing-price__sale {
	color: #a5b3ff;
	font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────
   [auralink_pricing_table] - high-impact dark
   Card grid, popular-card hero treatment, sale states, smart CTAs.
   ───────────────────────────────────────────────────────────────────── */
.auralink-marketing-pricing-shell {
	display: grid;
	gap: 18px;
	width: 100%;
}

.auralink-marketing-currency {
	display: grid;
	grid-template-columns: auto minmax(140px, 190px);
	align-items: center;
	justify-content: end;
	gap: 6px 12px;
	width: 100%;
	/* It sits on light and dark pages alike: everything follows the text colour around it. */
	color: inherit;
	font-family: inherit;
}

.auralink-marketing-currency label {
	margin: 0;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.auralink-marketing-currency select {
	width: 100%;
	min-height: 44px;
	padding: 8px 40px 8px 16px;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 5%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
	color: inherit;
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.25;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.auralink-marketing-currency select option {
	color: #16131a;
	background: #fff;
}

.auralink-marketing-currency select:focus-visible {
	border-color: var(--al-mkt-accent);
	outline: 3px solid color-mix(in srgb, var(--al-mkt-accent) 25%, transparent);
	outline-offset: 2px;
}

.auralink-marketing-currency small {
	grid-column: 1 / -1;
	justify-self: end;
	max-width: 44ch;
	margin: 0;
	color: color-mix(in srgb, currentColor 66%, transparent);
	font-size: 13px;
	line-height: 1.4;
	text-align: right;
}

.auralink-marketing-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	width: 100%;
}

@media (max-width: 540px) {
	.auralink-marketing-currency {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.auralink-marketing-currency small {
		grid-column: auto;
		justify-self: start;
		text-align: left;
	}
}

.auralink-marketing-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: var(--al-mkt-card-bg);
	border: 1px solid var(--al-mkt-card-border);
	border-radius: 22px;
	padding: 36px 30px;
	color: var(--al-mkt-fg);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	overflow: visible;
}
.auralink-marketing-pricing__card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 0%, rgba(108,114,255,.10), transparent 60%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}
.auralink-marketing-pricing__card:hover::before { opacity: 1; }
.auralink-marketing-pricing__card:hover {
	transform: translateY(-4px);
	border-color: rgba(108, 114, 255, 0.30);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Popular card - the hero. Selector spelled out in full so no autolinker
 * mangling can break it (this rule was previously dropped by browsers
 * because earlier paste-cycles corrupted `__card.is-popular` into
 * `__[card.is](url)-popular`, which is invalid CSS). */
.auralink-marketing-pricing__card.is-popular {
	background:
		radial-gradient(ellipse 540px 380px at 50% -10%, rgba(108,114,255,.28), transparent 65%),
		linear-gradient(180deg, var(--al-mkt-card-bg-hi) 0%, #14172a 100%);
	border: 1.5px solid var(--al-mkt-card-border-hi);
	box-shadow:
		0 0 0 1px rgba(108, 114, 255, 0.20),
		0 28px 70px rgba(108, 114, 255, 0.28),
		0 12px 32px rgba(0, 0, 0, 0.45);
	transform: translateY(-8px) scale(1.02);
}
.auralink-marketing-pricing__card.is-popular:hover {
	transform: translateY(-12px) scale(1.02);
	box-shadow:
		0 0 0 1px rgba(108, 114, 255, 0.30),
		0 36px 80px rgba(108, 114, 255, 0.36),
		0 14px 36px rgba(0, 0, 0, 0.50);
}

/* On-sale card - subtle red border tint reads as urgency without screaming.
 * Popular wins when both apply (popular's purple border takes precedence). */
.auralink-marketing-pricing__card.is-on-sale {
	border-color: rgba(239, 68, 68, 0.22);
}
.auralink-marketing-pricing__card.is-on-sale.is-popular {
	border-color: var(--al-mkt-card-border-hi);
}

/* Pills wrapper - absolutely positioned above the top edge of the card.
 * Flex row so "Most popular" + "Save 50%" sit side-by-side instead of
 * overlapping. Wraps to a stack on narrow cards. */
.auralink-marketing-pricing__pills {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 96%;
	z-index: 2;
	pointer-events: none;
}
.auralink-marketing-pricing__pills > * { pointer-events: auto; }

/* Default pill - "Most popular" gradient */
.auralink-marketing-pricing__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--al-mkt-accent), var(--al-mkt-accent-2));
	color: var(--al-mkt-accent-ink);
	border: 0;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(108, 114, 255, 0.40);
	margin: 0;
	white-space: nowrap;
}

/* "Your plan" pill - passive, neutral */
.auralink-marketing-pricing__pill--current {
	background: rgba(255, 255, 255, 0.08);
	color: var(--al-mkt-muted);
	box-shadow: none;
}

/* "Save X%" pill - distinct red/orange so it reads as a separate piece
 * of info from "Most popular" when both pills are visible. */
.auralink-marketing-pricing__pill--sale {
	background: linear-gradient(135deg, var(--al-mkt-sale-from), var(--al-mkt-sale-to));
	color: #fff;
	box-shadow: 0 6px 18px var(--al-mkt-sale-shadow);
}

.auralink-marketing-pricing__card.is-current {
	outline: 1px solid var(--al-mkt-accent);
	outline-offset: -1px;
}

/* Plan name */
.auralink-marketing-pricing__name {
	color: var(--al-mkt-fg);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 8px;
	opacity: 0.78;
}

/* Price block (regular) */
.auralink-marketing-pricing__price {
	color: var(--al-mkt-fg);
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	margin: 0 0 28px;
}

/* Price block (on sale) - strikethrough original on top, sale price below */
.auralink-marketing-pricing__price--on-sale {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0 0 28px;
}
.auralink-marketing-pricing__price-original {
	font-size: 22px;
	font-weight: 600;
	color: var(--al-mkt-strike);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	line-height: 1;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}
.auralink-marketing-pricing__price-sale {
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--al-mkt-fg);
	font-variant-numeric: tabular-nums;
}

/* Popular card prices - gradient text, but ONLY on the regular price.
 * Sale price keeps a flat fill because text-decoration: line-through
 * inherits a gradient and almost disappears against it. */
.auralink-marketing-pricing__card.is-popular .auralink-marketing-pricing__price:not(.auralink-marketing-pricing__price--on-sale) {
	background: linear-gradient(135deg, #ffffff, #c7cbff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.auralink-marketing-pricing__positioning {
	display: grid;
	gap: 5px;
	margin: -12px 0 22px;
	color: var(--al-mkt-fg-soft);
}
.auralink-marketing-pricing__positioning strong {
	color: var(--al-mkt-fg);
	font-size: 16px;
	line-height: 1.25;
}
.auralink-marketing-pricing__positioning span {
	font-size: 13.5px;
	line-height: 1.5;
}

/* Feature list */
.auralink-marketing-pricing__features {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.auralink-marketing-pricing__features li {
	color: var(--al-mkt-fg-soft);
	font-size: 14.5px;
	line-height: 1.5;
	padding-left: 28px;
	position: relative;
}
.auralink-marketing-pricing__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(108,114,255,.20), rgba(108,114,255,.10));
	border: 1px solid rgba(108, 114, 255, 0.35);
}
.auralink-marketing-pricing__features li::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 8px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #8b9bff;
	border-bottom: 2px solid #8b9bff;
	transform: rotate(-45deg);
}

/* CTA - primary (popular card).
 * 2.56.192 - brand CTA grammar (matches the dashboard's .al-btn--primary,
 * shipped 2.56.95): lime at rest, purple on hover. Was its own purple
 * gradient, so a visitor saw a different brand on the pricing page than the
 * one they land in after signing up. Purple (--al-mkt-accent) stays the
 * general accent for borders/links/current-plan state below. */
.auralink-marketing-pricing__cta,
.auralink-marketing-checkout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	background: var(--al-mkt-cta-bg);
	color: var(--al-mkt-cta-ink);
	border: 0;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow:
		0 10px 28px rgba(215, 255, 68, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	cursor: pointer;
	pointer-events: auto;
}
.auralink-marketing-pricing__cta:hover,
.auralink-marketing-checkout-btn:hover {
	transform: translateY(-2px);
	background: var(--al-mkt-accent);
	color: #ffffff;
	box-shadow:
		0 16px 40px rgba(108, 114, 255, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* CTA - secondary (non-popular cards) */
.auralink-marketing-pricing__card:not(.is-popular) .auralink-marketing-pricing__cta,
.auralink-marketing-pricing__card:not(.is-popular) .auralink-marketing-checkout-btn {
	background: rgba(255, 255, 255, 0.04);
	color: var(--al-mkt-fg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none;
}
.auralink-marketing-pricing__card:not(.is-popular) .auralink-marketing-pricing__cta:hover,
.auralink-marketing-pricing__card:not(.is-popular) .auralink-marketing-checkout-btn:hover {
	background: rgba(108, 114, 255, 0.10);
	border-color: rgba(108, 114, 255, 0.45);
	color: #ffffff;
}

/* "Manage subscription" / "Open dashboard" CTA - visually subdued
 * (the visitor is already on this plan) but it IS a real anchor link to
 * the dashboard. Stays clickable with a subtle hover. */
.auralink-marketing-pricing__cta--current,
.auralink-marketing-pricing__cta[data-state="current"] {
	background: rgba(255, 255, 255, 0.03);
	color: rgba(245, 247, 251, 0.92);
	border: 1px dashed rgba(108, 114, 255, 0.30);
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	transform: none;
	filter: none;
	font-weight: 700;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.auralink-marketing-pricing__cta--current::before {
	content: '✓';
	margin-right: 8px;
	color: var(--al-mkt-accent);
	font-weight: 800;
}
.auralink-marketing-pricing__cta--current:hover,
.auralink-marketing-pricing__cta[data-state="current"]:hover {
	background: rgba(108, 114, 255, 0.10);
	border-color: var(--al-mkt-accent);
	color: #ffffff;
	transform: none;
	filter: none;
}

/* "Included in your plan" CTA - truly passive label, rendered as a
 * <span> so there's no link target. Dimmed so it reads as info-not-action. */
.auralink-marketing-pricing__cta--included,
.auralink-marketing-pricing__cta[data-state="below"] {
	background: rgba(255, 255, 255, 0.03);
	color: rgba(245, 247, 251, 0.55);
	border: 1px dashed rgba(108, 114, 255, 0.18);
	box-shadow: none;
	cursor: default;
	pointer-events: none;
	transform: none;
	filter: none;
	font-weight: 700;
}
.auralink-marketing-pricing__cta--included:hover {
	transform: none;
	filter: none;
}

/* Disabled state (mid-redirect) - kills clicks, correct */
.auralink-marketing-pricing__cta:disabled,
.auralink-marketing-checkout-btn:disabled {
	opacity: 0.7;
	cursor: progress;
	pointer-events: none;
}

/* Mobile - popular card scales back to a regular lift, sale prices shrink */
@media (max-width: 767px) {
	.auralink-marketing-pricing__card.is-popular { transform: none; }
	.auralink-marketing-pricing__card.is-popular:hover { transform: translateY(-4px); }
	.auralink-marketing-pricing__price,
	.auralink-marketing-pricing__price-sale { font-size: 44px; }
	.auralink-marketing-pricing__price-original { font-size: 18px; }
}

/* ── [auralink_auth_button] ───────────────────────────────────────── */
/* 2.56.192 - brand CTA grammar: lime rest, purple hover (same as the
   pricing card's primary CTA). The "already signed in" state keeps the
   quieter outline treatment in --al-mkt-accent (purple), unchanged. */
.auralink-marketing-auth-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.05rem;
	border-radius: 999px;
	background: var(--al-mkt-cta-bg);
	color: var(--al-mkt-cta-ink);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.auralink-marketing-auth-btn:hover {
	background: var(--al-mkt-accent);
	color: #ffffff;
	transform: translateY(-1px);
}
.auralink-marketing-auth-btn[data-state="in"] {
	background: transparent;
	color: var(--al-mkt-accent);
	border: 1.5px solid var(--al-mkt-accent);
}
.auralink-marketing-auth-btn[data-state="in"]:hover {
	background: var(--al-mkt-accent);
	color: #ffffff;
}

/* ── [auralink_claim_username] ────────────────────────────────────── */
/* Auto-themed glass pill that looks polished on both light and dark sections.
   The widget sniffs background luminance via the parent's color (we use rgba
   tints rather than solid values) so it sits cleanly on a dark hero or a
   white pricing block without per-page overrides. */
.auralink-marketing-claim {
	--al-claim-blue:   #7c2cff;
	--al-claim-purple: #8b5cf6;
	--al-claim-bg:     rgba(255, 255, 255, 0.04);
	--al-claim-border: rgba(255, 255, 255, 0.10);
	--al-claim-fg:     #f5f7fb;
	--al-claim-muted:  #9ba5be;
	--al-claim-placeholder: #6b7589;

	position: relative;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 540px;
	padding: 6px 6px 6px 18px;
	background: var(--al-claim-bg);
	border: 1px solid var(--al-claim-border);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	font-size: 1rem;
	color: var(--al-claim-fg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auralink-marketing-claim:focus-within {
	border-color: rgba(108, 114, 255, 0.50);
	background: rgba(255, 255, 255, 0.06);
	box-shadow:
		0 18px 52px rgba(108, 114, 255, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auralink-marketing-claim__field {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 8px;
	gap: 0;
}
.auralink-marketing-claim__prefix {
	color: var(--al-claim-muted);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	user-select: none;
}
.auralink-marketing-claim__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 4px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--al-claim-fg);
	outline: 0;
	caret-color: var(--al-claim-blue);
}
.auralink-marketing-claim__input::placeholder {
	color: var(--al-claim-placeholder);
	font-weight: 500;
}
/* 2.56.235 - Reversed from the shared "lime rest, purple hover" CTA grammar
   for this button specifically (real user ask: "this should be purple and
   white and then yellow when hovered. reverse basically" - this is the
   hero form's "Create free profile" button, the very first thing a new
   creator clicks). Also sized up per "writing could be bigger too". */
.auralink-marketing-claim__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--al-claim-blue);
	color: #ffffff;
	font-family: inherit;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.005em;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(108, 114, 255, 0.48);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.auralink-marketing-claim__cta:hover {
	background: var(--al-mkt-cta-bg);
	color: var(--al-mkt-cta-ink);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(215, 255, 68, 0.32);
}
.auralink-marketing-claim__cta:active {
	transform: translateY(0);
	filter: brightness(0.96);
}
.auralink-marketing-claim__status {
	position: absolute;
	left: 22px;
	top: calc(100% + 10px);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--al-claim-muted);
	min-height: 1.1em;
	pointer-events: none;
}
.auralink-marketing-claim__status.is-ok  { color: #5fd1a3; }
.auralink-marketing-claim__status.is-bad { color: #ff6b8a; }

/* Light-host fallback - when the widget is dropped onto a light page the
   default tints disappear into the background. Detect that via the
   `data-theme` hook (authors can add `data-theme="light"` on a wrapper) or
   via the OS preference and shift to ink-on-paper styling. */
@media (prefers-color-scheme: light) {
	.auralink-marketing-claim:not([data-theme="dark"]) {
		--al-claim-bg:     rgba(255, 255, 255, 0.85);
		--al-claim-border: rgba(20, 22, 36, 0.10);
		--al-claim-fg:     #14182a;
		--al-claim-muted:  #5e667a;
		--al-claim-placeholder: #98a0b3;
	}
	.auralink-marketing-claim:not([data-theme="dark"]):focus-within {
		background: #ffffff;
		border-color: rgba(108, 114, 255, 0.40);
	}
}
.auralink-marketing-claim[data-theme="light"] {
	--al-claim-bg:     rgba(255, 255, 255, 0.85);
	--al-claim-border: rgba(20, 22, 36, 0.10);
	--al-claim-fg:     #14182a;
	--al-claim-muted:  #5e667a;
	--al-claim-placeholder: #98a0b3;
}

@media (max-width: 540px) {
	.auralink-marketing-claim {
		padding: 5px 5px 5px 14px;
		max-width: 100%;
	}
	.auralink-marketing-claim__prefix { font-size: 0.85rem; }
	.auralink-marketing-claim__input  { font-size: 0.95rem; padding: 9px 4px; }
	.auralink-marketing-claim__cta    { padding: 10px 16px; font-size: 0.85rem; }
	.auralink-marketing-claim__status { left: 16px; }
}

/* ── [auralink_stats] ─────────────────────────────────────────────── */
.auralink-marketing-stat {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ── [auralink_checkout_button] ───────────────────────────────────── */
.auralink-marketing-checkout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--al-mkt-accent);
	color: var(--al-mkt-accent-ink);
	font-weight: 600;
	font-size: 0.98rem;
	font-family: inherit;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.auralink-marketing-checkout-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.auralink-marketing-checkout-btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.auralink-marketing-checkout-btn[data-state="on-plan"] {
	background: transparent;
	color: var(--al-mkt-accent);
	border: 1.5px solid var(--al-mkt-accent);
}
.auralink-marketing-checkout-btn[data-plan="premium"] {
	background: linear-gradient(135deg, var(--al-mkt-accent) 0%, #8b5cf6 100%);
}

/* ── [auralink_featured_profiles] - phone-shaped previews ─────────── */
/* Scoped under .auralink-marketing-featured--phones so this beats any
 * customer's Custom CSS that targets the old card class with
 * (we already shipped one such override that hard-codes a card bg + border;
 * by tightening specificity here, the new minimal phone card wins without
 * forcing the customer to edit their Bricks CSS). */
.auralink-marketing-featured {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	width: 100%;
}
.auralink-marketing-featured--phones {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 2rem;
}

/* Card: minimal - the phone IS the visual, no card chrome around it. */
.auralink-marketing-featured--phones .auralink-marketing-featured__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--al-mkt-fg);
	text-decoration: none;
	text-align: center;
	transition: transform 0.22s ease;
}
.auralink-marketing-featured--phones .auralink-marketing-featured__card:hover {
	transform: translateY(-4px);
}
.auralink-marketing-featured--phones .auralink-marketing-featured__card:hover .alm-phone {
	box-shadow:
		0 28px 60px rgba(0, 0, 0, 0.50),
		0 0 0 1px rgba(108, 114, 255, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Phone bezel - physical device chrome stays consistent across themes
 * (real iPhones don't change colour with your wallpaper). What changes
 * INSIDE the phone is everything painted from the per-creator CSS vars. */
.auralink-marketing-featured--phones .alm-phone {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 18;
	border-radius: 28px;
	background: #0a0c12;
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow:
		0 18px 44px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	padding: 8px;
	overflow: hidden;
	transition: box-shadow 0.22s ease;
}
.auralink-marketing-featured--phones .alm-phone__notch {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 38%;
	height: 14px;
	background: #000;
	border-radius: 999px;
	z-index: 3;
}

/* Screen - wraps the iframe. overflow:hidden + the iframe's own
 * transform:scale render a 390px-wide live page inside the phone
 * screen at exactly the screen's actual rendered width. */
.auralink-marketing-featured--phones .alm-phone__screen {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	background: #fff;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	container-type: inline-size;
}

/* Iframe sized to a real phone viewport (390×844) so the embedded page
 * lays out exactly as it would on an actual mobile device, then scaled
 * down to fit the phone screen.
 *
 * Two critical overrides:
 *   1. max-width: none - WordPress and most themes (Bricks included)
 *      ship a responsive `iframe { max-width: 100% }` rule that would
 *      otherwise clamp our 390px viewport down to the container width.
 *   2. transform: scale(var(--ph-scale)) - JS sets --ph-scale per phone
 *      via ResizeObserver to match the screen's actual rendered width.
 *      We can't use container query units here because scale() requires
 *      a unitless number and `calc(100cqw / 390)` is type-invalid. */
.auralink-marketing-featured--phones .alm-phone__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 390px;
	height: 844px;
	max-width: none;
	max-height: none;
	min-width: 0;
	border: 0;
	background: #fff;
	transform: scale(var(--ph-scale, 0.5));
	transform-origin: top left;
	pointer-events: none;
}

/* Hero - uploaded image OR an accent-colour fade matching the theme */
.auralink-marketing-featured--phones .alm-phone__hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 42%;
	background-size: cover;
	background-position: center;
	background-color: var(--ph-card, #ffffff);
	z-index: 0;
}
.auralink-marketing-featured--phones .alm-phone__hero--accent {
	background:
		linear-gradient(160deg,
			color-mix(in srgb, var(--ph-accent, #3b5cff) 65%, transparent) 0%,
			color-mix(in srgb, var(--ph-accent, #3b5cff) 25%, var(--ph-bg, #fafafa)) 60%,
			var(--ph-bg, #fafafa) 100%
		);
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.auralink-marketing-featured--phones .alm-phone__hero--accent {
		background: linear-gradient(160deg, var(--ph-accent, #3b5cff), var(--ph-bg, #fafafa));
	}
}
.auralink-marketing-featured--phones .alm-phone__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, var(--ph-bg, #fafafa) 95%);
}

/* Avatar - accent-colour ring/fallback, bridges hero & body */
.auralink-marketing-featured--phones .alm-phone__avatar {
	position: relative;
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ph-accent, #3b5cff);
	border: 2px solid var(--ph-bg, #fafafa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 18px;
	margin-top: 22%;
	margin-bottom: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.auralink-marketing-featured--phones .alm-phone__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text rows - ink colour follows the theme. Handle/bio are 70% opacity
 * of the theme text so they read as muted regardless of light/dark. */
.auralink-marketing-featured--phones .alm-phone__name {
	display: block;
	position: relative;
	z-index: 2;
	color: var(--ph-text, #1a1a2e);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.15;
	margin-top: 4px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.auralink-marketing-featured--phones .alm-phone__handle {
	display: block;
	position: relative;
	z-index: 2;
	color: var(--ph-text, #1a1a2e);
	opacity: 0.65;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 1px;
}
.auralink-marketing-featured--phones .alm-phone__bio {
	display: -webkit-box;
	position: relative;
	z-index: 2;
	color: var(--ph-text, #1a1a2e);
	opacity: 0.75;
	font-size: 9px;
	line-height: 1.35;
	padding: 0 6px;
	margin-top: 4px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Link rows - paint in the creator's card_bg with theme text/accent */
.auralink-marketing-featured--phones .alm-phone__links {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	margin-top: 8px;
	padding: 0 4px;
}
.auralink-marketing-featured--phones .alm-phone__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 18px;
	padding: 4px 8px;
	background: var(--ph-card, #ffffff);
	border: 1px solid color-mix(in srgb, var(--ph-text, #1a1a2e) 12%, transparent);
	border-radius: 8px;
	color: var(--ph-text, #1a1a2e);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.auralink-marketing-featured--phones .alm-phone__link {
		border-color: rgba(127, 127, 127, 0.18);
	}
}
.auralink-marketing-featured--phones .alm-phone__link--ghost {
	background: var(--ph-card, #ffffff);
	opacity: 0.55;
}

/* Dark-mode themes get a subtle white-tint border instead of the
 * mixed text-colour border so cards feel inset, not outlined. */
.auralink-marketing-featured--phones .alm-phone[data-mode="dark"] .alm-phone__link {
	background: var(--ph-card, #151929);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Caption beneath each phone */
.auralink-marketing-featured--phones .auralink-marketing-featured__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
}
.auralink-marketing-featured--phones .auralink-marketing-featured__name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	color: var(--al-mkt-fg);
}
.auralink-marketing-featured--phones .auralink-marketing-featured__handle {
	display: block;
	color: var(--al-mkt-muted);
	font-size: 12px;
	font-weight: 500;
}

/* Legacy simple-card fallback - for any caller that doesn't get the
 * --phones modifier (no current call site does, but keep the class
 * styles intact so old themes referencing them don't break). */
.auralink-marketing-featured:not(.auralink-marketing-featured--phones) .auralink-marketing-featured__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.25rem 1rem;
	background: var(--al-mkt-card-bg);
	border: 1px solid var(--al-mkt-card-border);
	border-radius: var(--al-mkt-radius);
	box-shadow: var(--al-mkt-shadow);
	color: var(--al-mkt-fg);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	text-align: center;
}

/* ─── Site-wide sale banner - for [auralink_sale_banner].
 * Renders only while the sale is active (the shortcode short-circuits
 * to empty output otherwise, so this rule never has anything to style
 * outside the sale window). Subtle gradient pill that reads as
 * "limited time" without clobbering page rhythm. */
.al-sale-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(108,114,255,.16), rgba(139,92,246,.10));
    border: 1px solid rgba(108, 114, 255, 0.32);
    color: var(--al-mkt-fg, #f5f7fb);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(108, 114, 255, 0.20);
}

/* ─── Footer social icons [auralink_social_icons] ───────────────────
 * The icons themselves are bare inline <svg viewBox="0 0 24 24">
 * with no width/height, relying entirely on the host theme's own
 * footer CSS to size them (see render_social_icons() in
 * class-auralink-marketing-shortcodes.php). On installs where the
 * theme's footer styling doesn't happen to cover this exact markup,
 * an unsized SVG renders at its intrinsic size - hundreds of pixels
 * square - and blows out the footer layout. These are the only rules
 * this plugin ships for the wrapper; explicit here so the icons are
 * never at the mercy of the host theme having a matching selector. */
.al-foot-soc {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.al-foot-soc a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--al-mkt-muted, rgba(0, 0, 0, 0.55));
    text-decoration: none;
}
.al-foot-soc svg {
    width: 100%;
    height: 100%;
}
/* Live fee comparison - restrained utility styling, no promotional winner. */
.auralink-fee-calculator{max-width:760px;margin:1.5rem auto;padding:clamp(1rem,3vw,1.75rem);border:1px solid rgba(15,23,42,.14);border-radius:18px;background:#fff;color:#111827}
.auralink-fee-calculator__intro h3{margin:0 0 .35rem;font-size:clamp(1.2rem,2vw,1.55rem)}
.auralink-fee-calculator__intro p,.auralink-fee-calculator__note{color:#4b5563;line-height:1.55}
.auralink-fee-calculator__label{display:block;margin:1.2rem 0 .4rem;font-weight:700}
.auralink-fee-calculator__input-wrap{display:flex;align-items:center;gap:.45rem;max-width:280px;padding:.7rem .85rem;border:1px solid #9ca3af;border-radius:10px}
.auralink-fee-calculator__input-wrap:focus-within{outline:3px solid rgba(122,34,246,.24);border-color:#7a22f6}
.auralink-fee-calculator__input-wrap input{width:100%;border:0;outline:0;font:inherit;background:transparent;color:inherit}
.auralink-fee-calculator__results{margin-top:1.15rem;border-top:1px solid rgba(15,23,42,.12)}
.auralink-fee-calculator__row{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(180px,1fr) minmax(190px,1fr);gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid rgba(15,23,42,.1)}
.auralink-fee-calculator__row span{color:#4b5563}.auralink-fee-calculator__row b{text-align:right}
@media(max-width:620px){.auralink-fee-calculator__row{grid-template-columns:1fr;gap:.2rem}.auralink-fee-calculator__row b{text-align:left}}
/* The marketing consent banner's base transform only moves it off-screen.
   Visibility keeps its closed controls out of keyboard and AT navigation;
   the existing is-visible class restores both the UI and its semantics. */
.al-mkt-cookie-banner:not(.is-visible) {
    visibility: hidden;
}

.al-mkt-cookie-banner.is-visible {
    visibility: visible;
}

/* 2.59.4 - Money-first pricing.
 * Keep the decision calm and factual: price, money kept and break-even first.
 * Longer plan details stay available without filling the whole page. */
.auralink-marketing-pricing {
	gap: clamp(16px, 2vw, 24px);
}

.auralink-marketing-pricing__card,
.auralink-marketing-pricing__card.is-popular,
.auralink-marketing-pricing__card.is-popular:hover,
.auralink-marketing-pricing__card:hover {
	background: var(--al-mkt-card-bg);
	border: 1px solid var(--al-mkt-card-border);
	box-shadow: none;
	transform: none;
}

.auralink-marketing-pricing__card.is-popular {
	border: 2px solid var(--al-mkt-accent);
}

.auralink-marketing-pricing__card::before {
	display: none;
}

.auralink-marketing-pricing__pill,
.auralink-marketing-pricing__pill--sale,
.auralink-marketing-pricing__pill--current {
	background: var(--al-mkt-accent);
	box-shadow: none;
}

.auralink-marketing-pricing__pill--sale {
	background: #c2410c;
}

.auralink-marketing-pricing__pill--current {
	background: #34394a;
	color: #fff;
}

.auralink-marketing-pricing__card.is-popular .auralink-marketing-pricing__price:not(.auralink-marketing-pricing__price--on-sale) {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--al-mkt-fg);
}

.auralink-marketing-pricing__price,
.auralink-marketing-pricing__price--on-sale {
	margin-bottom: 16px;
}

.auralink-marketing-pricing__positioning {
	margin: 0;
}

.auralink-marketing-pricing__money {
	display: grid;
	gap: 5px;
	margin: 4px 0 2px;
	padding: 16px;
	border: 1px solid rgba(215, 255, 68, 0.36);
	border-radius: 14px;
	background: rgba(215, 255, 68, 0.08);
	color: var(--al-mkt-fg-soft);
	line-height: 1.45;
}

.auralink-marketing-pricing__money strong {
	color: var(--al-mkt-fg);
	font-size: 17px;
}

.auralink-marketing-pricing__money span,
.auralink-marketing-pricing__money small {
	display: block;
	font-size: 13px;
}

.auralink-marketing-pricing__details {
	margin: 0;
	border-top: 1px solid var(--al-mkt-card-border);
}

.auralink-marketing-pricing__details summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--al-mkt-fg);
	font-size: 14px;
	font-weight: 750;
	cursor: pointer;
}

.auralink-marketing-pricing__details .auralink-marketing-pricing__features {
	margin: 0 0 20px;
}

.auralink-marketing-pricing__features li::before {
	background: transparent;
	box-shadow: none;
}

.auralink-marketing-pricing__cta,
.auralink-marketing-checkout-btn,
.auralink-marketing-pricing__cta:hover,
.auralink-marketing-checkout-btn:hover {
	box-shadow: none;
	transform: none;
}

@media (max-width: 560px) {
	.auralink-marketing-pricing {
		grid-template-columns: minmax(0, 1fr);
	}

	.auralink-marketing-pricing__card {
		min-width: 0;
		padding: 32px 20px 22px;
	}

	.auralink-marketing-pricing__price,
	.auralink-marketing-pricing__price-sale {
		font-size: clamp(38px, 12vw, 46px);
		overflow-wrap: anywhere;
	}
}

/* 2.60.0 - Marketing forms and consent remain readable inside host themes
   that reduce the root rem size. At phone width the page-address prefix and
   username field become one full row instead of squeezing the input away. */
.al-mkt-cookie-banner__text,
.al-mkt-cookie-btn,
.al-mkt-cookie-pref-label__name,
.al-mkt-cookie-pref-label__desc {
	font-size: 14px;
	line-height: 1.45;
}
.al-mkt-cookie-btn { min-height: 44px; line-height: 1.2; }
.auralink-marketing-claim__input {
	min-width: 70px;
	font-size: 16px;
}
.auralink-marketing-claim__cta {
	min-height: 48px;
	font-size: 15px;
}
@media (max-width: 420px) {
	.al-mkt-cookie-banner__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	.al-mkt-cookie-btn { width: 100%; padding: 10px 12px; }
	.al-mkt-cookie-btn--accept { grid-column: 1 / -1; }
	.auralink-marketing-claim {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding: 7px;
		border-radius: 18px;
	}
	.auralink-marketing-claim__field {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		min-height: 48px;
		padding: 0 9px;
		overflow: hidden;
	}
	.auralink-marketing-claim__prefix {
		max-width: 58%;
		overflow: hidden;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.auralink-marketing-claim__input { width: 100%; padding: 10px 3px; }
	.auralink-marketing-claim__cta { width: 100%; }
}