/* ============================================================================
   Services hub — services.html only.
   Five services, told in three movements:
     1. an index of all five, with the picture of each riding the cursor;
     2. Omnichannel, the flagship: four channels converge on one HCP profile
        as the reader scrolls, then everything the platform does, laid out;
     3. the other four services on a track that runs sideways.
   Every block below is readable with no script at all: the pinned scenes and
   the sideways track only exist once services-hub.js has confirmed GSAP is
   loaded and the viewer has not asked for reduced motion (html.sx-motion).
   ============================================================================ */

/* ------------------------------------------------------------------ hero */
.sx-hero{
  min-height:0; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + clamp(48px,8vh,96px)); padding-bottom:clamp(56px,9vh,110px);
}
.sx-hero .phero__in{ width:100%; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:clamp(40px,6vw,96px) }
.sx-hero .h1{
  font:700 clamp(42px,5.2vw,80px)/1 var(--font-display); letter-spacing:-.04em;
  max-width:9ch;
}
.sx-hero .lede{ margin-top:var(--s-lg); max-width:34ch; color:#DCE5F7 }
.sx-hero__orca{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--s-lg);
  font:600 15px/1 var(--font-text); color:#fff; text-decoration:none;
  padding:12px 18px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.3); transition:background .25s, border-color .25s }
.sx-hero__orca:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6) }
.sx-hero__orca svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.sx-hero .w{ display:inline-block; will-change:transform,filter }

.sx-index{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18) }
.sx-index li{ border-bottom:1px solid rgba(255,255,255,.18) }
.sx-index a{
  position:relative; display:grid; grid-template-columns:34px 112px minmax(0,1fr) 22px;
  align-items:center; gap:var(--s-md);
  padding:clamp(14px,2.2vh,22px) 4px; color:#fff; text-decoration:none;
  overflow:hidden; isolation:isolate;
}
/* the row fills from the left on hover, like a bar being charged */
.sx-index a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(109,207,246,.22), rgba(109,207,246,.04));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease-out);
}
.sx-index a:hover::before, .sx-index a:focus-visible::before{ transform:scaleX(1) }
.sx-index__n{ font:600 13px/1 var(--font-text); letter-spacing:.1em; color:var(--c-accent-on-dark) }
.sx-index__t{
  font:600 clamp(22px,2.3vw,34px)/1.1 var(--font-display); letter-spacing:-.02em;
  transition:transform .55s var(--ease-out);
}
.sx-index a:hover .sx-index__t{ transform:translateX(10px) }
.sx-index__t small{ display:block; margin-top:8px; font:500 14px/1.35 var(--font-text); letter-spacing:0; color:#B9C8E8 }
.sx-index svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
               stroke-linecap:round; stroke-linejoin:round;
               transition:transform .45s var(--ease-out) }
.sx-index a:hover svg{ transform:translateY(3px) }
.sx-index__flag{
  display:inline-block; margin-left:10px; vertical-align:middle;
  font:600 10px/1 var(--font-text); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 8px; border-radius:var(--r-pill);
  background:var(--c-accent-on-dark); color:#0B1530;
}

/* the picture that rides the cursor down the index */
.sx-float{
  position:fixed; left:0; top:0; z-index:var(--z-overlay); pointer-events:none;
  width:min(340px,26vw); aspect-ratio:16/10; margin:-110px 0 0 28px;
  border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  transform:scale(0); transform-origin:0 50%;
}
.sx-float img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px;
  opacity:0; transition:opacity .35s var(--ease);
}
.sx-float img.on{ opacity:1 }
.sx-float img.is-cover{ object-fit:cover; padding:0 }

.sx-cue{
  position:absolute; left:50%; bottom:22px; z-index:1; transform:translateX(-50%);
  display:grid; justify-items:center; gap:8px;
  font:600 11px/1 var(--font-text); letter-spacing:.14em; text-transform:uppercase; color:#C6D2EC;
}
.sx-cue i{ width:1.5px; height:38px; background:rgba(255,255,255,.25); position:relative; overflow:hidden }
.sx-cue i::after{
  content:''; position:absolute; left:0; right:0; top:-40%; height:40%;
  background:#fff; animation:sx-cue 1.8s var(--ease) infinite;
}
@keyframes sx-cue{ to{ top:100% } }

@media (max-width:900px){
  .sx-hero{ min-height:0; padding-top:calc(var(--nav-h) + 56px) }
  .sx-hero .phero__in{ grid-template-columns:1fr; gap:var(--s-xl) }
  .sx-hero .h1{ max-width:none }
  .sx-index a{ grid-template-columns:28px minmax(0,1fr) 20px; gap:var(--s-sm) }
  .sx-cue{ display:none }
}

/* ------------------------------------------------------- 01 omnichannel */
.sx-omni{ background:#0B1530; color:#fff; position:relative; overflow:hidden }
.sx-omni::before{
  /* one slow wash of the accent behind the whole section */
  content:''; position:absolute; inset:-20% -10% auto; height:80%; pointer-events:none;
  background:radial-gradient(60% 60% at 70% 30%, rgba(47,107,255,.28), transparent 70%);
}
.sx-omni__pin{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(24px,4vw,72px);
  padding:calc(var(--nav-h) + 40px) var(--pad-x) 56px;
  max-width:var(--maxw); margin-inline:auto;
}
.sx-kicker{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--s-md);
  font:600 13px/1 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent-on-dark);
}
.sx-kicker b{
  font-weight:600; padding:6px 10px; border-radius:var(--r-pill);
  border:1px solid rgba(109,207,246,.45);
}
.sx-omni h2{
  font:700 clamp(46px,6vw,96px)/.95 var(--font-display); letter-spacing:-.045em; margin:0;
}
.sx-omni__lede{ font:var(--t-lead-airy); color:#C6D2EC; margin:var(--s-lg) 0 0; max-width:34ch }

.sx-steps{ list-style:none; margin:var(--s-xl) 0 0; padding:0; display:grid; gap:4px; counter-reset:st }
.sx-steps li{
  counter-increment:st; position:relative;
  padding:12px 0 12px 44px; font:var(--t-body); color:rgba(255,255,255,.42);
  transition:color .4s var(--ease);
}
.sx-steps li::before{
  content:counter(st); position:absolute; left:0; top:9px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font:600 12px/1 var(--font-text); border:1px solid rgba(255,255,255,.25);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.sx-steps li.is-on{ color:#fff }
.sx-steps li.is-on::before{ background:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark); color:#0B1530 }

/* the stage: four channels at the corners, one profile at the centre */
.sx-stage{ position:relative; aspect-ratio:1.12/1; width:100%; max-height:74vh; justify-self:center }
.sx-stage svg.sx-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.sx-lines line{ stroke:rgba(109,207,246,.55); stroke-width:1.5; vector-effect:non-scaling-stroke; fill:none }
.sx-lines .flow{
  stroke:#fff; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:.02 .18; opacity:0;
}
.sx-stage.is-live .sx-lines .flow{ opacity:1; animation:sx-flow 1.6s linear infinite }
@keyframes sx-flow{ to{ stroke-dashoffset:-.2 } }

.sx-chan{
  position:absolute; transform:translate(-50%,-50%);
  width:clamp(150px,15vw,210px); padding:14px 16px;
  border-radius:16px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.sx-chan:hover{ background:rgba(255,255,255,.14); border-color:rgba(109,207,246,.6) }
.sx-chan:nth-of-type(1){ left:14%; top:15% }
.sx-chan:nth-of-type(2){ left:86%; top:15% }
.sx-chan:nth-of-type(3){ left:14%; top:85% }
.sx-chan:nth-of-type(4){ left:86%; top:85% }
.sx-chan__ico{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:10px;
  background:linear-gradient(145deg,#4F7BEA,#204289);
}
.sx-chan__ico svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.sx-chan b{ display:block; font:600 16px/1.2 var(--font-text) }
.sx-chan > span:not(.sx-chan__ico){ display:block; margin-top:4px; font:var(--t-caption); color:#C6D2EC }

.sx-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(210px,22vw,290px); padding:18px 18px 16px;
  border-radius:22px; background:#fff; color:var(--ink);
  box-shadow:0 0 0 10px rgba(109,207,246,.10), 0 0 0 22px rgba(109,207,246,.05), 0 40px 80px -30px rgba(0,0,0,.6);
}
.sx-core__head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--hairline) }
.sx-core__head img{ width:44px; height:44px; object-fit:cover; object-position:50% 8%; border-radius:50%; background:#E8EEFB }
.sx-core__head b{ display:block; font:600 15px/1.2 var(--font-text) }
.sx-core__head span{ display:block; font:var(--t-fine); color:var(--ink-muted-48); margin-top:4px }
.sx-core ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px }
.sx-core li{
  display:flex; align-items:center; gap:10px; font:var(--t-caption); color:var(--ink-muted-80);
  padding:7px 10px; border-radius:10px; background:var(--canvas-parchment);
}
.sx-core li i{ width:8px; height:8px; border-radius:50%; background:var(--c-accent); flex:none }
.sx-core__next{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background:var(--c-accent); color:#fff; font:600 13px/1.3 var(--font-text);
  display:flex; justify-content:space-between; gap:8px;
}
.sx-core__next span{ color:var(--c-accent-on-dark) }

/* ---- what omnichannel covers */
.sx-omni__body{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:clamp(40px,6vw,96px) var(--pad-x) var(--s-section) }
.sx-sub{ font:600 13px/1 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent-on-dark); margin:0 0 var(--s-md) }
.sx-omni__body h3.sx-h{ font:600 clamp(28px,3.2vw,44px)/1.08 var(--font-display); letter-spacing:-.02em; margin:0; max-width:22ch }

.sx-chans{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);
  margin-top:var(--s-xl); list-style:none; padding:0;
}
.sx-chcard{
  display:flex; flex-direction:column; height:100%; color:#fff; text-decoration:none;
  border-radius:20px; overflow:hidden; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .5s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.sx-chcard:hover{ transform:translateY(-6px); border-color:rgba(109,207,246,.55); background:rgba(255,255,255,.08) }
.sx-chcard figure{ margin:0; aspect-ratio:16/10; overflow:hidden; background:#fff }
.sx-chcard img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 1s var(--ease-out) }
.sx-chcard:hover img{ transform:scale(1.1) }
.sx-chcard div{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1 }
.sx-chcard small{ font:600 11px/1 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent-on-dark) }
.sx-chcard b{ font:600 21px/1.15 var(--font-display) }
.sx-chcard p{ margin:0; font:var(--t-caption); color:#C6D2EC }
.sx-chcard em{ margin-top:auto; padding-top:10px; font:600 13px/1 var(--font-text); font-style:normal; color:#fff;
               display:inline-flex; align-items:center; gap:6px }
.sx-chcard em svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
                   transition:transform .3s var(--ease-out) }
.sx-chcard:hover em svg{ transform:translateX(4px) }

.sx-plat{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,4vw,72px);
  align-items:center; margin-top:clamp(64px,8vw,120px);
}
.sx-plat ol{ list-style:none; margin:var(--s-xl) 0 0; padding:0; border-top:1px solid rgba(255,255,255,.14) }
.sx-plat li{ border-bottom:1px solid rgba(255,255,255,.14) }
.sx-plat a{
  display:grid; grid-template-columns:42px minmax(0,1fr) 20px; gap:14px; align-items:start;
  padding:18px 0; color:#fff; text-decoration:none;
}
.sx-plat a > span{ font:600 13px/1.6 var(--font-text); color:var(--c-accent-on-dark) }
.sx-plat b{ display:block; font:600 18px/1.3 var(--font-text); transition:color .3s var(--ease) }
.sx-plat p{ margin:6px 0 0; font:var(--t-caption); color:#C6D2EC; max-width:52ch }
.sx-plat a svg{ width:18px; height:18px; margin-top:3px; fill:none; stroke:currentColor; stroke-width:2;
                stroke-linecap:round; stroke-linejoin:round; opacity:.5;
                transition:transform .35s var(--ease-out), opacity .3s var(--ease) }
.sx-plat a:hover b{ color:var(--c-accent-on-dark) }
.sx-plat a:hover svg{ transform:translate(3px,-3px); opacity:1 }
.sx-plat figure{ margin:0; border-radius:24px; background:#fff; padding:clamp(10px,1.4vw,20px);
                 box-shadow:0 50px 100px -50px rgba(0,0,0,.8) }
.sx-plat figure img{ width:100%; height:auto; border-radius:14px }

.sx-omni__cta{ display:flex; flex-wrap:wrap; gap:var(--s-sm); margin-top:var(--s-xxl) }
.sx-btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font:600 15px/1 var(--font-text); padding:15px 22px; border-radius:var(--r-pill);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sx-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
             transition:transform .3s var(--ease-out) }
.sx-btn:hover svg{ transform:translateX(4px) }
.sx-btn--light{ background:#fff; color:var(--c-accent-text) }
.sx-btn--light:hover{ background:var(--c-accent-on-dark); color:#0B1530 }
.sx-btn--line{ color:#fff; border:1px solid rgba(255,255,255,.35) }
.sx-btn--line:hover{ border-color:#fff; background:rgba(255,255,255,.08) }

@media (max-width:1100px){ .sx-chans{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:900px){
  .sx-omni__pin{ grid-template-columns:1fr; min-height:0; padding-top:clamp(64px,10vw,96px) }
  .sx-steps{ display:none }
  /* on a phone the stage becomes a card with the channels as a grid under it */
  .sx-stage{ aspect-ratio:auto; max-height:none; display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .sx-stage svg.sx-lines{ display:none }
  .sx-core{ position:relative; left:auto; top:auto; transform:none; width:100%; grid-column:1 / -1; margin-bottom:12px; order:-1 }
  .sx-chan{ position:relative; left:auto !important; top:auto !important; transform:none; width:auto }
  .sx-plat{ grid-template-columns:1fr }
}
@media (max-width:560px){ .sx-chans{ grid-template-columns:1fr } }

/* ------------------------------------------------- 02–05 the other four */
.sx-more{ background:var(--canvas-parchment); overflow:hidden }
.sx-more__head{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--s-section) var(--pad-x) clamp(28px,4vw,48px);
  display:flex; justify-content:space-between; align-items:end; gap:var(--s-lg); flex-wrap:wrap;
}
.sx-more__head .h2{ font:700 clamp(36px,4.6vw,72px)/1 var(--font-display); letter-spacing:-.04em; max-width:14ch }
.sx-more__head .lede{ max-width:36ch }
/* The rail is what pins: the heading above it scrolls away first, so the
   whole of every panel — its links included — fits on the screen while the
   track runs. */
.sx-rail{ display:flex; flex-direction:column; justify-content:center }
html.sx-motion .sx-rail{ min-height:100vh; min-height:100svh; padding-top:var(--nav-h) }
html.sx-motion .sx-track{ padding-bottom:clamp(24px,4vh,48px) }
html.sx-motion .sx-panel{ max-height:calc(100svh - var(--nav-h) - 90px) }
.sx-bar{ width:calc(100% - 2 * var(--pad-x)); height:2px; background:var(--hairline); margin:0 var(--pad-x); max-width:calc(var(--maxw) - 2 * var(--pad-x)); position:relative }
.sx-bar i{ position:absolute; inset:0; background:var(--c-accent); transform-origin:0 50%; transform:scaleX(0) }

.sx-track{
  display:flex; gap:clamp(16px,2vw,28px);
  padding:clamp(28px,4vw,48px) var(--pad-x) var(--s-section);
  list-style:none; margin:0;
}
.sx-panel{
  flex:0 0 min(84vw,1040px);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,48px);
  background:#fff; border:1px solid var(--hairline); border-radius:28px;
  padding:clamp(22px,3vw,44px); position:relative; overflow:hidden;
}
.sx-panel__num{
  position:absolute; right:clamp(18px,2.4vw,36px); top:clamp(4px,1vw,14px);
  font:800 clamp(90px,12vw,190px)/1 var(--font-display); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--c-accent) 22%,transparent);
  pointer-events:none;
}
.sx-panel__copy{ position:relative; display:flex; flex-direction:column; min-width:0 }
.sx-panel h3{ font:700 clamp(30px,3.4vw,52px)/1 var(--font-display); letter-spacing:-.035em; margin:0 }
.sx-panel__copy > p{ font:var(--t-body); color:var(--ink-muted-80); margin:var(--s-md) 0 0; max-width:46ch }
.sx-panel ul{ list-style:none; margin:auto 0 0; padding:var(--s-lg) 0 0; display:grid; gap:8px }
.sx-panel ul a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:14px; text-decoration:none; color:var(--ink);
  background:var(--canvas-parchment); border:1px solid transparent;
  font:600 16px/1.2 var(--font-text);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.sx-panel ul a small{ display:block; font:var(--t-caption); color:var(--ink-muted-48); font-weight:400; margin-top:3px }
.sx-panel ul a svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
                    stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease-out) }
.sx-panel ul a:hover{ background:#fff; border-color:color-mix(in srgb,var(--c-accent) 40%,transparent); color:var(--c-accent-text) }
.sx-panel ul a:hover svg{ transform:translateX(5px) }
.sx-panel figure{
  margin:0; align-self:center; position:relative;
  border-radius:20px; overflow:hidden; aspect-ratio:4/3;
  background:radial-gradient(80% 80% at 70% 20%, color-mix(in srgb,var(--c-accent) 12%,#fff), #F5F7FC 70%);
  display:grid; place-items:center;
}
.sx-panel figure > img{ width:100%; height:100%; object-fit:contain; padding:clamp(10px,1.6vw,22px); transform-origin:50% 60% }
/* each practice is shown by its own scene: the brand doctor at work */
.sx-panel figure .scene{ justify-self:stretch; align-self:stretch; transform-origin:50% 60% }

@media (max-width:900px){
  .sx-track{ flex-direction:column; padding-top:var(--s-md) }
  .sx-panel{ flex:auto; grid-template-columns:1fr }
  .sx-panel figure{ order:-1; aspect-ratio:16/10 }
  .sx-panel__num{ display:none }
  html.sx-motion .sx-rail{ min-height:0; padding-top:0 }
  html.sx-motion .sx-panel{ max-height:none }
  .sx-bar{ display:none }
}

/* --------------------------------------------------------------- marquee */
.sx-marq{ background:var(--c-accent); color:#fff; overflow:hidden; padding:clamp(22px,3vw,36px) 0 }
.sx-marq__track{ display:flex; width:max-content; will-change:transform }
.sx-marq span{
  font:700 clamp(30px,4.2vw,64px)/1 var(--font-display); letter-spacing:-.035em;
  padding-inline:clamp(18px,2vw,32px); white-space:nowrap; display:inline-flex; align-items:center;
  gap:clamp(18px,2vw,32px);
}
.sx-marq span::after{ content:''; width:.34em; height:.34em; border-radius:50%; background:var(--c-accent-on-dark) }
.sx-marq span:nth-child(even){ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.75) }
/* with no script the band still moves, just on its own clock */
html:not(.sx-motion) .sx-marq__track{ animation:sx-marq 60s linear infinite }
@keyframes sx-marq{ to{ transform:translateX(-50%) } }

/* ------------------------------------------------------------ reduced */
@media (prefers-reduced-motion:reduce){
  .sx-cue i::after, .sx-stage.is-live .sx-lines .flow, html:not(.sx-motion) .sx-marq__track{ animation:none }
  .sx-index a::before, .sx-index__t, .sx-chcard, .sx-chcard img{ transition:none }
}

/* each practice with a picture of its work, so the head is not words alone */
.sx-index__img{ width:112px; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.5); transition:transform .5s var(--ease-out) }
.sx-index__img img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.25) }
.sx-index a:hover .sx-index__img{ transform:scale(1.06) rotate(-1.5deg) }
.sx-hero .sx-cue{ display:none }
/* the picture that followed the pointer is now in each row */
.sx-float{ display:none !important }
@media (max-width:560px){
  .sx-index a{ grid-template-columns:24px 76px minmax(0,1fr) 18px !important; gap:12px }
  .sx-index__img{ width:76px; border-radius:9px }
  .sx-index__img img{ padding:0 }
  .sx-index__t{ font-size:20px !important }
}