/* ==========================================================================
   BOSSMAXX — sales layer (BossMaxx Commerce plugin)
   Lander sections, article CTAs, promo bar. Extends the theme design
   system: same tokens, same HUD voice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Promo bar (site-wide except front page)
   -------------------------------------------------------------------------- */

.promo-bar {
	background: var(--gold);
	color: #0a0a0d;
}

.promo-bar__text {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.promo-bar__label { opacity: 0.65; font-weight: 400; }

.promo-bar__link { color: #0a0a0d; border-bottom: 2px solid #0a0a0d; }
.promo-bar__link:hover { color: #0a0a0d; opacity: 0.7; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn--xl {
	font-size: 14px;
	padding: 18px 40px;
}

/* --------------------------------------------------------------------------
   Article end CTA + in-article plug
   -------------------------------------------------------------------------- */

.cta-block {
	margin: 48px 0 8px;
	background:
		linear-gradient(135deg, rgba(240, 185, 11, 0.12), transparent 55%),
		var(--surface);
	border: 1px solid rgba(240, 185, 11, 0.35);
	clip-path: var(--clip);
	padding: 34px 34px 30px;
}

.cta-block__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
}

.cta-block__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 3.6vw, 34px);
	letter-spacing: 0.03em;
	margin: 0 0 12px;
}

.cta-block__sub { color: var(--muted); margin: 0 0 24px; max-width: 560px; }

.cta-block__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.cta-block__more {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--border);
}

.cta-block__more:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* In-article plug: a "from the Protocol" drop inside the content flow. */

.protocol-plug {
	background: var(--surface);
	border: 1px dashed rgba(240, 185, 11, 0.45);
	clip-path: var(--clip);
	padding: 22px 26px;
	margin: 36px 0;
}

.protocol-plug__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
}

.protocol-plug p:last-child { margin-bottom: 0; }

.protocol-plug a {
	color: var(--gold);
	border-bottom: 1px solid rgba(240, 185, 11, 0.4);
}

.protocol-plug a:hover { border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   Lander: hero
   -------------------------------------------------------------------------- */

.offer-hero { padding: 90px 0 70px; text-align: center; }

.offer-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}

.offer-hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(38px, 6.5vw, 68px);
	line-height: 1.08;
	letter-spacing: 0.03em;
	margin: 0 auto 22px;
	max-width: 900px;
}

.offer-hero__title-accent { color: var(--gold); }

.offer-hero__sub {
	max-width: 640px;
	margin: 0 auto 40px;
	color: var(--muted);
	font-size: 18px;
}

.offer-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.offer-hero__micro {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 20px 0 0;
}

/* --------------------------------------------------------------------------
   Lander: pain cases
   -------------------------------------------------------------------------- */

.pain { padding: 20px 0 70px; }

.pain__inner { max-width: 1000px; margin: 0 auto; text-align: center; }

.pain__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 36px;
	text-align: left;
}

.pain__case {
	background: var(--surface);
	border: 1px solid var(--border);
	clip-path: var(--clip);
	padding: 24px 24px 20px;
}

.pain__case-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
}

.pain__case p:last-child { color: var(--muted); font-size: 15px; margin: 0; }

.pain__verdict {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(19px, 2.8vw, 26px);
	letter-spacing: 0.03em;
	max-width: 700px;
	margin: 40px auto 0;
}

/* --------------------------------------------------------------------------
   Lander: free vs protocol gap
   -------------------------------------------------------------------------- */

.gap { padding: 10px 0 70px; }

.gap__inner { max-width: 900px; margin: 0 auto; }

.gap .section-head__eyebrow,
.gap .section-head__title,
.chapters .section-head__eyebrow,
.chapters .section-head__title,
.qualifiers .section-head__eyebrow,
.qualifiers .section-head__title { text-align: center; display: block; }

.gap__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 36px;
}

.gap__col {
	background: var(--surface);
	border: 1px solid var(--border);
	clip-path: var(--clip);
	padding: 26px 28px;
}

.gap__col--pro {
	border: 1px solid rgba(240, 185, 11, 0.4);
	background:
		linear-gradient(135deg, rgba(240, 185, 11, 0.09), transparent 55%),
		var(--surface);
}

.gap__col-title {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.gap__col--free .gap__col-title { color: var(--muted); }
.gap__col--pro .gap__col-title { color: var(--gold); }

.gap__col ul { list-style: none; margin: 0; padding: 0; }

.gap__col li {
	padding: 9px 0 9px 22px;
	position: relative;
	border-bottom: 1px dashed var(--border);
	font-size: 15px;
}

.gap__col li:last-child { border-bottom: 0; }

.gap__col li::before {
	content: '//';
	position: absolute;
	left: 0;
	font-family: var(--font-mono);
	font-size: 12px;
}

.gap__col--free li { color: var(--muted); }
.gap__col--free li::before { color: var(--border); }
.gap__col--pro li::before { color: var(--gold); }

/* --------------------------------------------------------------------------
   Lander: chapter map
   -------------------------------------------------------------------------- */

.chapters { padding: 10px 0 70px; }

.chapters__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 36px;
}

.chapter-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 3px solid var(--accent);
	clip-path: var(--clip);
	padding: 24px 24px 22px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chapter-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 50px -20px var(--accent);
}

.chapter-card__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	margin-bottom: 14px;
}

.chapter-card__num {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--accent);
	font-size: 15px;
}

.chapter-card__axis { color: var(--muted); }

.chapter-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 24px;
	margin: 0 0 10px;
}

.chapter-card__teaser { color: var(--muted); font-size: 15px; margin: 0; }

.chapters__bookends {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 22px;
}

.chapters__bookend {
	background:
		linear-gradient(135deg, rgba(240, 185, 11, 0.1), transparent 55%),
		var(--surface);
	border: 1px solid rgba(240, 185, 11, 0.35);
	clip-path: var(--clip);
	padding: 24px 26px;
}

.chapters__bookend-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
}

.chapters__bookend p:last-child { color: var(--muted); font-size: 15px; margin: 0; }
.chapters__bookend strong { color: var(--text); }

/* --------------------------------------------------------------------------
   Lander: stack + pricing
   -------------------------------------------------------------------------- */

.stack { padding: 10px 0 70px; }

.stack__inner {
	max-width: 780px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	clip-path: var(--clip);
	padding: 44px 44px 40px;
	--accent: var(--gold);
}

.stack .section-head__eyebrow,
.stack .section-head__title { text-align: left; display: block; }

.stack__rows { margin: 26px 0 10px; }

.pricing { text-align: center; padding-top: 34px; }

.pricing__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 6px;
}

.pricing__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(56px, 9vw, 84px);
	line-height: 1;
	color: var(--gold);
	margin: 0 0 10px;
	text-shadow: 0 0 50px rgba(240, 185, 11, 0.25);
}

.pricing__sub { color: var(--muted); font-size: 14.5px; margin: 0 auto 26px; max-width: 440px; }

.pricing__guarantee {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   Lander: qualifiers
   -------------------------------------------------------------------------- */

.qualifiers { padding: 10px 0 70px; }

.qualifiers__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	max-width: 900px;
	margin: 36px auto 0;
}

.qualifiers__col {
	background: var(--surface);
	border: 1px solid var(--border);
	clip-path: var(--clip);
	padding: 26px 28px;
}

.qualifiers__col--yes { border-top: 3px solid #4ee6b0; }
.qualifiers__col--no { border-top: 3px solid var(--muted); }

.qualifiers__col-title {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.qualifiers__col--yes .qualifiers__col-title { color: #4ee6b0; }
.qualifiers__col--no .qualifiers__col-title { color: var(--muted); }

.qualifiers__col ul { list-style: none; margin: 0; padding: 0; }

.qualifiers__col li {
	padding: 9px 0;
	border-bottom: 1px dashed var(--border);
	font-size: 15px;
	color: var(--muted);
}

.qualifiers__col li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Lander: guarantee
   -------------------------------------------------------------------------- */

.guarantee { padding: 10px 0 70px; }

.guarantee__inner {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	background:
		linear-gradient(135deg, rgba(78, 230, 176, 0.1), transparent 55%),
		var(--surface);
	border: 1px solid rgba(78, 230, 176, 0.3);
	clip-path: var(--clip);
	padding: 52px 48px;
}

.guarantee__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #4ee6b0;
	margin: 0 0 14px;
}

.guarantee__title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.03em;
	font-size: clamp(26px, 4vw, 40px);
	margin: 0 0 14px;
}

.guarantee__sub { color: var(--muted); max-width: 560px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Lander: FAQ
   -------------------------------------------------------------------------- */

.faq { padding: 10px 0 70px; }

.faq__inner { max-width: 780px; margin: 0 auto; }

.faq .section-head__eyebrow,
.faq .section-head__title { text-align: center; display: block; }

.faq__list { margin-top: 30px; display: grid; gap: 12px; }

.faq__item {
	background: var(--surface);
	border: 1px solid var(--border);
	clip-path: var(--clip);
	padding: 20px 26px;
}

.faq__item summary {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.02em;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 30px;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-family: var(--font-mono);
	font-size: 18px;
	color: var(--gold);
}

.faq__item[open] summary::after { content: '\2212'; }

.faq__item summary:hover { color: var(--gold); }

.faq__item p { color: var(--muted); font-size: 15px; margin: 14px 0 0; }

.faq__final { text-align: center; padding-top: 44px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.pain__grid, .chapters__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.pain__grid, .chapters__grid, .gap__cols, .qualifiers__cols, .chapters__bookends { grid-template-columns: 1fr; }
	.offer-hero { padding: 60px 0 50px; }
	.stack__inner { padding: 32px 24px 30px; }
	.guarantee__inner { padding: 36px 24px; }
	.cta-block { padding: 26px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.chapter-card { transition: none; }
}

/* --------------------------------------------------------------------------
   WooCommerce reskin — checkout, cart, order received, account
   Dark HUD treatment so the money pages stay on-brand.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb { display: none; }

.woocommerce-page .entry-title,
.woocommerce-page .post-title { display: none; }

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page .select2-container .select2-selection {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	padding: 12px 14px;
	border-radius: 0;
	height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 1px var(--gold);
}

.woocommerce form .form-row ::placeholder { color: var(--muted); opacity: 0.7; }

.woocommerce form.checkout h3,
.woocommerce-page .woocommerce-order-details__title,
.woocommerce-page .woocommerce-column__title,
.woocommerce-page .woocommerce-additional-fields h3 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.03em;
	font-size: 22px;
	color: var(--text);
}

.woocommerce form.checkout h3#order_review_heading {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
}

.woocommerce table.shop_table {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
}

.woocommerce table.shop_table th {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	border-color: var(--border);
}

.woocommerce table.shop_table td { border-color: var(--border); }

.woocommerce .checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: var(--surface-2);
	color: var(--text);
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--surface-2);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--border);
}

.woocommerce-checkout #payment ul.payment_methods li {
	font-size: 15px;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	background: var(--gold);
	color: #0a0a0d;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: 0;
	border: 0;
	width: 100%;
	float: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--gold);
	color: #0a0a0d;
	transform: translateY(-2px);
	filter: brightness(1.12);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--surface);
	border-top-color: var(--gold);
	color: var(--text);
	border-radius: 0;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold); }

.woocommerce-error { border-top-color: #ff4d2e; }

.woocommerce a.remove { color: #ff4d2e !important; }

.woocommerce .product-name a { color: var(--text); }

.woocommerce-order-received .woocommerce-order {
	max-width: 780px;
	margin: 0 auto;
}

.woocommerce .woocommerce-order-details table.shop_table,
.woocommerce .woocommerce-customer-details address {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0;
	color: var(--text);
	padding: 22px;
}

.woocommerce .woocommerce-downloadable-product table.shop_table td,
.woocommerce .woocommerce-downloadable-product table.shop_table th {
	border-color: var(--border);
}

/* Stripe + Airwallex field containers */

.woocommerce-checkout .stripe-card-border,
.woocommerce .wc-stripe-elements-field,
.woocommerce .awx-card-field,
.woocommerce iframe[name*="airwallex"] {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
}

/* The checkout page inside the bossmaxx article shell */

.woocommerce-page article.page,
.woocommerce-page .article { padding-top: 40px; }

.woocommerce-page .article__body { font-size: 16px; }

/* --------------------------------------------------------------------------
   Conversion fixes (v1.2)
   -------------------------------------------------------------------------- */

/* The end-of-article CTA lives inside .article__body, whose link color
   rules would paint the gold button's label teal and underline it. */

.article__body .cta-block .btn.btn--primary,
.article__body .cta-block .btn.btn--primary:hover {
	color: #0a0a0d;
	border-bottom: 0;
}

.article__body .cta-block .cta-block__more { border-bottom: 1px solid var(--border); }

/* Lander: compact the blog header so the pitch lands above the fold. */

body.home .site-header { padding-top: 24px; }
body.home .site-branding { padding: 0 0 18px; }
body.home .site-title { font-size: clamp(34px, 5.5vw, 56px); }
body.home .site-tagline { margin-top: 8px; }
body.home .branding-eyebrow { margin-bottom: 6px; }
body.home .pillar-nav__subs { display: none; }
body.home .pillar-nav__col { padding: 12px 16px 14px; }

/* Money pages: strip the editorial header down to a slim wordmark bar.
   Every pixel of checkout above the form costs sales. */

body.woocommerce-page .site-header { padding-top: 20px; }
body.woocommerce-page .site-branding { padding: 0 0 14px; }
body.woocommerce-page .branding-eyebrow,
body.woocommerce-page .site-tagline,
body.woocommerce-page .pillar-nav,
body.woocommerce-page .nav-toggle { display: none; }
body.woocommerce-page .site-title { font-size: clamp(26px, 4vw, 40px); }
body.woocommerce-page .header-scanline { opacity: 0.35; }