/* =========================================================================
   Landing Includes Block — all rules scoped under .landing-includes-block.
   Per-block CSS (loaded via enqueue_assets only when the block is present).
   Tokens (match sibling blocks on this page): green #028d40, graphite #343a40,
   muted #777, border #e6e6e6, surface-alt #f7f8f9, phone-dark #14181b.
   Layout: centred header, then a split row — schematic phone (left) +
   two-column list of points (right).
   ========================================================================= */
.landing-includes-block {
	background: #f7f8f9;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.landing-includes-block .lib-container { padding-top: 90px; padding-bottom: 90px; }

/* Header (centred, like the design) */
.landing-includes-block .lib-head { max-width: 680px; margin: 0 auto 50px; text-align: center; }
.landing-includes-block .lib-eyebrow { display: inline-block; color: #028d40;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: 14px; }
.landing-includes-block .lib-title { font-size: 36px; line-height: 1.15; font-weight: 500;
	color: #343a40; margin: 0; }

/* ---- RIGHT column: list of included points (2-up grid) ---- */
.landing-includes-block .lib-grid { list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.landing-includes-block .lib-item { display: flex; align-items: flex-start; gap: 14px;
	padding: 18px 0; border-bottom: 1px solid #e6e6e6; }
.landing-includes-block .lib-item__icon { color: #028d40; font-size: 18px; margin-top: 3px;
	width: 22px; text-align: center; flex: none; }
.landing-includes-block .lib-item__body { min-width: 0; }
.landing-includes-block .lib-item__title { font-size: 16px; font-weight: 500; color: #343a40;
	margin: 0 0 3px; text-transform: none; }
.landing-includes-block .lib-item__desc { font-size: 14px; line-height: 1.55; color: #777; margin: 0; }

/* ---- LEFT column: schematic phone (decorative) ---- */
.landing-includes-block .lib-col-phone { display: flex; justify-content: center; }
.landing-includes-block .lib-phone { width: 256px; background: #14181b; border-radius: 44px;
	padding: 11px; box-shadow: 0 30px 60px rgba(0, 0, 0, .18); border: 1px solid #e6e6e6; }
.landing-includes-block .lib-phone__screen { position: relative; background: #fff;
	border-radius: 33px; min-height: 470px; overflow: hidden; display: flex; flex-direction: column; }

.landing-includes-block .lib-phone__notch { align-self: center; flex: none; width: 84px; height: 23px;
	background: #14181b; border-radius: 100px; margin-top: 8px; }

.landing-includes-block .lib-phone__status { display: flex; justify-content: space-between;
	align-items: center; padding: 12px 22px 8px; font-size: 11px; color: #343a40; }
.landing-includes-block .lib-phone__signal { display: flex; gap: 6px; }
.landing-includes-block .lib-phone__signal i { font-size: 9px; }

.landing-includes-block .lib-phone__app { background: #14181b; border-radius: 15px;
	margin: 4px 14px 0; padding: 16px; }
.landing-includes-block .lib-phone__badge { display: inline-block; background: #028d40; color: #fff;
	font-size: 8px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: .02em; }
.landing-includes-block .lib-phone__bar { display: block; height: 9px; border-radius: 4px; margin-top: 10px; }
.landing-includes-block .lib-phone__bar--w1 { width: 88%; background: rgba(255, 255, 255, .9); }
.landing-includes-block .lib-phone__bar--w2 { width: 56%; background: #028d40; }
.landing-includes-block .lib-phone__btn { display: inline-flex; align-items: center; gap: 5px;
	margin-top: 13px; background: #028d40; color: #fff; font-size: 9px; font-weight: 600;
	padding: 6px 12px; border-radius: 6px; }
.landing-includes-block .lib-phone__btn i { font-size: 8px; }

.landing-includes-block .lib-phone__chips { display: flex; gap: 10px; padding: 14px 16px 0; }
.landing-includes-block .lib-phone__chip { flex: 1; display: flex; align-items: center; gap: 7px;
	background: #f1f3f4; border-radius: 9px; padding: 8px 10px; }
.landing-includes-block .lib-phone__chip i { color: #028d40; font-size: 11px; }
.landing-includes-block .lib-phone__chip span { font-size: 9px; line-height: 1.2; color: #343a40; }

.landing-includes-block .lib-phone__checks { list-style: none; margin: 0; padding: 16px 18px 0;
	display: flex; flex-direction: column; gap: 9px; }
.landing-includes-block .lib-phone__checks li { display: flex; align-items: center; gap: 9px; }
.landing-includes-block .lib-phone__checks i { color: #028d40; font-size: 12px; }
.landing-includes-block .lib-phone__checks span { font-size: 10px; color: #343a40; }

.landing-includes-block .lib-phone__chat { margin-top: auto; padding: 16px 16px 20px; }
.landing-includes-block .lib-phone__chatbubble { display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border-radius: 100px; padding: 7px 13px;
	font-size: 10px; color: #343a40; box-shadow: 0 6px 16px rgba(20, 24, 27, .12); }
.landing-includes-block .lib-phone__chatbubble i { color: #028d40; font-size: 11px; }

/* ---- Responsive (theme Bootstrap breakpoints; col-lg-* stacks the two columns) ---- */
@media (max-width: 991.98px) {
	.landing-includes-block .lib-container { padding-top: 56px; padding-bottom: 56px; }
	.landing-includes-block .lib-head { margin-bottom: 36px; }
	.landing-includes-block .lib-title { font-size: 30px; }
	.landing-includes-block .lib-col-phone { margin-bottom: 36px; }
}
@media (max-width: 575.98px) {
	.landing-includes-block .lib-title { font-size: 26px; }
	.landing-includes-block .lib-grid { grid-template-columns: 1fr; }
}