/* =========================================================================
   WebLife Dashboard block — front-end + shared styles.
   Every color references a --wlmi-* custom property set inline on .wlmi-dash
   by render.php (defaults live in render.php / index.js). Change the pickers
   in the block sidebar and everything below re-colors.
   ========================================================================= */

/* ---- Base / reset (shared with infographics) --------------------------- */
.wlmi-root{
	/* Inherit the theme's fonts everywhere — never impose a font family. */
	--wlmi-ff-heading:inherit;
	--wlmi-ff-body:inherit;
	color:var(--wlmi-body-text,#4a4f57);
	font-family:inherit;
	line-height:1.5;
}
.wlmi-root *,.wlmi-root :before,.wlmi-root :after{box-sizing:border-box;margin:0;padding:0}
.wlmi-dash{background:var(--wlmi-page-bg,#fff);overflow:hidden}
/* Only cap width; do NOT force height:auto here — it would out-specify component icon/logo sizing. */
.wlmi-dash img{max-width:100%}

/* ---- Shared infographic card ------------------------------------------ */
.wlmi-root .wlmi-card{background:var(--wlmi-card-bg);border:1px solid var(--wlmi-card-border);border-radius:18px;box-shadow:0 20px 40px -20px rgba(26,37,68,.18),0 2px 6px rgba(26,37,68,.06);display:flex;flex-direction:column;overflow:hidden}
.wlmi-root .wlmi-card-head{padding:24px 28px 0}
.wlmi-root .wlmi-card-eyebrow{color:var(--wlmi-card-eyebrow);font-size:11px;font-weight:600;letter-spacing:.12em;margin-bottom:8px;text-transform:uppercase}
.wlmi-root .wlmi-card-title{color:var(--wlmi-card-title);font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0}
.wlmi-root .wlmi-card-sub{color:var(--wlmi-card-sub);font-size:14px;margin-top:4px}
.wlmi-root .wlmi-card-foot{align-items:center;background:var(--wlmi-card-foot-bg);border-top:1px solid var(--wlmi-card-border);color:var(--wlmi-card-foot-text);display:flex;font-size:12px;justify-content:space-between;margin-top:auto;padding:16px 28px 22px}
.wlmi-root .wlmi-card-foot .wlmi-tag{align-items:center;display:inline-flex;font-weight:500;gap:6px}
.wlmi-root .wlmi-dot{background:var(--wlmi-status-dot);border-radius:50%;box-shadow:0 0 0 3px rgba(46,169,122,.15);height:8px;width:8px}

/* ---- Keyword table ----------------------------------------------------- */
.wlmi-root .wlmi-kw-table{border-collapse:collapse;margin-top:20px;width:100%}
.wlmi-root .wlmi-kw-thead{background:var(--wlmi-kw-head-bg);color:#fff}
.wlmi-root .wlmi-kw-thead th{color:var(--wlmi-kw-head-text);font-size:12px;font-weight:600;letter-spacing:.04em;padding:14px 20px;text-align:left}
.wlmi-root .wlmi-kw-thead th:not(:first-child){text-align:right}
.wlmi-root .wlmi-kw-tbody tr{border-bottom:1px solid var(--wlmi-kw-row-border)}
.wlmi-root .wlmi-kw-tbody tr:last-child{border-bottom:none}
.wlmi-root .wlmi-kw-tbody td{font-size:14px;padding:14px 20px;vertical-align:middle}
.wlmi-root .wlmi-kw-tbody td:not(:first-child){text-align:right}
.wlmi-root .wlmi-kw-term{color:var(--wlmi-kw-text);font-weight:500}
.wlmi-root .wlmi-kw-pos{color:var(--wlmi-kw-text);display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;min-width:44px}
.wlmi-root .wlmi-kw-bar-cell{padding-right:20px;width:32%}
.wlmi-root .wlmi-kw-bar-track{background:var(--wlmi-kw-bar-track);border-radius:6px;height:8px;overflow:hidden;position:relative;width:100%}
.wlmi-root .wlmi-kw-bar-fill{background:linear-gradient(90deg,var(--wlmi-kw-bar-from),var(--wlmi-kw-bar-to));border-radius:6px;height:100%;transition:none;width:0}
.wlmi-root .wlmi-kw-delta{align-items:center;border-radius:999px;display:inline-flex;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;gap:4px;padding:3px 8px}
.wlmi-root .wlmi-kw-delta.up{background:var(--wlmi-delta-up-bg);color:var(--wlmi-delta-up-text);min-width:6rem}
.wlmi-root .wlmi-kw-delta.down{background:var(--wlmi-delta-down-bg);color:var(--wlmi-delta-down-text)}
.wlmi-root .wlmi-kw-delta svg{height:10px;width:10px}

/* ---- Line chart -------------------------------------------------------- */
.wlmi-root .wlmi-lc-wrap{padding:8px 28px 28px}
.wlmi-root .wlmi-lc-metrics{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:4px;margin-top:18px}
.wlmi-root .wlmi-lc-k{color:var(--wlmi-lc-label);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.wlmi-root .wlmi-lc-v{align-items:baseline;color:var(--wlmi-lc-value);display:flex;font-size:28px;font-variant-numeric:tabular-nums;font-weight:700;gap:8px;letter-spacing:-.01em;margin-top:2px}
.wlmi-root .wlmi-lc-delta{border-radius:999px;font-size:13px;font-weight:600;padding:2px 8px}
.wlmi-root .wlmi-lc-delta.up{background:var(--wlmi-delta-up-bg);color:var(--wlmi-delta-up-text)}
.wlmi-root .wlmi-lc-delta.down{background:var(--wlmi-delta-down-bg);color:var(--wlmi-delta-down-text)}
.wlmi-root .wlmi-lc-svg{display:block;height:220px;margin-top:12px;width:100%}
.wlmi-root .wlmi-lc-grid line{stroke:var(--wlmi-lc-grid);stroke-width:1}
.wlmi-root .wlmi-lc-axis text{fill:var(--wlmi-lc-axis);font-family:inherit;font-size:11px}
.wlmi-root .wlmi-lc-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5}
.wlmi-root .wlmi-lc-before{stroke:var(--wlmi-lc-before);stroke-dasharray:4 4}
.wlmi-root .wlmi-lc-after{stroke:var(--wlmi-lc-after)}
.wlmi-root .wlmi-lc-area{opacity:.6}
.wlmi-root .wlmi-lc-svg [data-dot]{fill:var(--wlmi-lc-dot)}
.wlmi-root .wlmi-lc-legend{color:var(--wlmi-card-sub);display:flex;font-size:12px;gap:18px;margin-top:14px}
.wlmi-root .wlmi-lc-sw{border-radius:2px;display:inline-block;height:2px;margin-right:6px;vertical-align:middle;width:12px}

/* ---- Rank grid --------------------------------------------------------- */
.wlmi-root table.wlmi-rk{border-collapse:separate;border-spacing:0;font-size:14px;margin-top:20px;width:100%}
.wlmi-root table.wlmi-rk thead th{background:var(--wlmi-rk-head-bg);border-right:1px solid var(--wlmi-rk-head-border);color:var(--wlmi-rk-head-text);font-size:13px;font-weight:600;letter-spacing:.02em;padding:14px 8px;text-align:center}
.wlmi-root table.wlmi-rk thead th.wlmi-rk-kw-col{color:var(--wlmi-kw-head-text);padding-left:20px;text-align:left}
.wlmi-root table.wlmi-rk thead th:last-child{border-right:none}
.wlmi-root table.wlmi-rk tbody td{border-bottom:1px solid var(--wlmi-card-border);border-right:1px solid var(--wlmi-card-border);height:40px;padding:0;text-align:center;vertical-align:middle}
.wlmi-root table.wlmi-rk tbody td:last-child{border-right:none}
.wlmi-root table.wlmi-rk tbody tr:last-child td{border-bottom:none}
.wlmi-root .wlmi-rk-kw-cell{background:var(--wlmi-rk-cell-bg);color:var(--wlmi-rk-cell-text);font-weight:500;min-width:240px;padding:10px 20px;text-align:left}
.wlmi-root .wlmi-rk-rank{color:#fff;display:block;font-size:14px;font-variant-numeric:tabular-nums;font-weight:600;height:100%;line-height:40px;min-height:40px;position:relative;transition:background-color .12s linear;width:100%}
.wlmi-root .wlmi-rk-tier-blue{background:var(--wlmi-rk-tier-blue)}
.wlmi-root .wlmi-rk-tier-green{background:var(--wlmi-rk-tier-green)}
.wlmi-root .wlmi-rk-tier-ygreen{background:var(--wlmi-rk-tier-ygreen)}
.wlmi-root .wlmi-rk-tier-yellow{background:var(--wlmi-rk-tier-yellow)}
.wlmi-root .wlmi-rk-tier-orange{background:var(--wlmi-rk-tier-orange)}
.wlmi-root .wlmi-rk-tier-red{background:var(--wlmi-rk-tier-red)}
.wlmi-root .wlmi-rk-empty{background:var(--wlmi-rk-empty-bg);color:transparent}
.wlmi-root .wlmi-rk-reveal{animation:wlmi-rkCellReveal .42s ease-out both;box-shadow:0 10px 22px -8px rgba(26,37,68,.45),0 2px 6px rgba(26,37,68,.2);position:relative;z-index:2}
@keyframes wlmi-rkCellReveal{0%{opacity:0;transform:scale(1.7)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.wlmi-root .wlmi-rk-trend{background:var(--wlmi-rk-cell-bg);width:54px}
.wlmi-root .wlmi-rk-trend-glyph{align-items:center;color:var(--wlmi-rk-trend);display:inline-flex;height:40px;justify-content:center;width:100%}
.wlmi-root .wlmi-rk-trend-glyph svg{height:14px;width:14px}
.wlmi-root .wlmi-rk-legend{color:var(--wlmi-card-sub);display:flex;flex-wrap:wrap;font-size:12px;gap:14px;padding:14px 28px 4px}
.wlmi-root .wlmi-rk-sw{border-radius:3px;display:inline-block;height:12px;margin-right:6px;vertical-align:middle;width:18px}

/* ---- Locations --------------------------------------------------------- */
.wlmi-root .wlmi-lo-table{border-collapse:collapse;margin:20px 0 0;table-layout:fixed;width:100%}
.wlmi-root .wlmi-lo-thead{background:var(--wlmi-lo-head-bg);color:#fff}
.wlmi-root .wlmi-lo-thead th{color:var(--wlmi-lo-head-text);font-size:12px;font-weight:600;letter-spacing:.04em;padding:14px 22px;text-align:left;text-transform:none}
.wlmi-root .wlmi-lo-thead th:first-child{width:36%}
.wlmi-root .wlmi-lo-tbody tr{border-bottom:1px solid var(--wlmi-lo-row-border)}
.wlmi-root .wlmi-lo-tbody tr:last-child{border-bottom:none}
.wlmi-root .wlmi-lo-tbody tr:nth-child(2n){background:var(--wlmi-lo-row-alt)}
.wlmi-root .wlmi-lo-tbody td{color:var(--wlmi-lo-text);font-size:16px;padding:14px 22px;vertical-align:middle}
.wlmi-root .wlmi-lo-loc{font-weight:500}
.wlmi-root .wlmi-lo-activity-wrap{align-items:center;display:inline-flex;gap:10px;opacity:0}
.wlmi-root .wlmi-lo-activity-wrap.wlmi-lo-reveal{animation:wlmi-lo-pop .42s cubic-bezier(.34,1.56,.64,1) forwards}
.wlmi-root .wlmi-lo-activity-wrap.wlmi-lo-reveal .wlmi-lo-arrow{animation:wlmi-lo-arrow-pop .52s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes wlmi-lo-pop{0%{opacity:0;transform:translateY(-4px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}
@keyframes wlmi-lo-arrow-pop{0%{transform:scale(0) rotate(-12deg)}55%{transform:scale(1.2) rotate(4deg)}to{transform:scale(1) rotate(0)}}
.wlmi-root .wlmi-lo-arrow{align-items:center;color:var(--wlmi-lo-arrow);display:inline-flex;flex-shrink:0;height:28px;justify-content:center;transform:scale(0);width:28px}
.wlmi-root .wlmi-lo-arrow svg{display:block;height:24px;width:24px}
.wlmi-root .wlmi-lo-text{line-height:1.45}
.wlmi-root .wlmi-lo-term{color:var(--wlmi-lo-term);font-style:italic}
.wlmi-root .wlmi-lo-text strong{color:var(--wlmi-kw-text);font-weight:700}

/* ---- Visibility gauge -------------------------------------------------- */
.wlmi-root .wlmi-vs-wrap{align-items:center;display:flex;flex:1;flex-direction:column;gap:12px;justify-content:flex-start;padding:0 32px 36px;position:relative}
.wlmi-root .wlmi-vs-icons{inset:0;pointer-events:none;position:absolute;transition:opacity .7s ease}
.wlmi-root .wlmi-vs-icons.wlmi-vs-faded{opacity:1}
.wlmi-root .wlmi-vs-icon{border-radius:16px;box-shadow:0 8px 18px -6px rgba(26,37,68,.25),0 2px 4px rgba(26,37,68,.08);opacity:0;overflow:hidden;position:absolute;transform:scale(.3) rotate(-10deg)}
.wlmi-root .wlmi-vs-icon img{display:block;height:100%;object-fit:cover;width:100%}
.wlmi-root .wlmi-vs-icon.wlmi-vs-pop{animation:wlmi-vsIconPop .46s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes wlmi-vsIconPop{0%{opacity:0;transform:scale(.3) rotate(-10deg)}60%{opacity:1;transform:scale(1.12) rotate(3deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.wlmi-root .wlmi-vs-gauge{display:block;max-width:70%;position:relative;width:360px}
.wlmi-root .wlmi-vs-gauge svg{display:block;height:auto;overflow:visible;width:100%}
.wlmi-root .wlmi-vs-track{fill:none;stroke:var(--wlmi-vs-track);stroke-linecap:round;stroke-width:18}
.wlmi-root .wlmi-vs-fill{fill:none;stroke:var(--wlmi-vs-fill);stroke-dasharray:282.7px;stroke-dashoffset:282.7px;stroke-linecap:round;stroke-width:18;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.85,.3,1)}
.wlmi-root .wlmi-vs-center{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;padding-top:18%;position:absolute}
.wlmi-root .wlmi-vs-score{color:var(--wlmi-vs-score);font-size:76px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.04em;line-height:1}
.wlmi-root .wlmi-vs-trend{align-items:baseline;color:var(--wlmi-vs-text);display:inline-flex;font-size:13px;font-weight:500;gap:6px;justify-content:center;margin-top:6px;text-align:center}
.wlmi-root .wlmi-vs-trend svg{color:var(--wlmi-vs-accent);height:12px;width:12px}
.wlmi-root .wlmi-vs-delta{color:var(--wlmi-vs-score);font-weight:700}
.wlmi-root .wlmi-vs-since{color:var(--wlmi-vs-score);font-weight:500}
.wlmi-root .wlmi-vs-pill{align-items:center;border:1.5px solid var(--wlmi-vs-accent);border-radius:999px;color:var(--wlmi-vs-accent);display:inline-flex;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:10px;padding:9px 22px}
.wlmi-root .wlmi-vs-summary{color:var(--wlmi-vs-summary);font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin-top:18px;max-width:460px;text-align:center}
@media(max-width:760px){.wlmi-root .wlmi-vs-icons{display:none}}
@media(max-width:1800px){.wlmi-root.wlmi-visibility .wlmi-vs-icon{border-radius:13px;height:50px!important;width:50px!important}}
@media(max-width:1440px){.wlmi-root.wlmi-visibility .wlmi-vs-icon{border-radius:11px;height:42px!important;width:42px!important}.wlmi-root.wlmi-visibility .wlmi-vs-gauge{width:240px}.wlmi-root.wlmi-visibility .wlmi-vs-score{font-size:50px}}
@media(max-width:1024px){.wlmi-root.wlmi-visibility .wlmi-vs-icon{border-radius:8px;height:30px!important;width:30px!important}.wlmi-root.wlmi-visibility .wlmi-vs-gauge{width:170px}.wlmi-root.wlmi-visibility .wlmi-vs-score{font-size:44px}}

/* ---- Carousel (3D ring) ------------------------------------------------ */
.wlmi-root.wlmi-carousel .wlmi-car-head{margin:0 auto;max-width:1100px;padding:0 32px;text-align:center}
.wlmi-root.wlmi-carousel .wlmi-car-logo-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.wlmi-root.wlmi-carousel .wlmi-car-logo{display:block;height:78px;width:auto}
.wlmi-root.wlmi-carousel .wlmi-car-wordmark{color:var(--wlmi-car-wordmark);font-family:var(--wlmi-ff-heading);font-size:52px;font-weight:700;letter-spacing:-.02em;line-height:.78;position:relative;top:2px}
.wlmi-root.wlmi-carousel .wlmi-car-intro{color:var(--wlmi-car-intro);font-size:15px;line-height:1.55;margin:18px auto 0;max-width:820px;text-align:center}
.wlmi-root.wlmi-carousel .wlmi-car-scene{display:grid;min-height:520px;overflow:hidden;perspective:180em;perspective-origin:50% 50%;place-items:center;width:100%}
.wlmi-root.wlmi-carousel .wlmi-car-ring{animation:wlmi-car-spin 64s linear infinite;display:grid;place-self:center;transform-style:preserve-3d}
@keyframes wlmi-car-spin{to{transform:rotateY(1turn)}}
@media(prefers-reduced-motion:reduce){.wlmi-root.wlmi-carousel .wlmi-car-ring{animation-duration:256s}}
.wlmi-root.wlmi-carousel .wlmi-car-card{--w:64em;--ba:calc(1turn/var(--n));align-items:stretch;aspect-ratio:16/9;backface-visibility:hidden;background:var(--wlmi-card-bg);border-radius:22px;box-shadow:0 30px 60px -20px rgba(26,37,68,.35),0 8px 18px -8px rgba(26,37,68,.18);display:flex;grid-area:1/1;justify-content:stretch;overflow:hidden;transform:rotateY(calc(var(--i)*var(--ba))) translateZ(calc((var(--w)*0.5*-1 + -1em)/tan(.5 * var(--ba))));width:var(--w)}
@media(min-width:1920px){.wlmi-root.wlmi-carousel .wlmi-car-card{--w:71em}}
@media(min-width:2560px){.wlmi-root.wlmi-carousel .wlmi-car-card{--w:81em}}
.wlmi-root.wlmi-carousel .wlmi-car-slot{min-height:0;overflow:hidden;width:100%}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-card{backface-visibility:hidden;background:var(--wlmi-card-bg);border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-card-head{padding:28px 32px 0}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-card-title{font-size:26px}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-lc-wrap{display:flex;flex:1;flex-direction:column;padding:12px 28px 20px}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-lc-svg{display:block;flex:0 0 auto;height:46%;margin-top:6px;min-height:0;width:100%}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-kw-table,.wlmi-root.wlmi-carousel .wlmi-car-card table.wlmi-rk{flex:1}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-lo-tbody td{font-size:13px;padding:10px 22px}
.wlmi-root.wlmi-carousel .wlmi-car-card .wlmi-vs-score{font-size:68px}
@media(max-width:1024px){.wlmi-root.wlmi-carousel .wlmi-car-scene{min-height:380px}.wlmi-root.wlmi-carousel .wlmi-car-wordmark{font-size:38px}}

/* ---- Overlap ----------------------------------------------------------- */
.wlmi-root.wlmi-overlap .wlmi-ov-scene{align-items:stretch;display:flex;flex-direction:column;position:relative;width:100%}
.wlmi-root.wlmi-overlap .wlmi-ov-slot{position:relative}
.wlmi-root.wlmi-overlap .wlmi-ov-ctr{align-self:flex-start;width:65%;z-index:1}
.wlmi-root.wlmi-overlap .wlmi-ov-kw{align-self:flex-end;margin-top:-15%;width:70%;z-index:3}
.wlmi-root.wlmi-overlap .wlmi-ov-scene .wlmi-card{background:var(--wlmi-card-bg);border:1px solid var(--wlmi-card-border);border-radius:12px;box-shadow:0 50px 90px -34px rgba(26,37,68,.32),0 16px 34px -20px rgba(26,37,68,.22);display:flex;flex-direction:column;overflow:hidden}
.wlmi-root.wlmi-overlap .wlmi-ov-scene .wlmi-card-foot{display:none}
.wlmi-root.wlmi-overlap .wlmi-ov-scene .wlmi-kw-tbody td{font-size:12.5px;padding:8px 16px}
.wlmi-root.wlmi-overlap .wlmi-ov-scene .wlmi-kw-thead th{font-size:11px;padding:9px 16px;white-space:nowrap}
.wlmi-root.wlmi-overlap .wlmi-ov-ctr .wlmi-lc-wrap{display:flex;flex:1;flex-direction:column;padding-bottom:18px}
.wlmi-root.wlmi-overlap .wlmi-ov-ctr .wlmi-lc-svg{flex:1;height:auto;margin-top:8px;min-height:0}
.wlmi-root.wlmi-overlap .wlmi-ov-kw .wlmi-kw-table{flex:1;margin-top:16px}
.wlmi-root.wlmi-overlap .wlmi-ov-icon{filter:drop-shadow(0 18px 30px rgba(26,37,68,.16));height:auto;opacity:1;pointer-events:none;position:absolute;width:clamp(180px,22%,260px);z-index:4}
.wlmi-root.wlmi-overlap .wlmi-ov-icon.wlmi-ov-pop{animation:wlmi-ovIconPop .56s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes wlmi-ovIconPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.wlmi-root.wlmi-overlap .wlmi-ov-icon-1{right:2rem;top:0}
.wlmi-root.wlmi-overlap .wlmi-ov-icon-2{bottom:2rem;left:-1rem}
@media(max-width:1024px){.wlmi-root.wlmi-overlap .wlmi-ov-ctr,.wlmi-root.wlmi-overlap .wlmi-ov-icon{display:none}.wlmi-root.wlmi-overlap .wlmi-ov-kw{align-self:stretch;margin-top:0;width:100%}}

/* ---- Mobile-image fallback (infographics) ------------------------------ */
.wlmi-root .wlmi-mob-img{border-radius:12px;display:none;height:auto;width:100%}
@media(max-width:760px){.wlmi-root.wlmi-has-mob>:not(.wlmi-mob-img){display:none!important}.wlmi-root.wlmi-has-mob>.wlmi-mob-img{display:block}}

/* =========================================================================
   MARKETING SECTIONS
   ========================================================================= */
.wlmi-dash-sec{padding:clamp(40px,5vw,110px) 0;position:relative}
/* The carousel scene is already tall, so drop its bottom padding to tighten the
   transition into the section that follows it. */
/* #26 — the carousel lifts up so its cards slightly overlap the hero's lower band (below the hero
   copy). Expressed in rem so it tracks the theme's fluid root font-size (0.83vw, clamped to 12px
   at <=1440px), keeping the overlap proportional to the 43rem hero at every width. Raised above the
   hero via a stacking context so the cards paint on top of the hero background. */
.wlmi-dash-sec-carousel{margin-top:-18rem;padding-bottom:0;position:relative;z-index:5}
/* Below the theme's desktop range the two-column hero and the ring change proportions, so drop the
   overlap back to the original spacing — the lift is a desktop-only enhancement. */
@media(max-width:1024px){.wlmi-dash-sec-carousel{margin-top:0}}
/* Hero (#364) leads the page full-bleed; its own styles are in the Hero block below. */
/* Fluid container: full width minus viewport-scaled gutters, capped for readability on 4K. */
.wlmi-dash-con{margin:0 auto;max-width:min(1760px,100%);padding:0 clamp(18px,5vw,90px);width:100%}
.wlmi-dash-narrow{max-width:min(960px,100%)}
.wlmi-dash blockquote{border:0;quotes:none}
.wlmi-dash blockquote:before,.wlmi-dash blockquote:after{content:none}
.wlmi-dash-h2{color:var(--wlmi-heading);font-family:var(--wlmi-ff-heading);font-size:clamp(30px,3.6vw,47px);font-weight:800;letter-spacing:-.01em;line-height:1.14;margin:0 0 clamp(16px,1.7vw,26px)}
.wlmi-dash-sec p{color:var(--wlmi-body-text);font-size:clamp(18px,1.4vw,22px);line-height:1.6;margin:0 0 18px}
.wlmi-dash-sec p:last-child{margin-bottom:0}
.wlmi-dash a:not(.wlmi-dash-btn){color:var(--wlmi-accent);text-decoration:underline}

/* Buttons — gradient base with a dark wipe that slides up on hover, arrow nudge, press-scale */
.wlmi-dash-btnwrap{margin-top:clamp(24px,2.6vw,40px)}
.wlmi-dash-btn-center{display:flex;justify-content:center}
/* Intro + CTA section (#390 — restored from 1.3.0) */
.wlmi-dash-intro{padding-top:clamp(24px,3vw,52px)}
.wlmi-dash-intro .wlmi-dash-h2{margin-bottom:20px}
.wlmi-dash-btn{align-items:center;background:linear-gradient(90deg,var(--wlmi-btn-grad-from),var(--wlmi-btn-bg));border-radius:999px;color:var(--wlmi-btn-text);cursor:pointer;display:inline-flex;font-size:clamp(18px,1.1vw,20px);font-weight:700;gap:10px;overflow:hidden;padding:16px 34px;position:relative;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.wlmi-dash-btn:before{background:var(--wlmi-btn-hover);content:"";inset:0;position:absolute;transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.45,0,.2,1)}
.wlmi-dash-btn>span{position:relative;z-index:1}
.wlmi-dash-btn:hover{color:var(--wlmi-btn-text);box-shadow:0 18px 30px -14px rgba(0,0,0,.4);transform:translateY(-2px)}
.wlmi-dash-btn:hover:before{transform:scaleX(1)}
.wlmi-dash-btn:active{transform:scale(.97)}
.wlmi-dash-btn-arrow{font-size:20px;line-height:1;transition:transform .25s ease}
.wlmi-dash-btn:hover .wlmi-dash-btn-arrow{transform:translateX(4px)}

/* Checklist */
.wlmi-dash-checklist{list-style:none;margin:18px 0 0;padding:0;margin-left: 13px;}
.wlmi-dash-checklist li{color:var(--wlmi-body-text);font-size:clamp(17px,1.25vw,19px);line-height:1.5;margin-bottom:13px;padding-left:38px;position:relative}
.wlmi-dash-checklist li:before{background-color:var(--wlmi-check);content:"";height:22px;left:0;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");position:absolute;top:1px;width:22px}

/* Two-column rows */
/* #391 — column-gap is the side-by-side spacing; row-gap only applies once the columns wrap
   (stack), so the vertical gap becomes 5rem when stacked without needing a breakpoint. */
.wlmi-dash-row{align-items:center;column-gap:clamp(24px,4vw,64px);display:flex;flex-wrap:wrap;row-gap:5rem}
.wlmi-dash-col{flex:1 1 380px;min-width:0}
.wlmi-dash-col-graphic,.wlmi-dash-col-image{display:flex;flex-direction:column;justify-content:center}
.wlmi-dash-col-image img{border-radius:16px}

/* Hero (#364) — ported from the theme's service-hero (matches /web-design-company/), baked in
   so it styles regardless of the page's wrapper id. Full-bleed editable background image; the
   selected image carries its own baked-in gradient (like the theme's header images), so there is
   no CSS overlay. White heading/copy on the left, no foreground image. Rem values mirror the
   theme so it matches on the live site; the h1 inherits the theme font. */
.wlmi-dash-hero{background-color:var(--wlmi-cta-bg);background-position:center center;background-repeat:no-repeat;background-size:cover;display:flex;height:43rem;overflow:hidden;position:relative}
.wlmi-dash-hero .service-hero-row{display:flex;margin:0 auto;max-width:min(1760px,100%);padding:0 clamp(18px,5vw,90px);position:relative;width:100%;z-index:3}
.wlmi-dash-hero .left{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;padding:10rem 0 0 0;position:relative;width:49.6%;z-index:3}
.wlmi-dash-hero-brand{align-items:flex-end;display:flex;flex-wrap:nowrap;gap:.4rem .9rem;margin-bottom:2rem}
.wlmi-dash-hero .wlmi-dash-hero-logo{display:block;flex:0 0 auto;height:clamp(44px,5vw,72px);margin:0;max-width:100%;width:auto}
.wlmi-dash-hero-wordmark{color:#fff;flex:0 0 auto;font-family:inherit;font-size:clamp(30px,3.4vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.wlmi-dash-hero .left h1{color:#fff;font-family:inherit;font-size:5.5rem;font-weight:700;letter-spacing:-.1rem;line-height:1.04;margin:0 0 2rem}
.wlmi-dash-hero .bottom-text{align-items:center;display:flex;text-align:left;width:100%}
.wlmi-dash-hero .text-area{color:#fff;position:relative;width:100%;z-index:2}
.wlmi-dash-hero .text-area p{color:#fff;font-size:1.425rem;line-height:1.5;margin:0 0 1rem}
.wlmi-dash-hero .text-area p:last-child{margin-bottom:0}
@media(max-width:1200px){
	.wlmi-dash-hero{height:40rem}
	.wlmi-dash-hero .left{padding-left:0}
	.wlmi-dash-hero .left h1{font-size:4.75rem}
	.wlmi-dash-hero .text-area p{font-size:1.1rem}
}
@media(max-width:1024px){
	.wlmi-dash-hero{height:35rem}
	.wlmi-dash-hero .left h1{font-size:4rem}
}
@media(max-width:992px){
	.wlmi-dash-hero .left h1{font-size:3.5rem}
}
@media(max-width:768px){
	.wlmi-dash-hero{height:40rem}
	.wlmi-dash-hero .service-hero-row{padding-bottom:6rem;padding-top:6rem}
	.wlmi-dash-hero .left{align-items:center;padding:0;text-align:center;width:100%}
	.wlmi-dash-hero-brand{flex-wrap:wrap;justify-content:center}
	.wlmi-dash-hero .left h1{font-size:3.25rem;text-align:center}
	.wlmi-dash-hero .bottom-text,.wlmi-dash-hero .text-area{text-align:center}
}

/* AI Search Visibility Insights (#368) — full-bleed background-image section (matches "Why Google
   Ads Management?" on the AdWords page). The editable image covers the section; the LEFT text
   (heading/copy/checklist) turns white so it reads over the image; the RIGHT gauge is unchanged
   (its own light card). Falls back to the dark colour when no image is set. */
.wlmi-dash-aiv{background-color:var(--wlmi-cta-bg);background-position:center center;background-repeat:no-repeat;background-size:cover}
.wlmi-dash-aiv .wlmi-dash-col-text .wlmi-dash-h2{color:#fff}
.wlmi-dash-aiv .wlmi-dash-col-text p{color:rgba(255,255,255,.85)}
.wlmi-dash-aiv .wlmi-dash-col-text .wlmi-dash-checklist li{color:#fff}
.wlmi-dash-aiv .wlmi-dash-col-text .wlmi-dash-checklist li:before{background-color:#fff}

/* Dark CTA */
/* Mid-page CTA — restyled to match jlbworks' "Have A Project For Us?" block (#369):
   centered dark panel, heading, orange gradient underline, outlined "+" button. */
.wlmi-dash-cta{align-items:center;background:var(--wlmi-cta-bg);border-radius:clamp(24px,3vw,44px);color:var(--wlmi-cta-text);display:flex;flex-direction:column;padding:clamp(48px,6vw,96px) clamp(28px,4vw,56px);text-align:center}
.wlmi-dash-cta h2{color:var(--wlmi-cta-text);font-family:var(--wlmi-ff-heading);font-size:clamp(30px,3.6vw,52px);font-weight:800;line-height:1.15;margin:0}
.wlmi-dash-cta-rule{background:linear-gradient(90deg,var(--wlmi-btn-grad-from),var(--wlmi-btn-bg));border-radius:3px;height:4px;margin:clamp(20px,2vw,30px) 0 clamp(24px,2.6vw,40px);width:clamp(120px,13vw,190px)}
.wlmi-dash-cta-btn{align-items:center;background:transparent;border:2px solid var(--wlmi-accent);border-radius:10px;color:var(--wlmi-cta-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:clamp(15px,1.1vw,18px);font-weight:600;gap:12px;letter-spacing:.3px;padding:16px 32px;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.wlmi-dash-cta-btn:hover{background:var(--wlmi-accent);color:#fff}
.wlmi-dash-cta-btn-plus{font-size:1.4em;font-weight:400;line-height:0}

/* Service grid */
.wlmi-dash-svc-head{align-items:center;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-bottom:10px}
.wlmi-dash-svc-head h2{color:var(--wlmi-heading);font-family:var(--wlmi-ff-heading);font-size:clamp(30px,3.6vw,47px);font-weight:800;margin:0}
.wlmi-dash-svc-logo{height:clamp(40px,4.4vw,66px);width:auto}
.wlmi-dash-services .wlmi-dash-svc-intro{color:var(--wlmi-body-text);font-size:clamp(16px,1.2vw,19px);line-height:1.6;margin:0 auto clamp(76px,7vw,104px);max-width:820px;text-align:center}
/* Service grid (#371) — dark-blue cards from /seo-agency/. Icon + title stay visible (white) at
   all times; on hover the card fills with the brand gradient (same 90deg f9ba61→e74021 as the
   reference) and the description + checklist reveal beneath the title. At ≤1024px (touch, no
   hover) the open/gradient state is permanent. Colours editable via --wlmi-svc-card/-title/-text. */
.wlmi-dash-svc-grid{display:grid;gap:clamp(22px,2.4vw,40px);grid-template-columns:repeat(3,1fr)}
.wlmi-dash-svc-item{align-items:center;background:var(--wlmi-svc-card);display:flex;flex-direction:column;justify-content:center;min-height:372px;overflow:hidden;padding:clamp(28px,2.6vw,44px);position:relative;text-align:center}
.wlmi-dash-svc-item::before{background:linear-gradient(90deg,var(--wlmi-btn-grad-from),var(--wlmi-btn-bg));content:"";inset:0;opacity:0;position:absolute;transition:opacity .35s ease;z-index:0}
.wlmi-dash-svc-item:hover::before{opacity:1}
.wlmi-dash-svc-item>*{position:relative;z-index:1}
.wlmi-dash-svc-icon{margin-bottom:clamp(14px,1.4vw,22px)}
.wlmi-dash-svc-icon img{filter:brightness(0) invert(1);height:clamp(50px,4.4vw,66px);object-fit:contain;width:clamp(50px,4.4vw,66px)}
.wlmi-dash-svc-title{color:var(--wlmi-svc-title);font-family:var(--wlmi-ff-heading);font-size:clamp(21px,1.7vw,26px);font-weight:800;line-height:1.2;margin:0}
/* #386 — fixed card height so the card/grid never resizes on hover; icon + title are centred at
   rest and glide up as the description reveals (max-height + fade). The brand gradient is the
   ::before overlay above, faded in via opacity so the background no longer flashes. */
.wlmi-dash-svc-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .35s ease,margin-top .4s ease;width:100%}
.wlmi-dash-svc-item:hover .wlmi-dash-svc-reveal{margin-top:clamp(12px,1.2vw,18px);max-height:600px;opacity:1}
/* view.js sizeServiceCards() adds .wlmi-svc-measure to read each card's open height.
   transition:none so the open max-height/margin apply instantly (otherwise the synchronous
   measurement reads the start of the 0.4s transition = the collapsed height). */
.wlmi-svc-measure .wlmi-dash-svc-reveal{margin-top:clamp(12px,1.2vw,18px);max-height:600px;transition:none}
.wlmi-dash-svc-reveal p{color:var(--wlmi-svc-text);font-size:15px;line-height:1.55;margin:0 0 12px}
.wlmi-dash-svc-reveal .wlmi-dash-checklist{display:inline-block;margin:6px 0 0;text-align:left}
.wlmi-dash-svc-reveal .wlmi-dash-checklist li{color:var(--wlmi-svc-text);font-size:15px;margin-bottom:8px}
.wlmi-dash-svc-reveal .wlmi-dash-checklist li:before{background-color:var(--wlmi-svc-text)}
@media(max-width:1024px){
	.wlmi-dash-svc-grid{grid-template-columns:repeat(2,1fr)}
	.wlmi-dash-svc-item::before{opacity:1}
	.wlmi-dash-svc-reveal{margin-top:clamp(12px,1.2vw,18px);max-height:600px;opacity:1}
}
@media(max-width:640px){.wlmi-dash-svc-grid{grid-template-columns:1fr}}

/* Tabs (#370) — copied from the theme's tab component (matches "Our Strategies for Web Design" on
   /web-design-company/): dark section, a horizontal pill tab bar (active/hover = amber outline +
   white label, inactive = grey), and stacked panels that cross-fade on select. One change from the
   reference — each panel puts its text on the left and the per-tab image on the right. */
/* #387 — the tabs ("Connected to Your Team") section matches the service-card fill above it
   (--wlmi-svc-card) rather than the lighter --wlmi-cta-bg, so the two dark sections align. */
.wlmi-dash-tabs{background-color:var(--wlmi-svc-card)}
.wlmi-dash-tabs .wlmi-dash-h2{color:#fff;margin-bottom:clamp(20px,2vw,32px)}
.wlmi-dash-tabs-selectors{align-items:stretch;display:flex;flex-wrap:nowrap;gap:1rem;width:100%}
.wlmi-dash-tab-sel{appearance:none;background:transparent;border:2px solid transparent;border-radius:999px;cursor:pointer;flex:1 1 auto;font-family:inherit;min-width:0;padding:.5rem 2rem;text-align:center;transition:border-color .3s ease}
.wlmi-dash-tab-sel>p{color:#abb3c0;font-size:clamp(16px,1.2vw,19px);font-weight:700;line-height:1.2;margin:0;transition:color .3s ease}
.wlmi-dash-tab-sel.active,.wlmi-dash-tab-sel:hover{border-color:var(--wlmi-btn-grad-from)}
.wlmi-dash-tab-sel.active>p,.wlmi-dash-tab-sel:hover>p{color:#fff}
.wlmi-dash-tabs-content{min-height:8rem;position:relative;width:100%}
.wlmi-dash-tab-content{align-items:center;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);opacity:0;padding-top:clamp(28px,3vw,48px);pointer-events:none;position:absolute;top:0;width:100%}
.wlmi-dash-tab-content.active{opacity:1;pointer-events:auto;position:relative;transition:opacity 1s ease}
.wlmi-dash-tab-content-text{color:#fff;width:100%}
.wlmi-dash-tab-content-text h3{color:#fff;font-size:clamp(22px,1.9vw,32px);font-weight:700;line-height:1.15;margin:0 0 clamp(10px,1vw,16px)}
.wlmi-dash-tab-content-text p{color:#fff;font-size:clamp(16px,1.15vw,18px);line-height:1.6;margin:0 0 14px}
.wlmi-dash-tab-content-text p:last-child{margin-bottom:0}
/* Tab selectors responsiveness (#370): >960px all pills stay on one row and
   flex to fill the width (no wrapping); at ≤960px they break to two rows and
   each pill fills half the row (flex-basis 50%); ≤575px they stack into a
   single full-width column. */
@media(max-width:960px){
	.wlmi-dash-tabs-selectors{flex-wrap:wrap}
	.wlmi-dash-tab-sel{flex:1 1 calc(50% - .5rem)}
	.wlmi-dash-tab-content{gap:24px}
}
@media(max-width:575px){
	.wlmi-dash-tabs-selectors{flex-direction:column}
	.wlmi-dash-tab-sel{flex:1 1 auto}
}

/* Testimonials (#373) — Slick 3-up slider ported from the theme's wst-testimonial-slider,
   namespaced + recoloured to the WebLife accent gradient. Left-most visible slide is the
   "current" one (full colour, grad-line expands); the others fade back. Capped at 6 + CTA.
   jQuery + Slick are provided by the theme; view.js inits Slick when they are present. */
.wlmi-dash-tslick-sec{position:relative}
.wlmi-dash-tslick-head{display:flex;margin-bottom:clamp(14px,1.6vw,24px);padding-left:clamp(12px,1.4vw,22px)}
.wlmi-dash-tslick-head .wlmi-dash-h2{color:var(--wlmi-heading);font-weight:800}
.wlmi-dash-tslick-rating{margin:0 0 clamp(28px,3.4vw,52px);padding-left:clamp(12px,1.4vw,22px)}
.wlmi-dash-tslick-rating img{height:auto;max-height:40px;width:auto}
.wlmi-dash-tslick{position:relative}
.wlmi-dash-tslick .slick-slide{height:auto}
.wlmi-dash-tslick .slick-track{display:flex}
.wlmi-dash-tslide{align-items:flex-start;display:flex!important;flex-direction:column;height:auto;justify-content:flex-start;opacity:.35;padding:0 clamp(12px,1.4vw,22px);transition:opacity 1s ease-in-out .6s}
/* Slick applies .slick-current directly onto the slide element (.wlmi-dash-tslide),
   so the current-slide rules target the element itself, not a descendant. */
.wlmi-dash-tslick .wlmi-dash-tslide.slick-current{opacity:1}
.wlmi-dash-tslide--nologo{padding-top:52px}
.wlmi-dash-tslide-logo{height:52px;margin-bottom:0;max-width:100%;object-fit:contain;object-position:left top;width:auto}
.wlmi-dash-tslide-line{background:linear-gradient(45deg,var(--wlmi-btn-bg),var(--wlmi-btn-grad-from));height:6px;margin:clamp(18px,2vw,30px) 0;max-width:0;transition:max-width 1s ease-in-out .6s;width:260px}
.wlmi-dash-tslick .slick-current .wlmi-dash-tslide-line{max-width:100%}
.wlmi-dash-tslide-quote{color:var(--wlmi-test-text);font-size:clamp(16px,1.15vw,19px);line-height:1.5}
.wlmi-dash-tslide-quote p{margin:0 0 16px}
.wlmi-dash-tslide-quote p:last-child{margin-bottom:clamp(28px,3vw,44px)}
.wlmi-dash-tslide-name{color:#000;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:color 1s ease-in-out .6s}
.wlmi-dash-tslick .slick-current .wlmi-dash-tslide-name{color:var(--wlmi-btn-bg)}
/* arrow-dot pagination (dots rendered as arrow icons; no prev/next arrows) */
.wlmi-dash-tslick .slick-dots{align-items:center;display:flex;gap:6px;justify-content:center;list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0}
.wlmi-dash-tslick .slick-dots li{height:auto;line-height:1;margin:0;width:auto}
.wlmi-dash-tslick .slick-dots li button{background:none;border:0;cursor:pointer;font-size:0;line-height:0;padding:0}
.wlmi-dash-tslick .slick-dots li button:before{content:none}
.wlmi-dash-tslick .slick-dots li button svg{color:#c2c7d0;display:block;height:22px;transition:color .3s ease;width:22px}
.wlmi-dash-tslick .slick-dots li.slick-active button svg,.wlmi-dash-tslick .slick-dots li button:hover svg{color:var(--wlmi-heading)}
.wlmi-dash-tslick-cta.wlmi-dash-btnwrap{margin-top:clamp(30px,3.2vw,48px)}
@media(max-width:768px){
	.wlmi-dash-tslide{padding:0 12px}
	.wlmi-dash-tslide-line{width:100%}
}

/* FAQ (#367) — matches the "Our Strategies for SEO & AI Search" accordion on /seo-agency/:
   light background, a borderless list with an accent-gradient rule line between items, large
   dark bold questions, a dark "+" toggle that becomes "−" when open, and answers that fully
   collapse when closed. Colours stay on the editable --wlmi-faq-* vars. */
.wlmi-dash-faq .wlmi-dash-h2{color:var(--wlmi-faq-question)}
.wlmi-dash-faq-list{display:flex;flex-direction:column;margin-top:clamp(28px,3vw,48px)}
.wlmi-dash-faq-item{padding:clamp(22px,2.4vw,34px) 0;position:relative}
.wlmi-dash-faq-item:after{background:linear-gradient(90deg,var(--wlmi-btn-grad-from),var(--wlmi-btn-bg));bottom:0;content:"";height:4px;left:0;position:absolute;right:0}
.wlmi-dash-faq-q{align-items:flex-start;background:transparent;border:0;cursor:pointer;display:flex;font-family:inherit;gap:clamp(20px,3vw,48px);justify-content:space-between;padding:0;text-align:left;width:100%}
.wlmi-dash-faq-q>span:not(.wlmi-dash-faq-toggle){color:var(--wlmi-faq-question);flex:1 1 auto;font-family:inherit;font-size:clamp(24px,2.7vw,37px);font-weight:700;line-height:1.1}
.wlmi-dash-faq-toggle{color:var(--wlmi-faq-icon);flex:0 0 auto;font-size:clamp(18px,1.5vw,24px);height:1.15em;margin-top:.4em;position:relative;width:1.15em}
/* FontAwesome +/− icons (provided by the theme) that cross-fade on open; the + rotates 180° on hover. */
.wlmi-dash-faq-plus,.wlmi-dash-faq-minus{align-items:center;display:flex;inset:0;justify-content:center;line-height:1;position:absolute;transition:opacity .5s ease-out,transform .5s ease-out}
.wlmi-dash-faq-plus i,.wlmi-dash-faq-minus i{font-size:inherit;line-height:1}
.wlmi-dash-faq-minus{opacity:0}
.wlmi-dash-faq-item.open .wlmi-dash-faq-plus{opacity:0}
.wlmi-dash-faq-item.open .wlmi-dash-faq-minus{opacity:1}
.wlmi-dash-faq-q:hover .wlmi-dash-faq-plus{transform:rotate(180deg)}
.wlmi-dash-faq-a{height:0;overflow:hidden;transition:height .35s ease}
.wlmi-dash-faq-a-inner p{color:var(--wlmi-faq-answer);font-size:clamp(15px,1.15vw,18px);line-height:1.65;margin:clamp(14px,1.6vw,22px) 0 0;max-width:920px}
/* Lists / links entered as HTML in an answer field inherit the answer styling. */
.wlmi-dash-faq-a-inner ul,.wlmi-dash-faq-a-inner ol{color:var(--wlmi-faq-answer);font-size:clamp(15px,1.15vw,18px);line-height:1.65;margin:clamp(12px,1.4vw,18px) 0 0;max-width:920px;padding-left:1.4em}
.wlmi-dash-faq-a-inner li{margin:.4em 0}
.wlmi-dash-faq-a-inner a{color:inherit;text-decoration:underline}

/* #30 — AI-search FAQ: a nested "accordion inside an accordion" in one dark #14171d container. The
   outer bar opens to reveal a single-open inner FAQ; inner rows reuse .wlmi-dash-faq-* structure and
   are recoloured for the dark surface. #14171d = the nav-bar colour (also --wlmi-svc-card). */
/* Full-bleed dark band: colour lives on the section so it spans edge-to-edge, and padding-top:0
   makes it butt flush against the section above (which fades into this colour). Content still aligns
   to the standard container gutters, so the bar/rows line up with the rest of the page. */
.wlmi-dash-aifaq{background:var(--wlmi-svc-card);padding-top:0}
.wlmi-dash-aifaq-shell{overflow:hidden}
.wlmi-dash-aifaq-bar{align-items:center;background:transparent;border:0;color:#fff;cursor:pointer;display:flex;font-family:inherit;gap:clamp(20px,3vw,48px);justify-content:space-between;padding:clamp(24px,2.6vw,38px) 0;position:relative;text-align:left;width:100%}
/* Same gold->red gradient underline the bottom FAQ uses (.wlmi-dash-faq-item:after), on the bar. */
.wlmi-dash-aifaq-bar:after{background:linear-gradient(90deg,var(--wlmi-btn-grad-from),var(--wlmi-btn-bg));bottom:0;content:"";height:4px;left:0;position:absolute;right:0}
.wlmi-dash-aifaq-title{color:#fff;flex:1 1 auto;font-family:inherit;font-size:clamp(22px,2.4vw,33px);font-weight:700;line-height:1.15}
.wlmi-dash-aifaq-toggle{color:var(--wlmi-accent);flex:0 0 auto;font-size:clamp(18px,1.5vw,24px);height:1.15em;margin-top:.15em;position:relative;width:1.15em}
.wlmi-dash-aifaq-bar:hover .wlmi-dash-aifaq-toggle .wlmi-dash-faq-plus{transform:rotate(180deg)}
.wlmi-dash-aifaq.open .wlmi-dash-aifaq-toggle .wlmi-dash-faq-plus{opacity:0}
.wlmi-dash-aifaq.open .wlmi-dash-aifaq-toggle .wlmi-dash-faq-minus{opacity:1}
.wlmi-dash-aifaq-panel{height:0;overflow:hidden;transition:height .35s ease}
.wlmi-dash-aifaq-panel-inner{padding:0 0 clamp(10px,1.2vw,20px)}
.wlmi-dash-aifaq-list{margin-top:0}
/* Inner rows keep the base .wlmi-dash-faq-item gold->red gradient underline (no override). */
.wlmi-dash-aifaq-item{padding:clamp(16px,1.8vw,26px) 0}
.wlmi-dash-aifaq .wlmi-dash-faq-q>span:not(.wlmi-dash-faq-toggle){color:#fff;font-size:clamp(17px,1.5vw,21px);font-weight:600}
.wlmi-dash-aifaq .wlmi-dash-faq-toggle{color:var(--wlmi-accent)}
.wlmi-dash-aifaq .wlmi-dash-faq-a-inner p,.wlmi-dash-aifaq .wlmi-dash-faq-a-inner ul,.wlmi-dash-aifaq .wlmi-dash-faq-a-inner ol{color:rgba(255,255,255,.72);max-width:none}
/* Blend the section above into the band below: overlay the AI-visibility section with a gradient
   that fades from transparent down to the AI-FAQ colour, so its bottom edge dissolves into the dark
   band with no visible seam. Overlay sits above the bg image but below the section's own content. */
.wlmi-dash-aiv::after{background:linear-gradient(180deg,transparent,var(--wlmi-svc-card));content:"";inset:0;pointer-events:none;position:absolute;z-index:1}
.wlmi-dash-aiv .wlmi-dash-con{position:relative;z-index:2}

/* Client marquee */
.wlmi-dash-clients{background:var(--wlmi-section-alt-bg);overflow:hidden}
.wlmi-dash-clients-accent{color:var(--wlmi-clients-accent)}
.wlmi-dash-clients .wlmi-dash-h2{color:var(--wlmi-clients-title)}
.wlmi-dash-marquee{margin-top:28px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#fff 8%,#fff 92%,transparent);mask:linear-gradient(90deg,transparent,#fff 8%,#fff 92%,transparent)}
.wlmi-dash-marquee-track{display:flex;gap:60px;width:max-content}
.wlmi-dash-marquee-l{animation:wlmi-dash-marq-l 45s linear infinite}
.wlmi-dash-marquee-r{animation:wlmi-dash-marq-r 45s linear infinite}
@keyframes wlmi-dash-marq-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wlmi-dash-marq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wlmi-dash-marquee-item{align-items:center;display:flex;justify-content:center}
.wlmi-dash-marquee-item img{background:#fff;border-radius:18px;filter:grayscale(1);height:120px;object-fit:contain;padding:22px;transition:filter .3s ease;width:auto}
.wlmi-dash-marquee-item img:hover{filter:grayscale(0)}
@media(max-width:760px){.wlmi-dash-marquee-item img{height:88px;padding:16px}}
@media(prefers-reduced-motion:reduce){.wlmi-dash-marquee-l,.wlmi-dash-marquee-r{animation:none}}

/* Final CTA */
.wlmi-dash-final-icon img{height:64px;width:64px;object-fit:contain}
.wlmi-dash-final .wlmi-dash-h2{margin-top:14px}

/* Infographic placeholder (shown in editor SSR preview; replaced by view.js on front end) */
.wlmi-dash-ph{align-items:center;background:linear-gradient(135deg,#eef1f7,#f7f9fc);border:1px dashed var(--wlmi-card-border,#d8deea);border-radius:16px;color:#6b7385;display:flex;font-size:14px;font-weight:600;justify-content:center;min-height:200px;padding:24px;text-align:center;width:100%}

/* Editor tweaks */
.wlmi-dash-editor-note{background:#f4f6fa;border:1px dashed #c9d2e3;border-radius:10px;color:#425067;font-size:13px;margin:8px 0;padding:14px 18px}