/* jab-core-blocks — per-block styles (continued). */

/* ============================================================
 *  Block: quick-picks — v0.4.0 editorial refresh
 *  White card + soft navy shadow + pill badge + tier-coded top stripe.
 *  TOP PICK gets gold dominance; BEST-* gets sage; PREMIUM gets navy.
 * ============================================================ */
.jab-quick-picks { margin-block: var(--brand-space-6); }
.jab-quick-picks__heading {
	font-family: var(--brand-font-display);
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 500;
	color: var(--brand-primary);
	margin: 0 0 var(--brand-space-5);
}
.jab-quick-picks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--brand-space-5); }
@media (max-width: 768px) { .jab-quick-picks__grid { grid-template-columns: 1fr; } }

.jab-quick-picks__card {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-6) var(--brand-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-3);
	box-shadow: var(--brand-shadow-sm);
	transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms cubic-bezier(.2,.8,.2,1);
	position: relative;
	overflow: hidden;
}
.jab-quick-picks__card::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sage-500, #7C9082);
	transition: height 240ms cubic-bezier(.2,.8,.2,1);
}
.jab-quick-picks__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(14, 31, 58, .10), 0 2px 6px rgba(14, 31, 58, .06);
}
.jab-quick-picks__card:hover::before { height: 4px; }

/* TIER: top-pick → gold dominance. Stronger lift + gold accent. */
.jab-quick-picks__card[data-tier="top-pick"],
.jab-quick-picks__card[data-tier="editor-s-choice"] {
	border-color: var(--gold-300, #ecd9bd);
	box-shadow: 0 4px 14px rgba(212, 180, 131, 0.20), 0 1px 3px rgba(212, 180, 131, 0.10);
}
.jab-quick-picks__card[data-tier="top-pick"]::before,
.jab-quick-picks__card[data-tier="editor-s-choice"]::before {
	background: var(--brand-accent);
	height: 4px;
}
.jab-quick-picks__card[data-tier="top-pick"] .jab-quick-picks__label,
.jab-quick-picks__card[data-tier="editor-s-choice"] .jab-quick-picks__label {
	background: var(--gold-100, #f7eedd);
	color: var(--gold-700, #8c6a3d);
	border-color: var(--gold-300, #ecd9bd);
}

/* TIER: best-* → sage. Quiet validation. */
.jab-quick-picks__card[data-tier^="best"]::before { background: var(--sage-500, #7C9082); }
.jab-quick-picks__card[data-tier^="best"] .jab-quick-picks__label {
	background: var(--sage-100, #e6ece8);
	color: var(--sage-700, #5c6f63);
	border-color: var(--sage-200, #cfd9d2);
}

/* TIER: premium / luxury → navy. Confident identity. */
.jab-quick-picks__card[data-tier="premium"]::before,
.jab-quick-picks__card[data-tier="luxury"]::before { background: var(--brand-primary); }
.jab-quick-picks__card[data-tier="premium"] .jab-quick-picks__label,
.jab-quick-picks__card[data-tier="luxury"] .jab-quick-picks__label {
	background: var(--brand-bg-light);
	color: var(--brand-primary);
	border-color: var(--brand-border);
}

/* Pill badge (defaults — design-system shape). Tier styles override colours above. */
.jab-quick-picks__label {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	font-family: var(--brand-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--brand-radius-pill);
	line-height: 1.4;
	border: 1px solid var(--brand-border);
	background: var(--brand-bg-light);
	color: var(--brand-primary);
	margin: 0;
}
.jab-quick-picks__label-icon { font-size: 13px; line-height: 1; }
.jab-quick-picks__label-text { display: inline-block; }

.jab-quick-picks__name {
	font-family: var(--brand-font-display);
	font-size: clamp(20px, 2.3vw, 24px);
	font-weight: 600;
	color: var(--brand-primary);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.jab-quick-picks__best-for {
	font-family: var(--brand-font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--sage-700, #5c6f63);
	margin: 0;
	font-size: 16px;
}
.jab-quick-picks__desc {
	color: var(--brand-text-muted);
	margin: 0;
	font-size: var(--brand-text-base);
	line-height: var(--brand-line-height-body);
}
.jab-quick-picks__cta { margin-top: auto; padding-top: var(--brand-space-2); align-self: flex-start; }

.jab-quick-picks--variant-vertical .jab-quick-picks__grid { grid-template-columns: 1fr; gap: var(--brand-space-3); }
.jab-quick-picks--variant-vertical .jab-quick-picks__card { flex-direction: row; align-items: center; gap: var(--brand-space-4); }
.jab-quick-picks--variant-vertical .jab-quick-picks__cta { margin-top: 0; }

/* Block: product-card — v0.4.6 editorial commerce refresh.
   Each product card now feels like a self-contained editorial review (Wirecutter /
   Strategist register), not a paragraph with image. White card + pill badge +
   Cormorant heading + sage italic best-for + bigger gold stars + Cormorant price
   + gold pill CTA. Pros/cons grouped in a tinted container so they read as a
   distinct verdict block within the card. */
.jab-product-card {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border-strong);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-6);
	margin-block: var(--brand-space-6);
	box-shadow: var(--brand-shadow-sm);
	position: relative;
	transition: box-shadow 240ms cubic-bezier(.2,.8,.2,1);
}
.jab-product-card:hover { box-shadow: 0 6px 18px rgba(14, 31, 58, 0.10), 0 2px 6px rgba(14, 31, 58, 0.06); }

/* Badge: pill, floated top-right. Defaults gold (TOP PICK tier). */
.jab-product-card__badge {
	position: absolute;
	top: var(--brand-space-5);
	right: var(--brand-space-5);
	display: inline-flex;
	align-items: center;
	font-family: var(--brand-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--brand-radius-pill);
	line-height: 1.4;
	border: 1px solid var(--gold-300, #ecd9bd);
	background: var(--gold-100, #f7eedd);
	color: var(--gold-700, #8c6a3d);
	z-index: 2;
	white-space: nowrap;
}
.jab-product-card__badge--top-pick,
.jab-product-card__badge--editors-choice { background: var(--gold-100, #f7eedd); color: var(--gold-700, #8c6a3d); border-color: var(--gold-300, #ecd9bd); }
.jab-product-card__badge--best-value,
.jab-product-card__badge--budget        { background: var(--sage-100, #e6ece8); color: var(--sage-700, #5c6f63); border-color: var(--sage-200, #cfd9d2); }
.jab-product-card__badge--premium,
.jab-product-card__badge--luxury        { background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border); }

.jab-product-card__heading {
	font-family: var(--brand-font-display);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 600;
	color: var(--brand-primary);
	margin: 0 0 var(--brand-space-2);
	line-height: 1.2;
	letter-spacing: -0.01em;
	padding-right: 110px;                        /* reserved gutter for badge */
}
.jab-product-card__heading a { color: var(--brand-primary); text-decoration: none; transition: color 240ms cubic-bezier(.2,.8,.2,1); }
.jab-product-card__heading a:hover { color: var(--rose-500, #A85D5D); }

.jab-product-card__best-for {
	font-family: var(--brand-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 17px;
	color: var(--sage-700, #5c6f63);
	margin: 0 0 var(--brand-space-3);
	max-width: 540px;
}

.jab-product-card__rating { margin: 0 0 var(--brand-space-4); }
.jab-product-card__rating .jab-rating { font-size: var(--brand-text-base); }
.jab-product-card__rating .jab-rating__stars { font-size: 20px; letter-spacing: 2px; }

.jab-product-card__layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--brand-space-6);
	align-items: start;
}
.jab-product-card--preset-horizontal-image-right .jab-product-card__layout { grid-template-columns: 1fr 320px; direction: rtl; }
.jab-product-card--preset-horizontal-image-right .jab-product-card__layout > * { direction: ltr; }
.jab-product-card--preset-vertical-card .jab-product-card__layout,
.jab-product-card--preset-mini-tile .jab-product-card__layout,
.jab-product-card--variant-vertical .jab-product-card__layout { grid-template-columns: 1fr; }
.jab-product-card--preset-mini-tile { display: flex; align-items: center; gap: var(--brand-space-3); padding: var(--brand-space-3); }
.jab-product-card--preset-mini-tile .jab-product-card__image img { width: 56px; height: 56px; border-radius: 50%; box-shadow: none; }
@media (max-width: 768px) { .jab-product-card__layout { grid-template-columns: 1fr !important; } }

.jab-product-card__text > p,
.jab-product-card__text > div > p { font-size: 16px; line-height: 1.65; color: var(--brand-text); margin: 0 0 var(--brand-space-4); }

/* Pros/Cons: grouped in a pearl-tinted container — reads as a distinct verdict box. */
.jab-product-card__proscons-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--brand-space-5);
	margin: var(--brand-space-4) 0;
	padding: var(--brand-space-4) var(--brand-space-5);
	background: var(--brand-bg-light);
	border-radius: var(--brand-radius-sm);
}
.jab-product-card__proscons-label {
	margin: 0 0 var(--brand-space-3);
	font-family: var(--brand-font-body);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--sage-700, #5c6f63);
}
.jab-product-card__proscons { list-style: none; padding: 0; margin: 0; }
.jab-product-card__proscons li {
	padding: var(--brand-space-1) 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--brand-text);
	position: relative;
	padding-left: 22px;
}
.jab-product-card__proscons--pros li::before {
	content: "✓";
	color: var(--brand-success);
	font-weight: 700;
	position: absolute; left: 0; top: 1px;
	font-size: 14px;
}
.jab-product-card__proscons--cons li::before {
	content: "×";
	color: var(--rose-500, #A85D5D);
	font-weight: 700;
	position: absolute; left: 0; top: -1px;
	font-size: 18px;
	line-height: 1;
}
@media (max-width: 768px) { .jab-product-card__proscons-grid { grid-template-columns: 1fr; gap: var(--brand-space-3); padding: var(--brand-space-4); } }

/* Price: Cormorant numeric display, navy primary, rose for sale price. */
.jab-product-card__price {
	font-family: var(--brand-font-display);
	font-size: clamp(26px, 2.8vw, 32px);
	font-weight: 600;
	color: var(--brand-primary);
	margin: var(--brand-space-4) 0;
	display: flex;
	align-items: baseline;
	gap: var(--brand-space-3);
	line-height: 1;
}
.jab-product-card__price-sale { color: var(--rose-500, #A85D5D); }
.jab-product-card__price-original { font-size: 18px; opacity: 0.55; font-weight: 400; }

/* CTA: gold pill (v0.4.0 button system) but larger for commerce gravity. */
.jab-product-card__cta { margin-top: var(--brand-space-3); padding: 14px 28px; font-size: 16px; }

/* Image: photography prominence — bigger, navy-tinted shadow, no rounded-square box. */
.jab-product-card__image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--brand-radius-md);
	display: block;
	box-shadow: 0 10px 24px rgba(14, 31, 58, 0.12);
}

/* Separator: removed — the card has its own border now, hr is visual noise. */
.jab-product-card__separator { display: none; }

/* Block: buy-cta */
.jab-buy-cta { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-md); box-shadow: var(--brand-shadow-sm); padding: var(--brand-space-6); max-width: 720px; }
.jab-buy-cta--variant-column.jab-buy-cta--col-full { margin-inline: auto; }
.jab-buy-cta__progress { display: flex; align-items: center; justify-content: space-between; font-size: var(--brand-text-sm); color: var(--brand-text-muted); margin-bottom: var(--brand-space-4); }
.jab-buy-cta__progress-bar { flex: 1; height: 4px; background: var(--brand-border); border-radius: var(--brand-radius-pill); margin-left: var(--brand-space-3); overflow: hidden; }
.jab-buy-cta__progress-bar-fill { height: 100%; background: var(--brand-accent); transition: width 240ms cubic-bezier(.2,.8,.2,1); }
.jab-buy-cta__progress-label { font-family: var(--brand-font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-700, #5c6f63); font-weight: 600; }
.jab-buy-cta__step { display: none; }
.jab-buy-cta__step.is-active { display: block; }

/* Step 1 hides the progress indicator — first appearance is on Step 2. */
.jab-buy-cta[data-current-step="1"] .jab-buy-cta__progress { display: none; }

.jab-buy-cta__product { display: flex; gap: var(--brand-space-4); align-items: center; margin-bottom: var(--brand-space-4); }
.jab-buy-cta__product-img img { width: 80px; height: 80px; border-radius: var(--brand-radius-sm); }
.jab-buy-cta__product-name { font-family: var(--brand-font-display); font-weight: var(--brand-font-weight-bold); font-size: var(--brand-text-lg); color: var(--brand-text); margin: 0; }
.jab-buy-cta__product-price { color: var(--brand-text-muted); font-size: var(--brand-text-base); }

/* Step 1 hero — 2-col layout: title/bullets/CTA left, image stack right. */
.jab-buy-cta__product--hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--brand-space-6); align-items: center; margin-bottom: 0; }
.jab-buy-cta__product-info { display: flex; flex-direction: column; gap: var(--brand-space-3); }
.jab-buy-cta__product--hero .jab-buy-cta__product-name { font-size: var(--brand-text-2xl); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-primary); }
.jab-buy-cta__product--hero .jab-buy-cta__product-price { font-size: var(--brand-text-lg); color: var(--brand-text); font-weight: var(--brand-font-weight-semibold); margin: 0; }
.jab-buy-cta__product-desc { font-size: var(--brand-text-sm); color: var(--brand-text-muted); margin: 0; line-height: 1.5; }
.jab-buy-cta__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--brand-space-2); }
.jab-buy-cta__bullets li { position: relative; padding-left: var(--brand-space-4); font-size: var(--brand-text-sm); color: var(--brand-text); line-height: 1.4; }
.jab-buy-cta__bullets li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--brand-text); font-weight: var(--brand-font-weight-bold); }
.jab-buy-cta__bullets li:first-child { text-transform: uppercase; font-size: var(--brand-text-xs); letter-spacing: 0.06em; color: var(--brand-text-muted); }
.jab-buy-cta__actions--hero { justify-content: flex-start; margin-top: var(--brand-space-3); }

/* Image stack — primary always shown, secondary peeks behind at offset+rotation.
   !important on critical positioning to defeat theme overrides (Kadence + GeneratePress
   sometimes apply position:static on figure/.wp-block-image children). min-height +
   height kept as belt-and-suspenders if aspect-ratio support is missing or stripped. */
.jab-buy-cta__image-stack { position: relative !important; width: 100%; max-width: 280px; min-height: 280px; aspect-ratio: 4 / 5; margin-inline: auto; display: block; }
.jab-buy-cta__image-stack-item { position: absolute !important; inset: 0 !important; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: var(--brand-radius-md); overflow: hidden; box-shadow: var(--brand-shadow-md); background: var(--brand-bg-light); margin: 0; }
.jab-buy-cta__image-stack-item img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; margin: 0; }
.jab-buy-cta__image-stack-item--front { z-index: 2; }
.jab-buy-cta__image-stack-item--back { z-index: 1; transform: translate(8%, -4%) rotate(4deg); opacity: 0.92; }
.jab-buy-cta__image-stack--has-secondary .jab-buy-cta__image-stack-item--front { transform: translate(-4%, 4%) rotate(-2deg); }

/* Tint overlay — optional brand-coloured wash over the image stack. */
.jab-buy-cta__image-stack--tint .jab-buy-cta__image-stack-item::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--brand-primary) 28%, transparent); mix-blend-mode: multiply; pointer-events: none; border-radius: inherit; }

/* Mobile: collapse hero to single column, drop image rotation. */
@media (max-width: 768px) {
	.jab-buy-cta__product--hero { grid-template-columns: 1fr; gap: var(--brand-space-5); }
	.jab-buy-cta__image-stack { max-width: 220px; }
	.jab-buy-cta__image-stack--has-secondary .jab-buy-cta__image-stack-item--front,
	.jab-buy-cta__image-stack-item--back { transform: none; }
	.jab-buy-cta__image-stack-item--back { display: none; }
}
.jab-buy-cta__field { display: flex; flex-direction: column; gap: var(--brand-space-1); margin-bottom: var(--brand-space-3); }
.jab-buy-cta__field label { font-size: var(--brand-text-sm); font-weight: var(--brand-font-weight-semibold); color: var(--brand-text); }
.jab-buy-cta__field input { font: inherit; font-family: var(--brand-font-body); padding: 12px 18px; border: 1px solid var(--brand-border-strong); border-radius: var(--brand-radius-pill); background: var(--brand-surface); color: var(--brand-text); transition: border-color 240ms cubic-bezier(.2,.8,.2,1), outline 240ms cubic-bezier(.2,.8,.2,1); }
.jab-buy-cta__field input:focus { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-color: var(--brand-accent); }
.jab-buy-cta__field label { font-family: var(--brand-font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage-700, #5c6f63); font-weight: 600; }
.jab-buy-cta__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--brand-space-3); margin-top: var(--brand-space-4); }
.jab-buy-cta__step--confirmation { background: var(--brand-surface); border: 1px solid var(--sage-200, #cfd9d2); border-radius: var(--brand-radius-md); padding: var(--brand-space-7); text-align: center; }
.jab-buy-cta__step--confirmation .jab-buy-cta__check { color: var(--brand-success); font-size: 48px; line-height: 1; margin: 0 0 var(--brand-space-3); font-weight: 700; }
.jab-buy-cta__step--confirmation h3 { font-family: var(--brand-font-display); font-size: clamp(22px, 2.5vw, 28px); color: var(--brand-primary); margin: 0 0 var(--brand-space-3); font-weight: 600; letter-spacing: -0.01em; }
.jab-buy-cta__step--confirmation p { font-family: var(--brand-font-body); font-size: 16px; color: var(--brand-text); line-height: 1.6; margin: 0 0 var(--brand-space-4); max-width: 480px; margin-inline: auto; }
.jab-buy-cta__expiry-note { font-size: var(--brand-text-sm); color: var(--brand-text-muted); margin: var(--brand-space-3) 0 0; }
.jab-buy-cta__stripe-mount { min-height: 48px; padding: var(--brand-space-3); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-sm); background: var(--brand-surface); }

/* Buy CTA bg_override — dark/contrast variants need child-element text inversion */
.jab-buy-cta--bg-override-accent .jab-buy-cta__product-name,
.jab-buy-cta--bg-override-primary .jab-buy-cta__product-name { color: var(--brand-text-on-dark); }
.jab-buy-cta--bg-override-accent .jab-buy-cta__product-price,
.jab-buy-cta--bg-override-accent .jab-buy-cta__progress-label,
.jab-buy-cta--bg-override-primary .jab-buy-cta__product-price,
.jab-buy-cta--bg-override-primary .jab-buy-cta__progress-label { color: var(--brand-text-on-dark-muted); }
.jab-buy-cta--bg-override-accent .jab-buy-cta__field label,
.jab-buy-cta--bg-override-primary .jab-buy-cta__field label { color: var(--brand-text-on-dark); }
.jab-buy-cta--bg-override-accent .jab-buy-cta__field input,
.jab-buy-cta--bg-override-primary .jab-buy-cta__field input { background: var(--brand-surface); color: var(--brand-text); }
.jab-buy-cta--bg-override-accent .jab-buy-cta__step--confirmation,
.jab-buy-cta--bg-override-primary .jab-buy-cta__step--confirmation { background: rgba(255, 255, 255, 0.1); color: var(--brand-text-on-dark); }
.jab-buy-cta--bg-override-warning { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-warning) 35%, transparent); }
.jab-buy-cta--bg-override-primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 35%, transparent); }

/* Lead Magnet bg_override — text inversion mirrors Buy CTA */
.jab-lead-magnet--bg-override-accent .jab-lead-magnet__headline,
.jab-lead-magnet--bg-override-accent .jab-lead-magnet__sub,
.jab-lead-magnet--bg-override-primary .jab-lead-magnet__headline,
.jab-lead-magnet--bg-override-primary .jab-lead-magnet__sub { color: var(--brand-text-on-dark); }

/* Block: lead-magnet — v0.4.7 editorial CRO refresh.
   Was: pearl bg + green left-edge + sm radius — generic "freebie box."
   Now: white surface card + 4px sage left-edge (matches editorial left-edge
   accent system — Author Bio has gold, Lead Magnet has sage), Cormorant
   headline, sage eyebrow, pill email input + gold filled pill CTA.
   Distinct from Newsletter (navy panel) so the two conversion blocks read
   as different commitment levels: Newsletter = literary subscription,
   Lead Magnet = value-exchange opt-in. */
.jab-lead-magnet {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border-strong);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-6) var(--brand-space-6) var(--brand-space-6) var(--brand-space-7);
	margin-block: var(--brand-space-6);
	box-shadow: var(--brand-shadow-sm);
	position: relative;
	overflow: hidden;
}
.jab-lead-magnet::before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: var(--sage-500, #7C9082);
}
.jab-lead-magnet__eyebrow {
	font-family: var(--brand-font-body);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sage-700, #5c6f63);
	font-weight: 600;
	margin: 0 0 var(--brand-space-2);
}
.jab-lead-magnet__headline {
	font-family: var(--brand-font-display);
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 600;
	color: var(--brand-primary);
	margin: 0 0 var(--brand-space-3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: 620px;
}
.jab-lead-magnet__sub {
	font-family: var(--brand-font-body);
	font-size: 16px;
	color: var(--brand-text);
	line-height: 1.6;
	margin: 0 0 var(--brand-space-5);
	max-width: 620px;
}
.jab-lead-magnet__form {
	display: flex;
	gap: var(--brand-space-3);
	flex-wrap: wrap;
	align-items: center;
}
.jab-lead-magnet__form > div { flex-basis: 100% !important; }
.jab-lead-magnet__form input[type="email"] {
	flex: 1;
	min-width: 240px;
	padding: 12px 18px;
	border: 1px solid var(--brand-border-strong);
	border-radius: var(--brand-radius-pill);
	background: var(--brand-surface);
	font: inherit;
	font-family: var(--brand-font-body);
	color: var(--brand-text);
}
.jab-lead-magnet__form input[type="email"]::placeholder { color: var(--brand-text-muted); }
.jab-lead-magnet__form input[type="email"]:focus {
	outline: 2px solid var(--brand-accent);
	outline-offset: 2px;
	border-color: var(--brand-accent);
}
/* Force gold pill CTA on Lead Magnet (matches Newsletter pattern — even if author
   set cta_style=outline, the conversion CTA should always read gold). */
.jab-lead-magnet .jab-btn--outline {
	background: var(--brand-accent);
	color: var(--brand-primary-dark);
	border-color: var(--brand-accent);
}
.jab-lead-magnet .jab-btn--outline:hover,
.jab-lead-magnet .jab-btn--outline:focus {
	background: var(--gold-600, #b08653);
	color: #ffffff;
	border-color: var(--gold-600, #b08653);
}
.jab-lead-magnet__success { display: none; }
.jab-lead-magnet.is-submitted .jab-lead-magnet__form { display: none; }
.jab-lead-magnet.is-submitted .jab-lead-magnet__success {
	display: block;
	font-family: var(--brand-font-display);
	color: var(--brand-primary);
}
.jab-lead-magnet.is-submitted .jab-lead-magnet__success h3 {
	font-family: var(--brand-font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	color: var(--sage-700, #5c6f63);
	margin: 0 0 var(--brand-space-3);
	font-weight: 500;
}
.jab-lead-magnet.is-submitted .jab-lead-magnet__success p {
	font-family: var(--brand-font-body);
	font-size: 16px;
	color: var(--brand-text);
	line-height: 1.6;
	margin: 0;
}
.jab-lead-magnet__expiry-note {
	font-family: var(--brand-font-display);
	font-style: italic;
	font-size: 14px;
	color: var(--sage-700, #5c6f63);
	margin: var(--brand-space-3) 0 0;
}

/* Block: faq-accordion — v0.4.2 editorial CRO refresh.
   Was: hairline border (12% navy) + flat pearl bg → cards washed into page bg.
   Now: white surface + stronger border-strong (22% navy) + soft shadow.
   Open state: sage-tinted bg + 4px sage left-edge + thicker border + lift shadow.
   CRO: FAQ at end-of-article handles objections. Open state must POP so user
   scans the answer + the next question, not bounce. Closes the sale. */
.jab-faq-accordion { margin-block: var(--brand-space-6); }
.jab-faq-accordion__heading {
	font-family: var(--brand-font-display);
	font-size: clamp(24px, 2.8vw, 30px);
	font-weight: 500;
	color: var(--brand-primary);
	margin: 0 0 var(--brand-space-5);
	letter-spacing: -0.01em;
}
.jab-faq-accordion__list { display: flex; flex-direction: column; gap: var(--brand-space-3); }
.jab-faq-accordion__item {
	background: var(--brand-surface);
	border-radius: var(--brand-radius-md);
	border: 1px solid var(--brand-border-strong);
	box-shadow: var(--brand-shadow-sm);
	transition: background-color 240ms cubic-bezier(.2,.8,.2,1),
	            box-shadow 240ms cubic-bezier(.2,.8,.2,1),
	            transform 240ms cubic-bezier(.2,.8,.2,1);
	position: relative;
	overflow: hidden;
}
.jab-faq-accordion__item:hover { box-shadow: 0 4px 14px rgba(14, 31, 58, 0.08); }
.jab-faq-accordion__item[open] {
	background: color-mix(in srgb, var(--sage-100, #e6ece8) 60%, var(--brand-surface));
	box-shadow: 0 4px 14px rgba(14, 31, 58, 0.10), inset 4px 0 0 var(--sage-500, #7C9082);
}
.jab-faq-accordion__question {
	padding: var(--brand-space-5);
	cursor: pointer;
	font-family: var(--brand-font-display);
	font-weight: 500;
	font-size: 18px;
	color: var(--brand-primary);
	list-style: none;
	position: relative;
	padding-right: calc(var(--brand-space-5) + var(--brand-space-7));
	line-height: 1.4;
}
.jab-faq-accordion__question::-webkit-details-marker { display: none; }
.jab-faq-accordion__question::after {
	content: "+";
	position: absolute;
	right: var(--brand-space-5);
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: 400;
	color: var(--sage-700, #5c6f63);
	transition: transform 240ms cubic-bezier(.2,.8,.2,1);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--brand-bg-light);
	line-height: 1;
}
.jab-faq-accordion__item[open] .jab-faq-accordion__question::after {
	content: "−";
	background: var(--sage-500, #7C9082);
	color: #ffffff;
}
.jab-faq-accordion__answer {
	padding: 0 var(--brand-space-5) var(--brand-space-5);
	color: var(--brand-text-muted);
	font-size: var(--brand-text-base);
	line-height: var(--brand-line-height-body);
	font-family: var(--brand-font-body);
}
.jab-faq-accordion__answer p:first-child { margin-top: 0; }
.jab-faq-accordion__answer p:last-child { margin-bottom: 0; }
.jab-faq-accordion__answer a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.jab-faq-accordion__answer a:hover { color: var(--rose-500, #A85D5D); }

/* Block: countdown-timer
   Dynamic block — server emits empty `00` placeholders, JS fills + ticks every 1s. */
.jab-countdown-timer { margin-block: var(--brand-space-5); text-align: center; }
.jab-countdown-timer__heading { font-family: var(--brand-font-display); font-size: var(--brand-text-lg); color: var(--brand-text); margin: 0 0 var(--brand-space-3); }
.jab-countdown-timer__display { display: inline-flex; align-items: flex-start; gap: var(--brand-space-2); font-family: var(--brand-font-display); font-variant-numeric: tabular-nums; }
.jab-countdown-timer__segment { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.jab-countdown-timer__num { font-size: var(--brand-text-3xl); font-weight: var(--brand-font-weight-bold); color: var(--brand-primary); line-height: 1; padding: var(--brand-space-3); background: var(--brand-bg-light); border-radius: var(--brand-radius-md); display: block; min-width: 56px; text-align: center; }
.jab-countdown-timer__label { font-size: var(--brand-text-xs); color: var(--brand-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--brand-space-2); font-weight: var(--brand-font-weight-semibold); }
.jab-countdown-timer__sep { font-size: var(--brand-text-2xl); color: var(--brand-text-muted); padding-top: var(--brand-space-3); font-weight: var(--brand-font-weight-bold); }
.jab-countdown-timer__subhead { font-size: var(--brand-text-base); color: var(--brand-text); margin: var(--brand-space-4) 0 0; max-width: 480px; margin-inline: auto; }
.jab-countdown-timer__cta-wrap { margin-top: var(--brand-space-4); }
.jab-countdown-timer__expired { font-size: var(--brand-text-lg); color: var(--brand-text-muted); font-style: italic; margin: var(--brand-space-3) 0; padding: var(--brand-space-4); background: var(--brand-bg-light); border-radius: var(--brand-radius-md); }

/* Mobile: tighter spacing, smaller numbers */
@media (max-width: 768px) {
	.jab-countdown-timer__segment { min-width: 52px; }
	.jab-countdown-timer__num { font-size: var(--brand-text-2xl); min-width: 44px; padding: var(--brand-space-2); }
	.jab-countdown-timer__sep { font-size: var(--brand-text-xl); padding-top: var(--brand-space-2); }
}

/* Dark bg_override readability */
.jab-countdown-timer--bg-override-accent .jab-countdown-timer__heading,
.jab-countdown-timer--bg-override-primary .jab-countdown-timer__heading,
.jab-countdown-timer--bg-override-accent .jab-countdown-timer__subhead,
.jab-countdown-timer--bg-override-primary .jab-countdown-timer__subhead { color: var(--brand-text-on-dark); }
.jab-countdown-timer--bg-override-accent .jab-countdown-timer__num,
.jab-countdown-timer--bg-override-primary .jab-countdown-timer__num { background: rgba(255, 255, 255, 0.15); color: var(--brand-text-on-dark); }
.jab-countdown-timer--bg-override-accent .jab-countdown-timer__label,
.jab-countdown-timer--bg-override-primary .jab-countdown-timer__label,
.jab-countdown-timer--bg-override-accent .jab-countdown-timer__sep,
.jab-countdown-timer--bg-override-primary .jab-countdown-timer__sep { color: var(--brand-text-on-dark-muted); }

/* Block: sticky-mobile-cta
   Fixed at bottom, mobile-only. Slides in with CSS transition when JS adds .is-visible.
   Desktop hidden via media query. z-index above content but below modals. */
.jab-sticky-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; transform: translateY(100%); transition: transform 250ms ease, opacity 250ms ease; opacity: 0; background: var(--brand-surface); border-top: 1px solid var(--brand-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); padding: var(--brand-space-3) var(--brand-space-4); }
.jab-sticky-mobile-cta.is-visible { transform: translateY(0); opacity: 1; }
.jab-sticky-mobile-cta__inner { display: flex; align-items: center; gap: var(--brand-space-3); max-width: 720px; margin: 0 auto; }
.jab-sticky-mobile-cta__thumb { flex: 0 0 48px; }
.jab-sticky-mobile-cta__thumb img { width: 48px; height: 48px; border-radius: var(--brand-radius-sm); object-fit: cover; display: block; }
.jab-sticky-mobile-cta__meta { flex: 1; min-width: 0; }
.jab-sticky-mobile-cta__name { font-family: var(--brand-font-body); font-size: var(--brand-text-sm); font-weight: var(--brand-font-weight-semibold); color: var(--brand-text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.jab-sticky-mobile-cta__price { font-size: var(--brand-text-xs); color: var(--brand-text-muted); margin: 2px 0 0; line-height: 1; }
.jab-sticky-mobile-cta__cta { flex: 0 0 auto; padding: var(--brand-space-3) var(--brand-space-4); font-size: var(--brand-text-sm); white-space: nowrap; }
.jab-sticky-mobile-cta__close { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; background: transparent; border: none; color: var(--brand-text-muted); font-size: var(--brand-text-xl); line-height: 1; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.jab-sticky-mobile-cta__close:hover, .jab-sticky-mobile-cta__close:focus { background: var(--brand-bg-light); color: var(--brand-text); outline: none; }

/* Desktop: hide entirely. The block is mobile-only by design. */
@media (min-width: 769px) {
	.jab-sticky-mobile-cta { display: none !important; }
}

/* Dark-bg override readability adjustments. */
.jab-sticky-mobile-cta--bg-override-accent .jab-sticky-mobile-cta__name,
.jab-sticky-mobile-cta--bg-override-primary .jab-sticky-mobile-cta__name { color: var(--brand-text-on-dark); }
.jab-sticky-mobile-cta--bg-override-accent .jab-sticky-mobile-cta__price,
.jab-sticky-mobile-cta--bg-override-primary .jab-sticky-mobile-cta__price { color: var(--brand-text-on-dark-muted); }
.jab-sticky-mobile-cta--bg-override-accent .jab-sticky-mobile-cta__close,
.jab-sticky-mobile-cta--bg-override-primary .jab-sticky-mobile-cta__close { color: var(--brand-text-on-dark); }

/* Block: star-rating (standalone) */
.jab-star-rating { display: inline-flex; align-items: baseline; gap: var(--brand-space-2); font-size: var(--brand-text-base); color: var(--brand-text); font-family: var(--brand-font-body); }
.jab-star-rating--variant-boxed { display: flex; padding: var(--brand-space-4); justify-content: center; }
.jab-star-rating--variant-vertical { flex-direction: column; align-items: flex-start; gap: var(--brand-space-1); }
.jab-star-rating__label { font-size: var(--brand-text-sm); color: var(--brand-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--brand-font-weight-semibold); }
.jab-star-rating__stars { color: var(--brand-rating-star); letter-spacing: 2px; font-size: var(--brand-text-lg); line-height: 1; position: relative; }
.jab-star-rating__half { position: relative; display: inline-block; color: var(--brand-rating-star); opacity: 0.55; }
.jab-star-rating__numeric { font-weight: var(--brand-font-weight-semibold); color: var(--brand-text); }
.jab-star-rating__count { color: var(--brand-text-muted); font-size: var(--brand-text-sm); }

/* Block: pros-cons (standalone) */
.jab-pros-cons { margin-block: var(--brand-space-5); }
.jab-pros-cons__heading { font-family: var(--brand-font-display); font-size: var(--brand-text-xl); color: var(--brand-text); margin: 0 0 var(--brand-space-4); }
.jab-pros-cons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--brand-space-5); }
.jab-pros-cons__col { background: var(--brand-bg-light); border-radius: var(--brand-radius-md); padding: var(--brand-space-4); border-top: 4px solid var(--brand-border); }
.jab-pros-cons__col--pros { border-top-color: var(--brand-success); }
.jab-pros-cons__col--cons { border-top-color: var(--brand-warning); }
.jab-pros-cons__col-label { margin: 0 0 var(--brand-space-3); font-size: var(--brand-text-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--brand-font-weight-bold); color: var(--brand-text); }
.jab-pros-cons__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--brand-space-2); }
.jab-pros-cons__list li { font-size: var(--brand-text-sm); line-height: var(--brand-line-height-body); color: var(--brand-text); padding-left: var(--brand-space-5); position: relative; }
.jab-pros-cons__list--pros li::before { content: "✅"; position: absolute; left: 0; top: 0; }
.jab-pros-cons__list--cons li::before { content: "❌"; position: absolute; left: 0; top: 0; }
.jab-pros-cons--variant-vertical .jab-pros-cons__grid { grid-template-columns: 1fr; }
@media (max-width: 768px) { .jab-pros-cons__grid { grid-template-columns: 1fr; } }

/* ============================================================
 *  Block: quote-card (v0.5.0)
 *  Individual quote with attribution + optional editorial commentary.
 *  Three style variants: --large (default, big pull-quote), --compact
 *  (small inline), --card (boxed). Designed for quotes-list pages with
 *  10–50+ quotes mixed for visual rhythm.
 * ============================================================ */
.jab-quote-card { position: relative; margin: var(--brand-space-7) 0; max-width: 720px; }
.jab-quote-card__numbering { position: absolute; top: -10px; right: 0; display: inline-flex; align-items: center; font-family: var(--brand-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--brand-radius-pill); background: var(--sage-100, #e6ece8); color: var(--sage-700, #5c6f63); border: 1px solid var(--sage-200, #cfd9d2); line-height: 1.4; }
.jab-quote-card__quote { margin: 0; padding: 0; border: 0; }
.jab-quote-card__text { font-family: var(--brand-font-display); font-style: italic; font-weight: 500; color: var(--brand-primary); margin: 0 0 var(--brand-space-4); line-height: 1.3; text-wrap: balance; }
.jab-quote-card__attribution { font-family: var(--brand-font-display); font-size: 16px; color: var(--sage-700, #5c6f63); margin-top: var(--brand-space-3); line-height: 1.5; }
.jab-quote-card__attribution-name { font-weight: 500; color: var(--brand-primary); }
.jab-quote-card__attribution-source { display: inline-block; margin-left: 6px; color: var(--sage-700, #5c6f63); }
.jab-quote-card__attribution-context { display: inline-block; margin-left: 6px; color: var(--sage-700, #5c6f63); font-style: italic; }
.jab-quote-card__attribution-source::before { content: "\2014\00a0"; }
.jab-quote-card__commentary { font-family: var(--brand-font-body); font-size: 15px; line-height: 1.65; color: var(--brand-text-muted); margin-top: var(--brand-space-5); padding-top: var(--brand-space-4); border-top: 1px solid var(--brand-border); max-width: 620px; }
.jab-quote-card__commentary p:first-child { margin-top: 0; }
.jab-quote-card__commentary p:last-child { margin-bottom: 0; }

/* VARIANT: large (default) — big pull-quote with hanging " mark */
.jab-quote-card--large { padding-left: var(--brand-space-8); margin-block: var(--brand-space-8); }
.jab-quote-card--large .jab-quote-card__quote { position: relative; }
.jab-quote-card--large .jab-quote-card__text { font-size: clamp(22px, 2.4vw, 30px); }
.jab-quote-card--large .jab-quote-card__quote::before { content: "\201C"; position: absolute; left: -56px; top: -10px; font-family: var(--brand-font-display); font-size: 90px; line-height: 1; color: var(--sage-500, #7C9082); font-style: normal; font-weight: 600; }

/* VARIANT: compact — small inline quote, sage left-edge */
.jab-quote-card--compact { padding-left: var(--brand-space-5); border-left: 3px solid var(--sage-500, #7C9082); margin-block: var(--brand-space-6); }
.jab-quote-card--compact .jab-quote-card__text { font-size: 18px; font-weight: 400; }
.jab-quote-card--compact .jab-quote-card__attribution { font-size: 14px; }

/* VARIANT: card — pearl-tinted boxed card with corner gold " */
.jab-quote-card--card { background: var(--brand-bg-light); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-md); padding: var(--brand-space-6) var(--brand-space-6) var(--brand-space-6) var(--brand-space-8); box-shadow: var(--brand-shadow-sm); position: relative; margin-block: var(--brand-space-6); }
.jab-quote-card--card::before { content: "\201C"; position: absolute; left: var(--brand-space-3); top: 4px; font-family: var(--brand-font-display); font-size: 64px; line-height: 1; color: var(--brand-accent); opacity: 0.45; font-style: normal; font-weight: 600; }
.jab-quote-card--card .jab-quote-card__text { font-size: clamp(18px, 1.9vw, 22px); }

@media (max-width: 768px) {
	.jab-quote-card--large { padding-left: var(--brand-space-6); margin-block: var(--brand-space-6); }
	.jab-quote-card--large .jab-quote-card__quote::before { font-size: 56px; top: -6px; left: -36px; }
	.jab-quote-card--large .jab-quote-card__text { font-size: 19px; }
	.jab-quote-card--card { padding-left: var(--brand-space-6); }
	.jab-quote-card--card::before { font-size: 48px; left: var(--brand-space-2); }
}

/* Block: newsletter-signup — v0.4.4 navy-inversion CRO refresh.
   Previous sage card washed into the pearl page bg. Navy bg now creates the
   strongest visual stop in the article — newsletter is the soft conversion
   moment, must demand attention. Gold watermark + pearl headline + gold pill CTA
   reads as "literary travel magazine subscription" not "yet another blog form." */
.jab-newsletter-signup {
	background: var(--brand-primary);                    /* navy #1B365D */
	border: 1px solid var(--brand-primary-dark);         /* navy-900 for subtle edge */
	border-radius: var(--brand-radius-lg);
	padding: var(--brand-space-7) var(--brand-space-6);
	text-align: center;
	margin-block: var(--brand-space-6);
	position: relative;
	overflow: hidden;
	color: var(--brand-text-on-dark);
	box-shadow: 0 4px 18px rgba(14, 31, 58, 0.18);
}
/* v0.4.5: the giant floating " watermark was awkward — replaced with an inline
   opening quote on the headline so it reads as an actual editorial pull-quote. */
.jab-newsletter-signup__headline::before {
	content: "\201C";
	display: inline-block;
	font-family: var(--brand-font-display);
	color: var(--brand-accent);
	opacity: 0.55;
	font-size: 0.9em;
	font-weight: 600;
	margin-right: 0.08em;
	vertical-align: -0.05em;
}
.jab-newsletter-signup__headline {
	font-family: var(--brand-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 500;
	color: var(--brand-text-on-dark);                    /* pearl on navy */
	margin: 0 auto var(--brand-space-4);
	max-width: 520px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.jab-newsletter-signup__form {
	display: flex;
	gap: var(--brand-space-3);
	flex-wrap: wrap;
	max-width: 480px;
	margin: 0 auto;
	justify-content: center;
}
.jab-newsletter-signup__form input[type="email"] {
	flex: 1;
	min-width: 200px;
	padding: 12px 18px;
	border: 1px solid var(--brand-text-on-dark);         /* pearl edge on navy */
	border-radius: var(--brand-radius-pill);
	background: var(--brand-surface);                    /* white input */
	font: inherit;
	font-family: var(--brand-font-body);
	color: var(--brand-text);
}
.jab-newsletter-signup__form input[type="email"]::placeholder { color: var(--brand-text-muted); }
.jab-newsletter-signup__form input[type="email"]:focus {
	outline: 2px solid var(--brand-accent);              /* gold focus ring on navy */
	outline-offset: 2px;
	border-color: var(--brand-accent);
}
.jab-newsletter-signup__form button { white-space: nowrap; }
.jab-newsletter-signup__note {
	font-size: 13px;
	color: var(--brand-text-on-dark-muted);              /* pearl-muted on navy */
	font-style: italic;
	font-family: var(--brand-font-display);
	margin: var(--brand-space-4) 0 0;
}
/* CTA on sage card needs the GOLD pill (not outline) for high contrast +
   conversion signal. Override any cta_style=outline at block level — sage
   tint is the card background, outline pill against sage = invisible. */
.jab-newsletter-signup .jab-btn--outline {
	background: var(--brand-accent);
	color: var(--brand-primary-dark);
	border-color: var(--brand-accent);
}
.jab-newsletter-signup .jab-btn--outline:hover,
.jab-newsletter-signup .jab-btn--outline:focus {
	background: var(--gold-600, #b08653);
	color: #ffffff;
	border-color: var(--gold-600, #b08653);
}
.jab-newsletter-signup__success { display: none; }
.jab-newsletter-signup.is-submitted .jab-newsletter-signup__form { display: none; }
.jab-newsletter-signup.is-submitted .jab-newsletter-signup__success { display: block; font-family: var(--brand-font-display); font-size: 20px; color: var(--brand-text-on-dark); font-style: italic; }
