/* ============================================================
   SANKEY MOTION - CANONICAL FAMILY HEADER v2.5
   Same geometry and interaction across gateway / Studio / Learn /
   Playground. Product identity stays left; navigation stays right.
   ============================================================ */

:root{
  --sm-header-ink:#17324b;
  --sm-header-blue:#1260cf;
  --sm-header-line:#dbe4ea;
  --sm-header-height:106px;
}

@view-transition{
  navigation:auto;
}

.family-header{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:var(--sm-header-height) !important;
  margin:0 !important;
  padding:0 clamp(24px,2.65vw,42px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:32px !important;
  border:0 !important;
  border-bottom:1px solid var(--sm-header-line) !important;
  background:rgba(255,255,255,.975) !important;
  color:var(--sm-header-ink) !important;
  box-shadow:none !important;
  position:relative !important;
  z-index:80 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  view-transition-name:sankey-family-header;
}

.family-brand{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  gap:20px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--sm-header-ink) !important;
  text-decoration:none !important;
  border:0 !important;
  background:transparent !important;
  view-transition-name:sankey-family-brand;
}

.family-mark{
  box-sizing:border-box !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #bdd1df !important;
  border-radius:15px !important;
  background:#fbfdff !important;
  color:var(--sm-header-ink) !important;
  box-shadow:0 1px 0 rgba(16,40,61,.02) !important;
  font:800 17px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:.045em !important;
}

.family-name{
  margin:0 !important;
  padding:0 !important;
  color:var(--sm-header-ink) !important;
  font:700 clamp(20px,1.45vw,25px)/1.05 Georgia,"Times New Roman",serif !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
}

.family-nav{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  flex:1 1 auto !important;
  gap:clamp(24px,2.45vw,48px) !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
  view-transition-name:sankey-family-nav;
}

.family-nav a{
  position:relative !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:var(--sm-header-height) !important;
  margin:0 !important;
  padding:2px 0 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--sm-header-ink) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font:650 clamp(13px,1.05vw,16px)/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:-.01em !important;
  transition:color .18s ease,opacity .18s ease !important;
}

.family-nav a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:20px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--sm-header-blue) !important;
  transform:scaleX(0) !important;
  transform-origin:center !important;
  opacity:0 !important;
  transition:transform .20s cubic-bezier(.2,.7,.2,1),opacity .18s ease !important;
}

.family-nav a:hover,
.family-nav a:focus-visible{
  color:var(--sm-header-blue) !important;
  outline:none !important;
}

.family-nav a:hover::after,
.family-nav a:focus-visible::after{
  transform:scaleX(.58) !important;
  opacity:.55 !important;
}

.family-nav a[aria-current="page"]{
  color:var(--sm-header-blue) !important;
}

.family-nav a[aria-current="page"]::after{
  transform:scaleX(1) !important;
  opacity:1 !important;
}

.family-brand:hover .family-name,
.family-brand:focus-visible .family-name{
  color:var(--sm-header-blue) !important;
}

.family-brand:focus-visible{
  outline:2px solid color-mix(in srgb,var(--sm-header-blue) 35%,transparent) !important;
  outline-offset:7px !important;
  border-radius:14px !important;
}

::view-transition-old(sankey-family-header),
::view-transition-new(sankey-family-header),
::view-transition-old(sankey-family-brand),
::view-transition-new(sankey-family-brand),
::view-transition-old(sankey-family-nav),
::view-transition-new(sankey-family-nav){
  animation-duration:.18s;
  animation-timing-function:cubic-bezier(.2,.7,.2,1);
}

@media(max-width:980px){
  :root{--sm-header-height:92px}

  .family-header{
    padding-left:24px !important;
    padding-right:24px !important;
    gap:24px !important;
  }

  .family-mark{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
  }

  .family-name{font-size:20px !important}

  .family-nav{
    gap:24px !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }

  .family-nav::-webkit-scrollbar{display:none !important}
  .family-nav a{font-size:13px !important}
  .family-nav a::after{bottom:15px !important}
}

@media(max-width:720px){
  :root{--sm-header-height:auto}

  .family-header{
    min-height:0 !important;
    padding:16px 20px 0 !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .family-brand{gap:14px !important}

  .family-mark{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  .family-name{font-size:19px !important}

  .family-nav{
    width:100% !important;
    justify-content:flex-start !important;
    gap:26px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .family-nav a{
    min-height:48px !important;
    padding:0 !important;
    font-size:12px !important;
  }

  .family-nav a::after{bottom:7px !important}
}

@media(prefers-reduced-motion:reduce){
  .family-nav a,
  .family-nav a::after{transition:none !important}

  ::view-transition-old(sankey-family-header),
  ::view-transition-new(sankey-family-header),
  ::view-transition-old(sankey-family-brand),
  ::view-transition-new(sankey-family-brand),
  ::view-transition-old(sankey-family-nav),
  ::view-transition-new(sankey-family-nav){
    animation:none !important;
  }
}