*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#333;
  background:var(--page,#fbfbf9);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.sg-lede{max-width:62ch;margin:0 0 30px}
.sg-lede h1{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:400;line-height:1.15;
  color:#111;margin-bottom:12px}
.sg-lede h1 strong{font-weight:800}
.sg-lede p{font-size:1rem;color:#5b646d;line-height:1.65}
.sg-sec{display:flex;align-items:baseline;gap:12px;margin:38px 0 16px}
.sg-sec h2{font-size:1.02rem;font-weight:700;color:#39424b}
.sg-sec span{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#a2aab3}
.sg-sec::after{content:"";flex:1;height:1px;background:#e6e9ec}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:16px}
.sg-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #e6e9ec;border-radius:14px;
  min-height:196px;padding:18px 18px 16px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.sg-card:hover,.sg-card:focus-within{border-color:#d3d7dc;
  box-shadow:0 10px 28px rgba(24,28,33,.10);transform:translateY(-2px)}
.sg-card:focus-visible{outline:2px solid #1f4e79;outline-offset:2px}
.sg-shot{position:absolute;inset:0;opacity:0;transition:opacity .28s ease;
  pointer-events:none}
.sg-shot img{width:100%;height:100%;object-fit:cover;object-position:32% 45%}
.sg-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.20) 40%,
    rgba(255,255,255,.86) 74%,
    rgba(255,255,255,.96) 100%)}
.sg-card:hover .sg-shot,.sg-card:focus-within .sg-shot{opacity:1}
.sg-ico{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  transition:opacity .22s ease,transform .28s ease}
.sg-ico img{width:66px;height:66px;object-fit:contain}
.sg-card:hover .sg-ico,.sg-card:focus-within .sg-ico{opacity:0;transform:scale(.9)}
.sg-name{position:relative;font-size:.95rem;color:#5b646d;line-height:1.3}
.sg-card:hover .sg-name,.sg-card:focus-within .sg-name{color:#39424b}
.sg-name strong{display:block;font-size:1.06rem;font-weight:800;color:#111}
.sg-card:hover .sg-name strong,.sg-card:focus-within .sg-name strong{color:#1f2327}
.sg-count{position:relative;margin-top:7px;display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:700;color:#8a919a}
.sg-count b{color:#39424b;font-size:.78rem}
.sg-go{position:relative;margin-top:10px;font-size:.78rem;font-weight:700;
  color:#1f2327;opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease,transform .2s ease}
.sg-card:hover .sg-go,.sg-card:focus-within .sg-go{opacity:1;transform:none}
.sg-card.no-shot:hover .sg-ico,.sg-card.no-shot:focus-within .sg-ico{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sg-card,.sg-shot,.sg-ico,.sg-go{transition:none}
  .sg-card:hover,.sg-card:focus-within{transform:none}
}
@media(max-width:767px){
  .sg-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .sg-card{min-height:164px;padding:14px}
  .sg-ico img{width:52px;height:52px}
}