/*
 * ThatWorx Local Launch — product landing page styles.
 *
 * Loaded only when the "Local Launch Product Page" template is active
 * (scoped to .twx-ll-landing-page). Builds on main.css tokens.
 *
 * Layers:
 *   1. Landing shared overrides
 *   2. Landing header
 *   3. LP Hero
 *   4. How It Works
 *   5. Starter Cards
 *   6. Pricing
 *   7. What's Included
 *   8. Custom Upgrades
 *   9. Domain section
 *  10. AI section
 *  11. FAQ accordion
 *  12. Final CTA
 *  13. Landing footer
 */

/* -------------------------------------------------------------------
 * 1. Landing shared
 * ---------------------------------------------------------------- */

/*
 * Brand CSS variables (--twx-brand-*) are injected by twx_ll_output_brand_css()
 * on wp_head. The rules below wire those variables into the landing page so
 * colour, font, and button-radius changes made in Brand Settings propagate here
 * automatically. Fallbacks match the system defaults so the layout is safe even
 * before any brand settings have been saved.
 */
.twx-ll-landing-page {
	font-family: var(--twx-brand-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.twx-ll-landing-page h1,
.twx-ll-landing-page h2,
.twx-ll-landing-page h3,
.twx-ll-landing-page h4,
.twx-ll-landing-page h5 {
	font-family: var(--twx-brand-heading-font, inherit);
}

/* Button border-radius driven by brand settings. */
.twx-ll-landing-page .twx-ll-button {
	border-radius: var(--twx-brand-button-radius, 6px);
}

.twx-ll-landing-page .twx-ll-lp-section {
	padding-block: var(--twx-space-xl);
}

.twx-ll-lp-eyebrow {
	color: var(--twx-teal-dark);
}

.twx-ll-lp-eyebrow--light {
	color: var(--twx-aqua);
}

/* Alternate section backgrounds for visual rhythm. */
.twx-ll-lp-how      { background-color: var(--twx-light); }
.twx-ll-lp-finder   { background-color: var(--twx-white); }
.twx-ll-lp-starters { background-color: var(--twx-light); }
.twx-ll-lp-pricing  { background-color: var(--twx-sand); }
.twx-ll-lp-included { background-color: var(--twx-white); }
.twx-ll-lp-upgrades { background-color: var(--twx-navy); color: var(--twx-white); }
.twx-ll-lp-domain   { background-color: var(--twx-aqua); }
.twx-ll-lp-ai       { background-color: var(--twx-light); }
.twx-ll-lp-faq      { background-color: var(--twx-white); }
.twx-ll-lp-cta      {
	background:
		radial-gradient(110% 80% at 90% 10%, rgba(0, 168, 168, 0.45), transparent 55%),
		linear-gradient(160deg, var(--twx-navy-2) 0%, var(--twx-navy) 65%);
	color: var(--twx-white);
	position: relative;
	overflow: hidden;
}

/* -------------------------------------------------------------------
 * 2. Landing header
 * ---------------------------------------------------------------- */

/* Chamber co-brand bar — shown above the header on chamber subdomains. */
.twx-ll-chamber-bar {
	background: linear-gradient(90deg, var(--twx-navy) 0%, var(--twx-navy-2, #0d2744) 100%);
	border-bottom: 1px solid rgba(0, 168, 168, 0.3);
	padding: 7px 0;
	text-align: center;
}

.twx-ll-chamber-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.twx-ll-chamber-bar__text {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.01em;
}

.twx-ll-chamber-bar__text strong {
	color: var(--twx-white);
	font-weight: 600;
}

.twx-ll-chamber-bar__logo {
	display: block;
	height: 26px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.twx-ll-chamber-bar__link {
	font-size: 0.72rem;
	color: var(--twx-aqua, #00d4d4);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.twx-ll-chamber-bar__link:hover {
	text-decoration: underline;
}

/* Uploaded brand logo (replaces the wordmark when a logo is set). */
.twx-ll-header__logo-img {
	display: block;
	max-height: 57px;
	max-width: 286px;
	width: auto;
	height: auto;
	/* White logo treatment for dark navy header — invert converts dark pixels
	   to white, drop-shadow adds a soft teal glow for visual pop. */
	filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 168, 168, 0.45));
}

.twx-ll-lp-header__wordmark-top {
	display: block;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--twx-white);
}

.twx-ll-lp-header__wordmark-sub {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--twx-aqua);
	line-height: 1.2;
}

/* -------------------------------------------------------------------
 * 3. LP Hero
 * ---------------------------------------------------------------- */

.twx-ll-lp-hero {
	background:
		/* Subtle dot grid — gives the surface a premium "tech" texture */
		radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 30px 30px,
		/* Faint diagonal accent band */
		linear-gradient(135deg, transparent 38%, rgba(0, 168, 168, 0.055) 52%, transparent 66%),
		/* Teal glow top-right (behind browser mockup) */
		radial-gradient(110% 90% at 85% 8%, rgba(0, 168, 168, 0.55), transparent 55%),
		/* Teal glow bottom-left */
		radial-gradient(80% 70% at 5% 95%, rgba(0, 139, 139, 0.45), transparent 55%),
		linear-gradient(160deg, var(--twx-navy-2) 0%, var(--twx-navy) 62%);
	color: var(--twx-white);
	padding-block: clamp(4rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
	position: relative;
	overflow: hidden;
}

/*
 * Ghost card shapes — three faint rounded rectangles floating in the
 * background. A single element + box-shadow offsets give us three cards
 * for the cost of one pseudo-element.
 */
.twx-ll-lp-hero::before {
	content: "";
	position: absolute;
	width: 10rem;
	height: 6.5rem;
	border-radius: 12px;
	/* Card 1 (element itself) | Card 2 (offset) | Card 3 (offset) */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.07),
		16rem 5rem 0 1px rgba(255, 255, 255, 0.05),
		-3rem 20rem 0 1px rgba(255, 255, 255, 0.04);
	top: 8%;
	left: 4%;
	transform: rotate(-5deg);
	pointer-events: none;
	z-index: 0;
}

/*
 * Large soft teal glow — sits behind the browser mockup on the right,
 * giving the visual column a sense of light and depth.
 */
.twx-ll-lp-hero::after {
	content: "";
	position: absolute;
	right: -2%;
	top: 50%;
	transform: translateY(-50%);
	width: 48%;
	height: 110%;
	background: radial-gradient(ellipse at center, rgba(0, 168, 168, 0.2), transparent 68%);
	filter: blur(36px);
	pointer-events: none;
	z-index: 0;
}

.twx-ll-lp-hero__inner {
	display: grid;
	gap: var(--twx-space-xl);
	align-items: center;
	grid-template-columns: 1fr;
	/* Sit above all decorative pseudo-elements */
	position: relative;
	z-index: 1;
}

.twx-ll-lp-hero__headline {
	color: var(--twx-white);
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin-bottom: var(--twx-space-md);
	text-wrap: balance;
}

.twx-ll-lp-hero__subheadline {
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	max-width: 32rem;
	margin-bottom: var(--twx-space-lg);
}

.twx-ll-lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--twx-space-sm);
}

.twx-ll-lp-hero__assurance {
	color: var(--twx-teal-dark);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0.85rem 0 0;
}

/* Browser-window mockup illustration */
.twx-ll-lp-hero__screen {
	border-radius: var(--twx-radius);
	overflow: hidden;
	background-color: var(--twx-white);
	box-shadow: 0 32px 80px rgba(6, 27, 51, 0.5);
	max-width: 28rem;
	margin: 0 auto;
}

/* Browser chrome bar */
.twx-ll-lp-hero__screen-bar {
	background-color: #e2e8ef;
	padding: 0.5rem 0.75rem;
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.twx-ll-lp-hero__screen-bar > span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background-color: #c8d0d8;
	flex-shrink: 0;
}

.twx-ll-lp-hero__screen-bar > span:first-child  { background-color: #ff7057; }
.twx-ll-lp-hero__screen-bar > span:nth-child(2) { background-color: #ffc82c; }
.twx-ll-lp-hero__screen-bar > span:nth-child(3) { background-color: #29cc41; }

/* Fake URL bar */
.twx-ll-mock-url {
	flex: 1;
	background-color: var(--twx-white);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	margin-left: 0.35rem;
}

.twx-ll-mock-url__bar {
	display: block;
	height: 0.3rem;
	width: 55%;
	background-color: #c8d0d8;
	border-radius: 999px;
}

.twx-ll-lp-hero__screen-body {
	background-color: var(--twx-white);
}

/* ── Mock site nav ── */
.twx-ll-mock-nav {
	background: linear-gradient(90deg, var(--twx-navy) 0%, var(--twx-navy-2) 100%);
	padding: 0.45rem 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.twx-ll-mock-nav__logo {
	display: flex;
	align-items: center;
	gap: 0.32rem;
}

.twx-ll-mock-nav__dot {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--twx-teal), var(--twx-teal-dark));
	flex-shrink: 0;
}

.twx-ll-mock-nav__brand {
	display: block;
	width: 3.2rem;
	height: 0.4rem;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 999px;
}

.twx-ll-mock-nav__links {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.twx-ll-mock-nav__links span {
	display: block;
	width: 1.6rem;
	height: 0.32rem;
	background-color: rgba(255, 255, 255, 0.35);
	border-radius: 999px;
}

.twx-ll-mock-nav__cta {
	width: 2rem !important;
	height: 1rem !important;
	background: var(--twx-teal) !important;
	border-radius: 999px !important;
}

/* ── Mock site hero ── */
.twx-ll-mock-site-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		140deg,
		var(--twx-navy-2) 0%,
		var(--twx-navy) 55%,
		#0a2d4a 100%
	);
	padding: 1.4rem 0.8rem 1.8rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

/* Teal radial glow on the right */
.twx-ll-mock-site-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -15%;
	width: 65%;
	height: 130%;
	background: radial-gradient(circle, rgba(0, 168, 168, 0.38), transparent 70%);
	pointer-events: none;
}

.twx-ll-mock-site-hero__content {
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}

/* Fake skeleton text lines */
.twx-ll-mock-text {
	display: block;
	border-radius: 999px;
}

.twx-ll-mock-text--eyebrow {
	height: 0.28rem;
	width: 38%;
	background-color: rgba(0, 168, 168, 0.7);
	margin-bottom: 0.2rem;
}

.twx-ll-mock-text--h1-a {
	height: 0.52rem;
	width: 85%;
	background-color: rgba(255, 255, 255, 0.9);
}

.twx-ll-mock-text--h1-b {
	height: 0.52rem;
	width: 62%;
	background-color: rgba(255, 255, 255, 0.9);
}

.twx-ll-mock-text--body {
	height: 0.3rem;
	width: 88%;
	background-color: rgba(255, 255, 255, 0.45);
	margin-top: 0.18rem;
}

.twx-ll-mock-text--body-2 {
	width: 72%;
}

.twx-ll-mock-site-hero__btns {
	display: flex;
	gap: 0.3rem;
	margin-top: 0.4rem;
}

.twx-ll-mock-btn {
	display: block;
	height: 0.9rem;
	border-radius: 999px;
}

.twx-ll-mock-btn--primary {
	width: 2.6rem;
	background-color: var(--twx-teal);
}

.twx-ll-mock-btn--outline {
	width: 2rem;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Floating stat widget */
.twx-ll-mock-stat {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	min-width: 3.8rem;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 7px;
	padding: 0.45rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
}

.twx-ll-mock-stat__label {
	display: block;
	height: 0.28rem;
	width: 75%;
	background-color: rgba(255, 255, 255, 0.45);
	border-radius: 999px;
}

.twx-ll-mock-stat__value {
	display: block;
	height: 0.52rem;
	width: 90%;
	background-color: rgba(255, 255, 255, 0.88);
	border-radius: 999px;
}

.twx-ll-mock-stat__badge {
	display: block;
	height: 0.36rem;
	width: 52%;
	background-color: rgba(0, 168, 168, 0.75);
	border-radius: 999px;
}

/* ── Mock trust strip ── */
.twx-ll-mock-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4rem;
	padding: 0.55rem 0.8rem;
	background-color: var(--twx-white);
	border-bottom: 1px solid #dce7ea;
}

.twx-ll-mock-trust__item {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.twx-ll-mock-trust__dot {
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--twx-teal), var(--twx-teal-dark));
	flex-shrink: 0;
}

.twx-ll-mock-trust__line {
	display: block;
	height: 0.28rem;
	flex: 1;
	background-color: #c0cdd6;
	border-radius: 999px;
}

/* ── Mock feature cards ── */
.twx-ll-mock-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem;
	padding: 0.6rem;
	background-color: var(--twx-white);
}

.twx-ll-mock-card {
	background-color: #f3f7f9;
	border: 1px solid #dce7ea;
	border-radius: 6px;
	padding: 0.5rem 0.45rem;
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
}

.twx-ll-mock-card__icon {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--twx-teal), var(--twx-teal-dark));
	margin-bottom: 0.1rem;
	flex-shrink: 0;
}

.twx-ll-mock-card__icon--warm {
	background: linear-gradient(135deg, var(--twx-warm), var(--twx-warm-dark));
}

.twx-ll-mock-card__icon--alt {
	background: linear-gradient(135deg, #5b8ed6, #3d6fc0);
}

.twx-ll-mock-card__line {
	display: block;
	height: 0.28rem;
	border-radius: 999px;
	background-color: #c0cdd6;
	width: 80%;
}

.twx-ll-mock-card__line--title {
	height: 0.36rem;
	width: 58%;
	background-color: #8fa2b0;
}

.twx-ll-mock-card__line--short {
	width: 42%;
}

@media (min-width: 60em) {
	.twx-ll-lp-hero__inner {
		grid-template-columns: 1fr 1fr;
	}

	.twx-ll-lp-hero__screen {
		max-width: none;
	}
}

/* On mobile: hide ghost card shapes and shrink the teal glow so
   decorative elements don't compete with the headline. */
@media (max-width: 59.99em) {
	.twx-ll-lp-hero::before {
		display: none;
	}

	.twx-ll-lp-hero::after {
		width: 80%;
		height: 50%;
		top: 0;
		right: 50%;
		transform: translateX(50%);
		opacity: 0.6;
	}
}

/* -------------------------------------------------------------------
 * 4. How It Works
 * ---------------------------------------------------------------- */

.twx-ll-lp-how__note {
	color: var(--twx-muted);
	font-size: 0.88rem;
	margin-top: calc(-1 * var(--twx-space-xs));
}

.twx-ll-lp-steps {
	list-style: none;
	counter-reset: none;
	display: grid;
	gap: var(--twx-space-lg);
	grid-template-columns: 1fr;
	margin-top: 0;
	padding: 0;
}

.twx-ll-lp-step {
	background-color: var(--twx-white);
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius);
	padding: var(--twx-space-lg);
	box-shadow: var(--twx-shadow-sm);
	position: relative;
}

.twx-ll-lp-step__number {
	display: block;
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--twx-aqua);
	line-height: 1;
	margin-bottom: var(--twx-space-xs);
}

.twx-ll-lp-step__title {
	font-size: 1.15rem;
	margin-bottom: 0.4rem;
}

.twx-ll-lp-step__text {
	color: var(--twx-muted);
	font-size: 0.94rem;
	margin: 0;
}

@media (min-width: 56em) {
	.twx-ll-lp-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * 4b. Starting Point Finder
 * ---------------------------------------------------------------- */

.twx-ll-lp-finder { background-color: var(--twx-white); }

.twx-ll-lp-finder__intro {
	color: var(--twx-muted);
	max-width: 36rem;
	margin: calc(-1 * var(--twx-space-sm)) auto 0;
}

.twx-ll-lp-finder__layout {
	display: grid;
	gap: var(--twx-space-lg);
	grid-template-columns: 1fr;
	align-items: start;
	margin-top: var(--twx-space-lg);
}

@media (min-width: 56em) {
	.twx-ll-lp-finder__layout {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Form panel ─────────────────────────────────────────────────── */
.twx-ll-lp-finder__form {
	background: var(--twx-white);
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius);
	padding: var(--twx-space-lg);
	box-shadow: var(--twx-shadow-sm);
}

.twx-ll-lp-finder__field {
	margin-bottom: var(--twx-space-md);
}

.twx-ll-lp-finder__label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--twx-navy);
	margin-bottom: 0.35rem;
}

.twx-ll-lp-finder__input,
.twx-ll-lp-finder__select {
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--twx-border);
	border-radius: calc(var(--twx-radius) - 2px);
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--twx-navy);
	background-color: var(--twx-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.twx-ll-lp-finder__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a3d5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

.twx-ll-lp-finder__input:focus,
.twx-ll-lp-finder__select:focus {
	outline: none;
	border-color: var(--twx-teal);
	box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.twx-ll-lp-finder__form-cta {
	display: block;
	text-align: center;
	margin-top: var(--twx-space-sm);
}

/* ── Preview panel ──────────────────────────────────────────────── */
.twx-ll-lp-finder__preview {
	background: linear-gradient(150deg, var(--twx-navy-2, #0d2744) 0%, var(--twx-navy) 80%);
	border-radius: var(--twx-radius);
	padding: var(--twx-space-lg);
	color: var(--twx-white);
	box-shadow: var(--twx-shadow);
}

@media (min-width: 56em) {
	.twx-ll-lp-finder__preview {
		position: sticky;
		top: 1.5rem;
	}
}

.twx-ll-lp-finder__preview-for {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--twx-aqua);
	margin: 0 0 0.2rem;
}

.twx-ll-lp-finder__preview-name {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--twx-white);
	margin: 0 0 var(--twx-space-md);
	line-height: 1.2;
	min-height: 1.6rem;
}

.twx-ll-lp-finder__rec-list {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: var(--twx-space-md);
}

.twx-ll-lp-finder__rec-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.88rem;
}

.twx-ll-lp-finder__rec-label {
	color: rgba(255, 255, 255, 0.58);
	flex-shrink: 0;
}

.twx-ll-lp-finder__rec-value {
	font-weight: 700;
	color: var(--twx-white);
	text-align: right;
}

.twx-ll-lp-finder__rec-value--accent {
	color: var(--twx-aqua);
}

.twx-ll-lp-finder__explanation {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 var(--twx-space-md);
	line-height: 1.55;
	min-height: 3rem;
}

.twx-ll-lp-finder__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: var(--twx-space-sm);
}

.twx-ll-lp-finder__actions .twx-ll-button {
	text-align: center;
	justify-content: center;
}

.twx-ll-lp-finder__note {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
	line-height: 1.45;
	font-style: italic;
}

/* -------------------------------------------------------------------
 * 5. Starter Cards
 * ---------------------------------------------------------------- */

.twx-ll-lp-starters__intro {
	color: var(--twx-muted);
	max-width: 40rem;
	margin: calc(-1 * var(--twx-space-sm)) auto 0;
}

.twx-ll-lp-starters__tagline {
	margin: var(--twx-space-sm) auto 0;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--twx-teal-dark);
	letter-spacing: 0.01em;
}

.twx-ll-lp-starters__grid {
	display: grid;
	gap: var(--twx-space-md);
	grid-template-columns: 1fr;
}

/* ── Card shell ─────────────────────────────────────────────────── */
.twx-ll-lp-starter-card {
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius);
	box-shadow: var(--twx-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--twx-white);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.twx-ll-lp-starter-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--twx-shadow);
}

/* ── Card header (icon / photo area) ────────────────────────────── */
.twx-ll-lp-starter-card__icon {
	height: 7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.twx-ll-lp-starter-card__icon svg {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--twx-white);
}

/* Live demo — teal gradient */
.twx-ll-lp-starter-card--teal .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, var(--twx-teal) 0%, var(--twx-teal-dark) 70%, #036d6d 100%);
}

/* Live demo — warm gradient */
.twx-ll-lp-starter-card--warm .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, var(--twx-warm) 0%, var(--twx-warm-dark) 70%, #94492a 100%);
}

/* Professional Services — deep navy */
.twx-ll-lp-starter-card--navy .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, #1a3a5c 0%, #0d2744 60%, #091e36 100%);
}

/* Wellness / Health — forest teal */
.twx-ll-lp-starter-card--mint .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, #1e8a72 0%, #157a61 60%, #0d6050 100%);
}

/* Entertainment / Events — rich purple */
.twx-ll-lp-starter-card--purple .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, #5a2d90 0%, #461e72 60%, #311454 100%);
}

/* Retail / Boutique — warm terracotta */
.twx-ll-lp-starter-card--rose .twx-ll-lp-starter-card__icon:not(.twx-ll-lp-starter-card__icon--has-image) {
	background: linear-gradient(135deg, #c86050 0%, #a84840 60%, #8e3430 100%);
}

/* Photo header — scales image to full card width so the full scene is visible. */
.twx-ll-lp-starter-card__icon--has-image {
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
}

.twx-ll-lp-starter-card__icon--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 27, 51, 0.08) 0%, rgba(6, 27, 51, 0.32) 100%);
}

.twx-ll-lp-starter-card__icon--has-image svg {
	display: none;
}

/* ── Badge chip ─────────────────────────────────────────────────── */
.twx-ll-lp-starter-card__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.18rem 0.55rem;
	border-radius: 2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2;
}

.twx-ll-lp-starter-card__badge--live {
	background: rgba(0, 168, 168, 0.22);
	color: #e0ffff;
	border: 1px solid rgba(0, 220, 200, 0.4);
}

.twx-ll-lp-starter-card__badge--style {
	background: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.twx-ll-lp-starter-card__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #2dffd8;
	box-shadow: 0 0 5px rgba(45, 255, 216, 0.7);
	flex-shrink: 0;
}

/* ── Card body ──────────────────────────────────────────────────── */
.twx-ll-lp-starter-card__body {
	padding: var(--twx-space-md);
	flex-grow: 1;
}

.twx-ll-lp-starter-card__title {
	font-size: 1.1rem;
	margin-bottom: 0.3rem;
}

.twx-ll-lp-starter-card__description {
	color: var(--twx-muted);
	font-size: 0.92rem;
	margin-bottom: var(--twx-space-xs);
}

.twx-ll-lp-starter-card__demo-name {
	font-size: 0.82rem;
	color: var(--twx-teal-dark);
	font-weight: 600;
	margin: 0;
}

.twx-ll-lp-starter-card__footer {
	padding: 0 var(--twx-space-md) var(--twx-space-md);
}

/* ── Responsive grid ────────────────────────────────────────────── */
@media (min-width: 40em) {
	.twx-ll-lp-starters__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.twx-ll-lp-starters__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * 6. Pricing
 * ---------------------------------------------------------------- */

.twx-ll-lp-pricing__assurance {
	color: var(--twx-navy);
	font-size: clamp(1.35rem, 3.2vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0.35rem 0 0.65rem;
}

.twx-ll-lp-pricing__subtitle {
	color: var(--twx-muted);
	margin-top: 0;
}

.twx-ll-lp-pricing__note {
	color: var(--twx-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: var(--twx-space-lg) auto 0;
	max-width: 42rem;
	text-align: center;
}

.twx-ll-lp-pricing__note a {
	color: var(--twx-teal-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.twx-ll-lp-pricing__note a:hover {
	color: var(--twx-navy);
}

.twx-ll-lp-pricing__grid {
	display: grid;
	gap: var(--twx-space-md);
	grid-template-columns: 1fr;
	align-items: start;
}

.twx-ll-lp-plan {
	background-color: var(--twx-white);
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius);
	box-shadow: var(--twx-shadow-sm);
	padding: var(--twx-space-lg);
	position: relative;
}

.twx-ll-lp-plan--popular {
	border-color: var(--twx-teal);
	box-shadow: 0 0 0 2px var(--twx-teal), var(--twx-shadow);
	padding-top: calc(var(--twx-space-lg) + 0.5rem);
}

.twx-ll-lp-plan__badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--twx-teal), var(--twx-teal-dark));
	color: var(--twx-white);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 1rem;
	border-radius: 999px;
	white-space: nowrap;
}

.twx-ll-lp-plan__name {
	font-size: 1.15rem;
	margin-bottom: var(--twx-space-xs);
}

.twx-ll-lp-plan__price {
	margin-bottom: var(--twx-space-md);
	padding-bottom: var(--twx-space-md);
	border-bottom: 1px solid var(--twx-border);
}

.twx-ll-lp-plan__setup {
	display: block;
	font-size: 0.88rem;
	color: var(--twx-muted);
	margin-bottom: 0.2rem;
}

.twx-ll-lp-plan__monthly {
	font-size: 1rem;
	color: var(--twx-navy);
}

.twx-ll-lp-plan__monthly strong {
	font-size: 2rem;
	font-weight: 900;
	color: var(--twx-navy);
}

.twx-ll-lp-plan__features {
	list-style: none;
	display: grid;
	gap: 0.6rem;
	margin-bottom: var(--twx-space-lg);
}

.twx-ll-lp-plan__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.93rem;
	color: var(--twx-text);
}

.twx-ll-lp-plan__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--twx-aqua);
	color: var(--twx-teal-dark);
	margin-top: 0.1rem;
}

.twx-ll-lp-plan__check svg {
	width: 0.82rem;
	height: 0.82rem;
}

.twx-ll-lp-plan__cta .twx-ll-button {
	width: 100%;
	border: 2px solid var(--twx-teal);
}

@media (min-width: 56em) {
	.twx-ll-lp-pricing__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * 7. What's Included
 * ---------------------------------------------------------------- */

.twx-ll-lp-included__grid {
	list-style: none;
	display: grid;
	gap: var(--twx-space-md);
	grid-template-columns: 1fr;
}

.twx-ll-lp-included__item {
	display: flex;
	align-items: flex-start;
	gap: var(--twx-space-md);
}

.twx-ll-lp-included__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--twx-aqua);
	color: var(--twx-teal-dark);
}

.twx-ll-lp-included__icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.twx-ll-lp-included__title {
	display: block;
	color: var(--twx-navy);
	font-size: 1rem;
	margin-bottom: 0.2rem;
}

.twx-ll-lp-included__text {
	color: var(--twx-muted);
	font-size: 0.9rem;
	margin: 0;
}

@media (min-width: 48em) {
	.twx-ll-lp-included__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.twx-ll-lp-included__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * 8. Custom Upgrades (navy band)
 * ---------------------------------------------------------------- */

.twx-ll-lp-upgrades__inner {
	display: grid;
	gap: var(--twx-space-xl);
	grid-template-columns: 1fr;
	align-items: start;
}

.twx-ll-lp-upgrades .twx-ll-lp-eyebrow {
	color: var(--twx-aqua);
}

.twx-ll-lp-upgrades__heading {
	color: var(--twx-white);
}

.twx-ll-lp-upgrades__text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 34rem;
	margin-bottom: var(--twx-space-lg);
}

.twx-ll-lp-upgrades__list {
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.twx-ll-lp-upgrades__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	font-weight: 600;
}

.twx-ll-lp-upgrades__plus {
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(0, 168, 168, 0.2);
	color: var(--twx-aqua);
	font-weight: 900;
	font-size: 1rem;
	flex-shrink: 0;
}

@media (min-width: 56em) {
	.twx-ll-lp-upgrades__inner {
		grid-template-columns: 1fr 1fr;
	}

	.twx-ll-lp-upgrades__list {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------
 * 9. Domain section
 * ---------------------------------------------------------------- */

.twx-ll-lp-domain__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--twx-space-lg);
	flex-direction: column;
}

.twx-ll-lp-domain__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--twx-white);
	color: var(--twx-teal-dark);
	box-shadow: var(--twx-shadow-sm);
}

.twx-ll-lp-domain__icon svg {
	width: 2rem;
	height: 2rem;
}

.twx-ll-lp-domain__text {
	color: var(--twx-navy);
	max-width: 48rem;
}

@media (min-width: 48em) {
	.twx-ll-lp-domain__inner {
		flex-direction: row;
		align-items: center;
	}
}

/* -------------------------------------------------------------------
 * 10. AI section
 * ---------------------------------------------------------------- */

.twx-ll-lp-ai__inner {
	display: grid;
	gap: var(--twx-space-xl);
	grid-template-columns: 1fr;
	align-items: center;
}

.twx-ll-lp-ai__list {
	list-style: none;
	display: grid;
	gap: var(--twx-space-md);
	margin-top: var(--twx-space-md);
}

.twx-ll-lp-ai__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.97rem;
	color: var(--twx-text);
}

.twx-ll-lp-ai__bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--twx-aqua);
	color: var(--twx-teal-dark);
	margin-top: 0.1rem;
}

.twx-ll-lp-ai__bullet svg {
	width: 0.95rem;
	height: 0.95rem;
}

.twx-ll-lp-ai__badge {
	display: flex;
	justify-content: center;
	align-items: center;
}

.twx-ll-lp-ai__badge-img {
	width: 100%;
	max-width: 16rem;
	height: auto;
	display: block;
	filter: drop-shadow(0 18px 40px rgba(0, 168, 168, 0.35));
}

@media (min-width: 56em) {
	.twx-ll-lp-ai__inner {
		grid-template-columns: 1fr auto;
		gap: var(--twx-space-xl);
	}
}

/* -------------------------------------------------------------------
 * 11. FAQ accordion
 * ---------------------------------------------------------------- */

.twx-ll-lp-faq__list {
	max-width: 52rem;
	margin-inline: auto;
	display: grid;
	gap: 0.4rem;
}

.twx-ll-lp-faq__item {
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius-sm);
	overflow: hidden;
}

.twx-ll-lp-faq__question {
	width: 100%;
	background: none;
	border: 0;
	padding: var(--twx-space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--twx-space-sm);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: var(--twx-navy);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.twx-ll-lp-faq__question:hover {
	background-color: var(--twx-light);
}

.twx-ll-lp-faq__question[aria-expanded="true"] {
	background-color: var(--twx-aqua);
	color: var(--twx-navy);
}

.twx-ll-lp-faq__arrow {
	flex-shrink: 0;
	color: var(--twx-teal-dark);
	transition: transform 0.2s ease;
}

.twx-ll-lp-faq__arrow svg {
	width: 1.2rem;
	height: 1.2rem;
}

.twx-ll-lp-faq__question[aria-expanded="true"] .twx-ll-lp-faq__arrow {
	transform: rotate(180deg);
}

.twx-ll-lp-faq__answer {
	padding: 0 var(--twx-space-md) var(--twx-space-md);
	background-color: var(--twx-light);
}

.twx-ll-lp-faq__answer p {
	color: var(--twx-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* -------------------------------------------------------------------
 * 12. Intake form ([twx_local_launch_intake_form])
 *
 * Inherits the base field styles from main.css; adds layout, fieldset
 * groups, checkbox grid, and dark-background card wrapper for the
 * navy CTA section.
 * ---------------------------------------------------------------- */

/* White card wrapper inside the navy CTA section */
.twx-ll-lp-cta__form-wrap {
	background-color: var(--twx-white);
	border-radius: var(--twx-radius);
	box-shadow: 0 32px 80px rgba(6, 27, 51, 0.45);
	padding: var(--twx-space-xl) var(--twx-space-lg);
	color: var(--twx-text);
}

.twx-ll-intake-form {
	display: grid;
	gap: var(--twx-space-lg);
}

/* Fieldset sections */
.twx-ll-intake-fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

.twx-ll-intake-legend {
	display: block;
	width: 100%;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--twx-teal-dark);
	padding-bottom: var(--twx-space-sm);
	margin-bottom: var(--twx-space-sm);
	border-bottom: 1px solid var(--twx-border);
}

/* Two-column grid inside each fieldset on wider screens */
.twx-ll-intake-grid {
	display: grid;
	gap: var(--twx-space-sm);
	grid-template-columns: 1fr;
}

.twx-ll-intake-grid .twx-ll-field {
	margin: 0;
}

.twx-ll-intake-grid .twx-ll-field--full {
	grid-column: 1 / -1;
}

.twx-ll-intake-grid textarea {
	width: 100%;
	min-height: 5rem;
	resize: vertical;
}

@media (min-width: 48em) {
	.twx-ll-intake-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Checkbox group */
.twx-ll-intake-checks {
	border: 1px solid var(--twx-border);
	border-radius: var(--twx-radius-sm);
	padding: var(--twx-space-md);
	margin: 0;
}

.twx-ll-intake-checks legend {
	padding: 0 0.5rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--twx-navy);
}

.twx-ll-intake-checks__grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
	margin-top: var(--twx-space-sm);
}

.twx-ll-intake-checks__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	color: var(--twx-text);
	cursor: pointer;
}

.twx-ll-intake-checks__label input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	accent-color: var(--twx-teal);
}

@media (min-width: 40em) {
	.twx-ll-intake-checks__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.twx-ll-intake-checks__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Submit button: full width inside the intake form */
.twx-ll-landing-page .twx-ll-intake-form .twx-ll-submit {
	margin: var(--twx-space-xs) 0 0;
}

.twx-ll-landing-page .twx-ll-intake-form .twx-ll-submit .twx-ll-button {
	width: 100%;
	border: 0;
}

/* Helper text beneath intake form fields */
.twx-ll-field-hint {
	display: block;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.62);
	margin-top: 0.3rem;
	line-height: 1.4;
}

/*
 * Ensure the [hidden] attribute wins over display:block above.
 * Required because some browsers set [hidden]{display:none} without !important
 * in their UA stylesheet, allowing class-level display values to override it.
 */
.twx-ll-field-hint[hidden] {
	display: none !important;
}

/* Contextual highlight variant (e.g. "not sure" note) */
.twx-ll-field-hint--highlight {
	color: var(--twx-aqua, #5ec8c8);
}

/* Visual emphasis on Desired new domain when "buy_new" is selected */
.twx-ll-field--highlighted {
	border-radius: 6px;
	padding: var(--twx-space-xs);
	background: rgba(94, 200, 200, 0.08);
	border: 1px solid rgba(94, 200, 200, 0.35);
	margin-inline: calc( -1 * var(--twx-space-xs) );
}

.twx-ll-field--highlighted label {
	color: var(--twx-aqua, #5ec8c8);
	font-weight: 600;
}

/* Success card inside the navy CTA section */
.twx-ll-intake-success {
	background-color: var(--twx-aqua);
	border-color: var(--twx-teal);
	padding: var(--twx-space-xl);
	text-align: center;
}

/* Adjust CTA layout to two columns when the form is present */
.twx-ll-lp-cta__inner {
	display: grid;
	gap: var(--twx-space-xl);
	grid-template-columns: 1fr;
	align-items: start;
	position: relative;
	z-index: 1;
}

@media (min-width: 60em) {
	.twx-ll-lp-cta__inner {
		grid-template-columns: 5fr 7fr;
	}

	.twx-ll-lp-cta__header {
		text-align: left;
		margin: 0;
	}
}

.twx-ll-lp-cta__heading {
	color: var(--twx-white);
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: var(--twx-space-xs);
}

.twx-ll-lp-cta__text {
	color: rgba(255, 255, 255, 0.82);
}

/* Fallback buttons (plugin inactive) */
.twx-ll-lp-cta__contact-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--twx-space-sm);
}

.twx-ll-lp-cta__divider {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.9rem;
}

/* Top-edge wave decoration */
.twx-ll-lp-cta__wave {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--twx-sand);
	line-height: 0;
}

.twx-ll-lp-cta__wave svg {
	width: 100%;
	height: clamp(28px, 4.5vw, 64px);
}

/* -------------------------------------------------------------------
 * 13. Landing footer
 * ---------------------------------------------------------------- */

.twx-ll-lp-footer__inner {
	display: grid;
	gap: var(--twx-space-lg);
	grid-template-columns: 1fr;
	padding-block: var(--twx-space-xl) var(--twx-space-lg);
	align-items: start;
}

.twx-ll-lp-footer__name {
	display: block;
	color: var(--twx-white);
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: var(--twx-space-xs);
}

.twx-ll-lp-footer__tagline {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.88rem;
	max-width: 22rem;
	margin: 0;
}

.twx-ll-lp-footer__nav .twx-ll-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--twx-space-md);
}

@media (min-width: 48em) {
	.twx-ll-lp-footer__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

/* ── Starter coming-soon pills ───────────────────────────────────────────── */

.twx-ll-lp-starters__coming-soon {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.twx-ll-lp-starters__coming-soon-label {
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--twx-color-text-muted, #7a8aa0);
	margin: 0 0 20px;
}

.twx-ll-lp-starters__soon-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.twx-ll-lp-starter-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--twx-color-surface, #f4f6f9);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 40px;
	font-size: 0.875rem;
	color: var(--twx-color-text, #1e2d3d);
	transition: background 0.15s;
}

.twx-ll-lp-starter-pill__icon {
	display: flex;
	align-items: center;
	color: var(--twx-color-text-muted, #7a8aa0);
}

.twx-ll-lp-starter-pill__icon svg {
	width: 15px;
	height: 15px;
}

.twx-ll-lp-starter-pill__label {
	font-weight: 500;
}

.twx-ll-lp-starter-pill__badge {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 168, 168, 0.8);
	background: rgba(0, 168, 168, 0.08);
	padding: 2px 7px;
	border-radius: 20px;
}

/* -------------------------------------------------------------------
 * /start/ wizard page — light shell (not the dark final-CTA band)
 * ---------------------------------------------------------------- */
.twx-ll-wizard-page {
	background:
		radial-gradient(90% 60% at 10% 0%, rgba(0, 168, 168, 0.10), transparent 55%),
		radial-gradient(70% 50% at 100% 10%, rgba(13, 39, 68, 0.06), transparent 50%),
		#f7fafc;
}

.twx-ll-wizard-shell {
	min-height: calc(100vh - 140px);
	padding: 2.5rem 0 4rem;
}

.twx-ll-wizard-shell__inner {
	max-width: 720px;
	margin: 0 auto;
}

.twx-ll-wizard-shell__header {
	text-align: center;
	margin-bottom: 2rem;
}

.twx-ll-wizard-shell__heading {
	color: var(--twx-navy, #0d2744);
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	font-weight: 900;
	line-height: 1.15;
	margin: 0.35rem 0 0.75rem;
}

.twx-ll-wizard-shell__text {
	color: #475569;
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 36rem;
}

.twx-ll-wizard-shell__form {
	background: #fff;
	border: 1px solid rgba(13, 39, 68, 0.08);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(13, 39, 68, 0.08);
	padding: 1.5rem 1.25rem 0.5rem;
}

@media (min-width: 640px) {
	.twx-ll-wizard-shell__form {
		padding: 2rem 2rem 0.75rem;
	}
}

/* Wizard cards/inputs sit on white — keep text readable if parent inherits. */
.twx-ll-wizard-page .twx-wiz {
	padding-bottom: 1.5rem;
}
.twx-ll-wizard-page .twx-wiz-heading,
.twx-ll-wizard-page .twx-wiz-label {
	color: #0f172a;
}
.twx-ll-wizard-page .twx-wiz-sub {
	color: #64748b;
}