/* =========================================================================
   Line-of-business vertical page (page-lob.php). Navy throughout; the shared
   win/bubble block styling lives in style.css. Subtle top borders separate
   adjacent navy bands.
   ========================================================================= */

.lob-crumbs { padding: 20px 0 0; font-size: 13px; color: var(--text2); }
.lob-crumbs a { color: var(--text2); }
.lob-crumbs a:hover { color: var(--mint); }
.lob-crumbs span[aria-hidden] { margin: 0 8px; color: var(--border); }
.lob-crumbs [aria-current] { color: var(--text); }

/* ---- Hero -------------------------------------------------------------- */
.lob-hero { padding: 40px 0 64px; text-align: center; }
.lob-hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.08; margin: 14px auto 0; max-width: 780px; }
.lob-hero-sub { max-width: 660px; margin: 20px auto 0; font-size: 18px; line-height: 1.6; color: var(--text2); }
/* Statement cards inside the hero — short header + one line; existing card style. */
.lob-hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 940px; margin: 34px auto 0; text-align: left; }
.lob-hero-card { padding: 22px 20px; }
.lob-hero-card-h { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 8px; }
.lob-hero-card-l { display: block; font-size: 14px; line-height: 1.5; color: var(--text2); }
.lob-hero-cta { margin-top: 30px; }

/* ---- Shared content sections ------------------------------------------- */
.lob-problem, .lob-play, .lob-wins, .lob-seq, .lob-wedge, .lob-related, .lob-cta {
	padding: 72px 0; border-top: 1px solid var(--border);
}
.lob-lead { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--text2); }
.lob-lead.center { margin: 0 auto; text-align: center; }
.lob-close { max-width: 760px; margin: 24px 0 0; font-size: 16.5px; line-height: 1.6; font-weight: 600; color: var(--text); }
.lob-close.center { margin: 26px auto 0; text-align: center; }

/* ---- The problem, as 3 scannable statements ---------------------------- */
.lob-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.lob-point { padding: 24px 22px; }
.lob-point-num { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; }
.lob-point p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--text); }
.lob-note { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--text2); }

/* ---- The refill play, as 3 labeled items ------------------------------- */
.lob-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lob-item { padding: 24px 22px; }
.lob-item-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; margin-bottom: 14px; color: var(--mint); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lob-item-label { font-size: 16.5px; color: var(--text); margin-bottom: 8px; }
.lob-item-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text2); }

/* ---- Legacy bullet fallback (LOB pages that still use play.bullets) ----- */
.lob-bullets { list-style: none; margin: 0; max-width: 820px; }
.lob-bullets li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; font-size: 16.5px; line-height: 1.55; color: var(--text); border-bottom: 1px solid var(--border); }
.lob-bullets li:last-child { border-bottom: 0; }
.lob-tick { flex: none; display: inline-flex; color: var(--accent); margin-top: 2px; }

/* ---- Sequence steps ---------------------------------------------------- */
.lob-steps { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lob-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 18px; }
.lob-step-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.lob-step-ico { display: inline-flex; color: var(--mint); }
.lob-step-label { font-size: 14.5px; line-height: 1.4; color: var(--text); }

/* ---- Related cluster --------------------------------------------------- */
.lob-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lob-related-card {
	display: flex; flex-direction: column; gap: 12px; padding: 22px 20px;
	font-size: 15px; line-height: 1.5; color: var(--text);
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lob-related-card:hover {
	border-color: var(--accent); transform: translateY(-3px);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 18%, transparent);
}
.lob-related-text { color: var(--text); }
.lob-related-more { font-weight: 600; color: var(--accent); }

/* ---- Pricing / CTA ----------------------------------------------------- */
.lob-cta { text-align: center; }
.lob-cta h2 { font-size: clamp(26px, 3.4vw, 34px); }
.lob-cta-price { margin: 14px auto 0; font-size: 17px; color: var(--text2); }
.lob-cta .lob-hero-cta { margin-top: 26px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.lob-steps { grid-template-columns: repeat(2, 1fr); }
	.lob-related-grid, .lob-points, .lob-items, .lob-hero-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.lob-problem, .lob-play, .lob-wins, .lob-seq, .lob-wedge, .lob-related, .lob-cta { padding: 52px 0; }
	.lob-steps { grid-template-columns: 1fr; }
}