#sgref-body{
  --sgr-teal:#17a2ac; --sgr-teal-light:#2dc6cb; --sgr-teal-deep:#0f7c84;
  --sgr-mint:#00bfad; --sgr-magenta:#B82850; --sgr-blue:#3062a5;
  --sgr-ink:#182338; --sgr-grey:#616d80; --sgr-grey-soft:#8892a1;
  --sgr-line:#dde2ea; --sgr-card:#ffffff;
  --sgr-rail-top:104px;
  --sgr-region-filter-height:65px;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-sizing:border-box;
  line-height:normal;
}
#sgref-body *,#sgref-body *::before,#sgref-body *::after{box-sizing:inherit;}
#sgref-body h3{font-family:'Anek Latin','Inter',sans-serif; font-weight:600; margin:0; color:var(--sgr-ink); letter-spacing:-.005em;}
#sgref-body p{margin:0; color:var(--sgr-grey); line-height:1.65;}
#sgref-body a{text-decoration:none; color:inherit;}
#sgref-body button{font-family:inherit; cursor:pointer;}
#sgref-body img{max-width:100%; display:block;}
#sgref-body .sgr-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

#sgref-body .sgr-region-filter{
  position:sticky; top:var(--sgr-rail-top); z-index:6;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 0; margin-top:12px;
  background:var(--sgr-card); border-bottom:1px solid var(--sgr-line);
}
#sgref-body .sgr-region-label{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sgr-grey-soft); margin-right:4px;}
#sgref-body .sgr-region-pill{
  border:1px solid var(--sgr-line); background:var(--sgr-card); color:var(--sgr-grey);
  font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:99px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
#sgref-body .sgr-region-pill:hover{border-color:var(--sgr-teal); color:var(--sgr-ink);}
#sgref-body .sgr-region-pill.is-active{background:var(--sgr-teal); border-color:var(--sgr-teal); color:#fff;}

#sgref-body .sgr-body-layout{
  display:grid; grid-template-columns:236px 1fr; gap:64px; align-items:start;
  padding:64px 0 20px;
}
#sgref-body .sgr-rail{position:sticky; top:calc(var(--sgr-rail-top) + var(--sgr-region-filter-height) + 20px); align-self:start; display:flex; flex-direction:column;}
#sgref-body .sgr-rail-label{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sgr-grey-soft); margin-bottom:16px; padding-left:14px;}
#sgref-body .sgr-rail a{
  display:flex; align-items:center; gap:11px; padding:9px 14px;
  border-left:2px solid var(--sgr-line); color:#5b6472; font-size:14.5px; font-weight:600;
  transition:color .15s ease, border-color .15s ease;
}
#sgref-body .sgr-rail a .sgr-rk{width:8px; height:8px; border-radius:50%; background:var(--ck); opacity:.35; transition:opacity .15s ease; flex:0 0 auto;}
#sgref-body .sgr-rail a:hover{color:var(--sgr-ink);}
#sgref-body .sgr-rail a.is-active{color:var(--sgr-ink); border-left-color:var(--ck);}
#sgref-body .sgr-rail a.is-active .sgr-rk{opacity:1;}

#sgref-body .sgr-chapters{min-width:0;}
#sgref-body .sgr-chapter{padding:44px 0; border-top:1px solid var(--sgr-line);}
#sgref-body .sgr-chapter:first-child{border-top:none; padding-top:0;}
#sgref-body .sgr-chapter-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px;}
#sgref-body .sgr-chapter-title-group{display:flex; flex-direction:column; gap:6px; min-width:0;}
#sgref-body .sgr-chapter h3{font-size:21px;}
#sgref-body .sgr-ctx{font-size:14px; max-width:62ch;}

#sgref-body .sgr-logo-slider{position:relative; padding:2px 0 6px;}
#sgref-body .sgr-logo-slider-head{display:flex; flex:none; gap:8px;}
#sgref-body .sgr-slider-arrow{
  width:34px; height:34px; padding:0; border-radius:50%; flex:none;
  border:1px solid var(--sgr-line); background:var(--sgr-card); color:var(--sgr-ink);
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
#sgref-body .sgr-slider-arrow:hover{border-color:var(--sgr-teal); color:var(--sgr-teal-deep); background:color-mix(in srgb, var(--sgr-teal) 8%, var(--sgr-card));}
#sgref-body .sgr-logo-track{
  display:flex; align-items:center; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; scrollbar-width:none; padding:26px 2px 10px;
  /* Setting overflow-x without an explicit overflow-y makes overflow-y
     compute to "auto" too (a CSS Overflow spec rule), so it clips vertically
     as well - the "Customer Story" badge (top:-14px on the tile) needs this
     top padding or it gets cut off instead of floating above the card. */
}
#sgref-body .sgr-logo-track::-webkit-scrollbar{display:none;}
#sgref-body .sgr-logo-tile{
  position:relative; scroll-snap-align:start; flex:none; background:var(--sgr-card); border:1px solid var(--sgr-line); border-radius:14px;
  padding:18px 24px; height:150px; width:230px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
}
#sgref-body .sgr-logo-tile:hover{transform:translateY(-3px); box-shadow:0 16px 30px -16px rgba(20,37,63,.3); border-color:transparent;}
#sgref-body .sgr-logo-tile.has-story{border-color:color-mix(in srgb, var(--sgr-teal-light) 40%, var(--sgr-line));}
#sgref-body .sgr-logo-tile.is-region-hidden{display:none;}
#sgref-body .sgr-chapter.is-region-empty{display:none;}
#sgref-body .sgr-rail a.is-region-empty{display:none;}
#sgref-body .sgr-logo-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--sgr-teal-light); color:#06262a; font-family:'Inter',sans-serif; font-weight:800; font-size:10.5px;
  letter-spacing:.02em; padding:5px 13px; border-radius:99px; white-space:nowrap;
  box-shadow:0 8px 16px -8px rgba(20,37,63,.4);
}
#sgref-body .sgr-logo-name{
  font-family:'Anek Latin',sans-serif; font-weight:600; font-size:13.5px; color:var(--sgr-ink);
  text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#sgref-body .sgr-logo-tile img{height:84px; width:100%; object-fit:contain; flex:none;}

#sgref-body .sgr-reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
#sgref-body .sgr-reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ #sgref-body .sgr-reveal{opacity:1; transform:none; transition:none;} }

@media (max-width:980px){
  #sgref-body .sgr-body-layout{grid-template-columns:1fr; gap:0;}
  #sgref-body .sgr-region-filter{top:var(--sgr-rail-top); padding:12px 0;}
  #sgref-body .sgr-rail{
    /* top:0 used to sit the rail directly behind the fixed header (z-index
       1000 vs this rail's 30) once stuck - matching the region filter's
       header-aware offset here too, plus its own stuck height. */
    position:sticky; top:calc(var(--sgr-rail-top) + var(--sgr-region-filter-height)); z-index:30; background:color-mix(in srgb, #f2f4f8 92%, transparent);
    backdrop-filter:blur(8px); padding:14px 0; margin-bottom:20px; border-bottom:1px solid var(--sgr-line);
  }
  #sgref-body .sgr-rail-label{display:none;}
  #sgref-body .sgr-rail{flex-direction:row; overflow-x:auto; gap:6px; scrollbar-width:none;}
  #sgref-body .sgr-rail::-webkit-scrollbar{display:none;}
  #sgref-body .sgr-rail a{border-left:none; border-bottom:2px solid var(--sgr-line); padding:8px 12px; white-space:nowrap;}
  #sgref-body .sgr-rail a.is-active{border-left-color:transparent; border-bottom-color:var(--ck);}
}
@media (max-width:640px){
  #sgref-body .sgr-wrap{padding:0 22px;}
  #sgref-body .sgr-chapter-head{flex-wrap:wrap;}
}