/* ==========================================================================
   Topic pages (page-templates/lz-*-marketing.php)
   Their filenames are historical; content covers topics such as speed to lead,
   GoHighLevel CRM or emergency marketing. Styles map their markup to core tokens.
   ========================================================================== */

.lz-page { background: var(--lz-surface); }
.lz-page .lz-wrap { width: min(100% - (var(--lz-gutter) * 2), var(--lz-max)); margin-inline: auto; }
.lz-page .lz-section { padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }
.lz-page .lz-section.soft { background: var(--lz-paper); }
.lz-page .lz-section.orange { background: var(--lz-ink); color: var(--lz-on-ink); }
.lz-page .lz-section.orange .lz-note, .lz-page .lz-section.orange .lz-kicker { color: var(--lz-on-ink-muted); }

/* Hero */
.lz-page .lz-hero { background: var(--lz-ink); color: var(--lz-on-ink); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.lz-page .lz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.lz-page .lz-eyebrow { display: inline-block; font-size: var(--lz-step--1); font-weight: 600; color: var(--lz-signal); margin-bottom: 1rem; }
.lz-page .lz-h1 { font-size: var(--lz-step-4); max-width: 22ch; }
.lz-page .lz-h1 em { font-style: normal; }
.lz-page .lz-lede { color: var(--lz-on-ink-muted); font-size: var(--lz-step-1); line-height: 1.5; max-width: 56ch; }
.lz-page .lz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.lz-page .lz-hero :focus-visible, .lz-page .orange :focus-visible, .lz-page .lz-dashboard :focus-visible { outline-color: var(--lz-signal); }

.lz-page .lz-bento { display: grid; gap: 0.75rem; }
.lz-page .lz-bento-card { border-radius: var(--lz-radius); padding: 1.1rem 1.2rem; background: var(--lz-ink-2); border: 1px solid rgba(255, 255, 255, 0.12); }
.lz-page .lz-bento-card.mint { background: var(--lz-surface); color: var(--lz-text); border-color: transparent; border-top: 5px solid var(--lz-signal); }
.lz-page .lz-bento-card .lz-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--lz-signal); margin-bottom: 0.35rem; }
.lz-page .lz-bento-card.mint .lz-label { color: var(--lz-signal-text); }
.lz-page .lz-bento-card strong { display: block; font-family: var(--lz-font-display); font-stretch: 106%; font-size: 1.05rem; line-height: 1.35; }
.lz-page .lz-bento-card p { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--lz-on-ink-muted); }
.lz-page .lz-bento-card.mint p { color: var(--lz-muted); }

/* On this page */
.lz-onpage { background: var(--lz-surface); border-bottom: 1px solid var(--lz-line); position: sticky; top: var(--lz-header-h); z-index: 50; }
.admin-bar .lz-onpage { top: calc(var(--lz-header-h) + 32px); }
.lz-onpage ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.lz-onpage a { display: block; padding: 0.85rem 0.9rem; white-space: nowrap; font-weight: 600; font-size: 0.95rem; color: var(--lz-ink); text-decoration: none; }
.lz-onpage a:hover { box-shadow: inset 0 -3px 0 var(--lz-signal); }
@media (max-width: 782px) { .admin-bar .lz-onpage { top: var(--lz-header-h); } }

/* Proof bar */
.lz-page .lz-proofbar { background: var(--lz-paper); border-bottom: 1px solid var(--lz-line); }
.lz-page .lz-proofbar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lz-page .lz-mini { padding: 1.1rem 1rem; border-right: 1px solid var(--lz-line); }
.lz-page .lz-mini:last-child { border-right: 0; }
.lz-page .lz-mini b { display: block; font-size: 0.82rem; color: var(--lz-muted); font-weight: 600; }
.lz-page .lz-mini span { font-family: var(--lz-font-display); font-stretch: 106%; font-weight: 700; color: var(--lz-ink); }

/* Section heads */
.lz-page .lz-head { max-width: 760px; margin-bottom: 2rem; }
.lz-page .lz-head::before {
	content: ""; display: block; width: 120px; height: 10px; margin-bottom: 1.25rem;
	background:
		repeating-linear-gradient(90deg, var(--lz-signal) 0 2px, transparent 2px 24px) 0 0 / 100% 10px no-repeat,
		repeating-linear-gradient(90deg, var(--lz-signal) 0 2px, transparent 2px 6px) 0 6px / 100% 4px no-repeat;
}
.lz-page .lz-kicker { display: block; font-size: var(--lz-step--1); font-weight: 600; color: var(--lz-muted); margin-bottom: 0.6rem; }
.lz-page .lz-h2 { font-size: var(--lz-step-3); }
.lz-page .lz-note { color: var(--lz-muted); font-size: var(--lz-step-1); line-height: 1.5; margin: 0; }

/* Problem: sticky summary beside the article */
.lz-page .lz-copy-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.lz-page .lz-sticky { position: sticky; top: calc(var(--lz-header-h) + 70px); background: var(--lz-ink); color: var(--lz-on-ink); border-radius: var(--lz-radius-lg); padding: 1.5rem; }
.lz-page .lz-sticky strong { display: block; font-family: var(--lz-font-display); font-stretch: 106%; font-size: 1.15rem; line-height: 1.35; margin-bottom: 0.75rem; }
.lz-page .lz-sticky p { color: var(--lz-on-ink-muted); margin: 0; font-size: 0.95rem; }
.lz-page .lz-article { max-width: var(--lz-measure); }
.lz-page .lz-article p { font-size: 1.0625rem; line-height: 1.75; }

/* Card grid: these are parallel situations, numbering kept from the source as labels */
.lz-page .lz-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.lz-page .lz-card { background: var(--lz-surface); border: 1px solid var(--lz-line); border-radius: var(--lz-radius); padding: 1.25rem; }
.lz-page .lz-card .num { font-family: var(--lz-font-display); font-weight: 800; color: var(--lz-signal-text); font-size: 0.9rem; margin-bottom: 0.5rem; }
.lz-page .lz-card h3 { font-size: 1.1rem; }
.lz-page .lz-card p { font-size: 0.95rem; color: var(--lz-muted); margin: 0; }

.lz-page .lz-system { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--lz-ink); }
.lz-page .lz-system article { padding: 1.25rem 1.25rem 0 0; }
.lz-page .lz-system article + article { padding-left: 1.25rem; border-left: 1px solid var(--lz-line); }
.lz-page .lz-system h3 { font-size: 1.1rem; }
.lz-page .lz-system p { font-size: 0.95rem; color: var(--lz-muted); margin: 0; }

/* Creative angles and videos */
.lz-page .lz-angle-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.lz-page .lz-angle { padding: 0.55rem 0.9rem; border: 1px solid var(--lz-line-strong); border-radius: 999px; background: var(--lz-surface); font-weight: 600; font-size: 0.93rem; color: var(--lz-ink); }
.lz-page .lz-video-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lz-space-4); }
.lz-page .lz-video video { width: 100%; aspect-ratio: 9 / 16; max-height: 560px; object-fit: cover; border-radius: var(--lz-radius); }
.lz-page .lz-video > div { font-size: var(--lz-step--1); color: var(--lz-muted); margin-top: 0.5rem; }

/* Former marquee: a static, scrollable evidence list (no auto-motion) */
.lz-page .lz-marquee-shell { overflow-x: auto; padding-bottom: 0.75rem; scroll-snap-type: x proximity; }
.lz-page .lz-marquee { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 0.75rem; animation: none !important; }
.lz-page .lz-marquee-item { scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--lz-radius); padding: 1.1rem; }
.lz-page .lz-marquee-item b { display: block; color: var(--lz-on-ink); margin-bottom: 0.35rem; }
.lz-page .lz-marquee-item p { margin: 0; font-size: 0.92rem; color: var(--lz-on-ink-muted); }

/* CRM pipeline + dashboard */
.lz-page .lz-pipeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.lz-page .lz-pipeline-list { display: grid; }
.lz-page .lz-pipe { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--lz-line); }
.lz-page .lz-pipe:last-child { border-bottom: 1px solid var(--lz-line); }
.lz-page .lz-pipe > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--lz-ink); color: var(--lz-signal); font-family: var(--lz-font-display); font-weight: 800; border-radius: var(--lz-radius-sm); }
.lz-page .lz-pipe h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.lz-page .lz-pipe p { margin: 0; font-size: 0.95rem; color: var(--lz-muted); }
.lz-page .lz-dashboard { background: var(--lz-ink); color: var(--lz-on-ink); border-radius: var(--lz-radius-lg); padding: 1.5rem; position: sticky; top: calc(var(--lz-header-h) + 70px); }
.lz-page .lz-dashboard .lz-label { color: var(--lz-signal); font-size: var(--lz-step--1); font-weight: 600; }
.lz-page .lz-dashboard h3 { font-size: var(--lz-step-2); margin: 0.4rem 0 0.5rem; }
.lz-page .lz-dashboard p { color: var(--lz-on-ink-muted); }
.lz-page .lz-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.lz-page .lz-dash { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--lz-radius-sm); padding: 0.75rem; }
.lz-page .lz-dash b { display: block; font-size: 0.92rem; }
.lz-page .lz-dash span { font-size: 0.82rem; color: var(--lz-on-ink-muted); }

/* FAQ (native details) */
.lz-page .lz-faq { border-top: 2px solid var(--lz-ink); max-width: 860px; }
.lz-page .lz-faq-item { border-bottom: 1px solid var(--lz-line); }
.lz-page .lz-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font-family: var(--lz-font-display); font-stretch: 106%; font-weight: 700; font-size: var(--lz-step-1); line-height: 1.3; color: var(--lz-ink); }
.lz-page .lz-faq-item summary::-webkit-details-marker { display: none; }
.lz-page .lz-faq-item summary::after { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.2s var(--lz-ease); }
.lz-page .lz-faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.lz-page .lz-faq-answer { padding-bottom: 1.25rem; color: var(--lz-muted); max-width: var(--lz-measure); }
.lz-page .lz-faq-answer p { margin: 0; }

/* Buttons and closing call to action */
.lz-page .lz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.35rem; border: 2px solid transparent; border-radius: var(--lz-radius); font: 700 1rem/1.2 var(--lz-font-body); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
.lz-page .lz-btn.primary { background: var(--lz-signal); border-color: var(--lz-signal); color: var(--lz-ink); }
.lz-page .lz-btn.primary:hover { background: var(--lz-signal-2); border-color: var(--lz-signal-2); }
.lz-page .lz-btn.secondary { color: var(--lz-on-ink); border-color: rgba(255, 255, 255, 0.4); }
.lz-page .lz-btn.secondary:hover { border-color: #fff; }
.lz-page .lz-final { background: var(--lz-signal); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.lz-page .lz-final h2 { max-width: 22ch; }
.lz-page .lz-final p { max-width: 62ch; color: var(--lz-ink-2); }
.lz-page .lz-final .lz-btn.primary { background: var(--lz-ink); border-color: var(--lz-ink); color: #fff; }
.lz-page .lz-final :focus-visible { outline-color: var(--lz-ink); }

@media (max-width: 1000px) {
	.lz-page .lz-hero-grid, .lz-page .lz-copy-grid, .lz-page .lz-pipeline { grid-template-columns: 1fr; }
	.lz-page .lz-sticky, .lz-page .lz-dashboard { position: static; }
	.lz-page .lz-card-grid, .lz-page .lz-system { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lz-page .lz-system article:nth-child(3) { padding-left: 0; border-left: 0; }
	.lz-page .lz-proofbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lz-page .lz-mini:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
	.lz-page .lz-card-grid, .lz-page .lz-system, .lz-page .lz-dashboard-grid { grid-template-columns: 1fr; }
	.lz-page .lz-system article, .lz-page .lz-system article + article { padding-left: 0; border-left: 0; }
	.lz-page .lz-video-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; }
	.lz-page .lz-actions .lz-btn { flex: 1 1 100%; }
}