.sss-lm{--lm-ink:#334156;--lm-muted:#647086;--lm-green:#008556;max-width:1220px;padding:32px 24px;margin:0 auto;font-family:Commissioner,Helvetica,Arial,sans-serif;color:var(--lm-ink)}
.sss-lm *{box-sizing:border-box}
.sss-lm__heading{max-width:780px;margin:0 auto 45px;text-align:center}
.sss-lm--left .sss-lm__heading{max-width:100%;margin-left:0;text-align:left}
.sss-lm__kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--lm-green);margin:0 0 14px;line-height:1.5}
.sss-lm__heading h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.04em;font-weight:800;margin:0 0 14px;color:var(--lm-ink)}
.sss-lm__intro{font-size:18px;line-height:1.55;color:var(--lm-muted);margin:0}
.sss-lm__grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0}
.sss-lm--4 .sss-lm__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sss-lm__card{--lm-tag:#69a7ee;--lm-circle:#edf5ff;position:relative;text-align:center;min-width:0;margin:0;padding:22px 24px 28px;list-style:none}
.sss-lm--why .sss-lm__card{background:#fff;border:1px solid #edf0f4;border-radius:30px;box-shadow:0 16px 45px rgba(46,61,87,.07)}
.sss-lm__card--2{--lm-tag:#ef6ca5;--lm-circle:#fff0f7}.sss-lm__card--3{--lm-tag:#8f83dc;--lm-circle:#f2efff}.sss-lm__card--4{--lm-tag:#008f68;--lm-circle:#edf8f4}.sss-lm--why .sss-lm__card--3{--lm-tag:#008f68}
.sss-lm__tag{position:absolute;left:18px;top:18px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--lm-tag);color:#fff;font-size:18px;font-weight:800;z-index:2;box-shadow:0 6px 14px rgba(65,91,135,.15)}
.sss-lm__circle{position:relative;width:78%;aspect-ratio:1;margin:10px auto 0;border-radius:50%;overflow:hidden;display:flex;align-items:center;background:var(--lm-circle)}
.sss-lm__visual{position:relative;width:78%;aspect-ratio:1;margin:0 auto;overflow:visible;display:flex;align-items:center;background:transparent;border-radius:0;box-shadow:none}
.sss-lm__image{display:block;width:100%;height:100%;object-fit:contain;flex:none}
.sss-lm__image[class*="--strip"]{width:318%;max-width:none;height:106%;object-fit:cover;flex:0 0 318%}
.sss-lm__image--strip-1{transform:translateX(-33.3333%)}.sss-lm__image--strip-2{transform:translateX(-66.6666%)}
.sss-lm__card h3{font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.02em;margin:20px 0 6px;color:var(--lm-ink)}
.sss-lm__card>p{font-size:16px;line-height:1.6;color:var(--lm-muted);margin:0}
.sss-lm--steps .sss-lm__grid{gap:44px}.sss-lm--steps.sss-lm--4 .sss-lm__grid{gap:28px}
.sss-lm--steps .sss-lm__card{padding:0}
.sss-lm--steps .sss-lm__tag{left:11%}
.sss-lm--steps .sss-lm__visual{margin-top:0}
.sss-lm--steps .sss-lm__card:not(:last-child):after{content:'→';position:absolute;right:-36px;top:38%;color:#97a7c3;font-size:27px}
.sss-lm--steps.sss-lm--4 .sss-lm__card:not(:last-child):after{right:-26px}
@media(max-width:980px){.sss-lm--4 .sss-lm__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.sss-lm--4 .sss-lm__card:nth-child(2):after{display:none}.sss-lm__card{padding:18px 14px 24px}.sss-lm__circle,.sss-lm__visual{width:82%}}
@media(max-width:680px){.sss-lm{padding:20px 18px}.sss-lm__grid,.sss-lm--4 .sss-lm__grid{grid-template-columns:1fr;gap:24px}.sss-lm--steps .sss-lm__grid{gap:46px}.sss-lm__circle,.sss-lm__visual{width:76%;max-width:290px}.sss-lm--steps .sss-lm__card:after{display:none}.sss-lm__heading{margin-bottom:32px}}

/* Reusable compact size: images and step connectors share a stable row. */
.sss-lm--steps.sss-lm--compact .sss-lm__visual{width:min(65%,200px);max-width:200px}
.sss-lm--steps.sss-lm--compact .sss-lm__tag{left:calc(50% - min(32.5%,100px) - 6px);top:0;width:30px;height:30px;font-size:16px}
.sss-lm--steps.sss-lm--compact .sss-lm__card:not(:last-child):after{top:min(32.5cqw,86px)}
@media(max-width:680px){.sss-lm--steps.sss-lm--compact .sss-lm__visual{width:180px;max-width:65%}.sss-lm--steps.sss-lm--compact .sss-lm__tag{left:calc(50% - 96px)}}

/* Approved 18 September 2026: global layout for all why instances; steps unchanged. */
.sss-lm--why.sss-lm--text-focus{padding:32px 24px 42px}
.sss-lm--text-focus .sss-lm__heading{margin:0 auto 34px;max-width:630px}
.sss-lm--text-focus.sss-lm--left .sss-lm__heading{margin-left:0;text-align:left}
.sss-lm--text-focus .sss-lm__heading h2{font-size:clamp(32px,5.4vw,48px);line-height:1.1;letter-spacing:-.035em;white-space:pre-line}
.sss-lm--text-focus .sss-lm__kicker{font-size:13px;margin-bottom:14px}
.sss-lm--text-focus .sss-lm__intro{max-width:530px;font-size:17px;line-height:1.55}
.sss-lm--text-focus.sss-lm--center .sss-lm__intro{margin-left:auto;margin-right:auto}
.sss-lm--text-focus .sss-lm__grid{gap:48px;align-items:start}
.sss-lm--why.sss-lm--text-focus .sss-lm__card{background:none;border:0;box-shadow:none;border-radius:0;padding:0;text-align:center}
/* 144px × 1.2. Keep legacy illustration background-images, but remove their
   white field. Multiply also blends baked-in white image corners into the
   existing light gradient without new raster assets or clipping the figures. */
.sss-lm--why.sss-lm--text-focus .sss-lm__circle{width:78%;max-width:200px;margin:0 auto 21px;background-color:transparent!important;box-shadow:none;border-radius:50%;overflow:hidden;mix-blend-mode:multiply}
.sss-lm--text-focus .sss-lm__image{object-fit:contain}
.sss-lm--text-focus .sss-lm__card h3{font-size:23px;line-height:1.2;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.sss-lm--text-focus .sss-lm__card h3 span{display:block}
.sss-lm--text-focus .sss-lm__card>p{font-size:17px;line-height:1.6;color:#526174}
@media(max-width:680px){
 .sss-lm--text-focus .sss-lm__grid{grid-template-columns:1fr;gap:30px}
 .sss-lm--why.sss-lm--text-focus .sss-lm__card{display:block}
 .sss-lm--text-focus .sss-lm__card h3{font-size:23px;margin-bottom:8px}
 .sss-lm--text-focus .sss-lm__card h3 span{display:inline}
 .sss-lm--text-focus .sss-lm__card>p{font-size:16px;line-height:1.55}
 .sss-lm--why.sss-lm--text-focus .sss-lm__card--no-image{display:block}
}
@media(max-width:380px){
 .sss-lm--why.sss-lm--text-focus{padding-left:18px;padding-right:18px}
 .sss-lm--text-focus .sss-lm__card h3{font-size:21px}
}

/* Titles and copy share the illustration's centre, in all 3/4-item variants. */
.sss-lm.sss-lm--why .sss-lm__grid{column-gap:48px;row-gap:44px}
.sss-lm.sss-lm--why.sss-lm--4 .sss-lm__grid{column-gap:36px}
.sss-lm.sss-lm--why .sss-lm__card h3,.sss-lm.sss-lm--why .sss-lm__card>p{text-align:center;max-width:32ch;margin-left:auto;margin-right:auto}
@media(max-width:680px){.sss-lm.sss-lm--why .sss-lm__grid{row-gap:44px}}
